source: trip-planner-front/node_modules/primeng/fesm2020/primeng-organizationchart.mjs@ 6fe77af

Last change on this file since 6fe77af was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 19.4 KB
Line 
1import * as i0 from '@angular/core';
2import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, ContentChildren, NgModule } from '@angular/core';
3import { trigger, state, style, transition, animate } from '@angular/animations';
4import * as i1 from '@angular/common';
5import { CommonModule } from '@angular/common';
6import { PrimeTemplate, SharedModule } from 'primeng/api';
7import { Subject } from 'rxjs';
8
9class OrganizationChartNode {
10 constructor(chart, cd) {
11 this.cd = cd;
12 this.chart = chart;
13 this.subscription = this.chart.selectionSource$.subscribe(() => {
14 this.cd.markForCheck();
15 });
16 }
17 get leaf() {
18 return this.node.leaf == false ? false : !(this.node.children && this.node.children.length);
19 }
20 get colspan() {
21 return (this.node.children && this.node.children.length) ? this.node.children.length * 2 : null;
22 }
23 onNodeClick(event, node) {
24 this.chart.onNodeClick(event, node);
25 }
26 toggleNode(event, node) {
27 node.expanded = !node.expanded;
28 if (node.expanded)
29 this.chart.onNodeExpand.emit({ originalEvent: event, node: this.node });
30 else
31 this.chart.onNodeCollapse.emit({ originalEvent: event, node: this.node });
32 event.preventDefault();
33 }
34 isSelected() {
35 return this.chart.isSelected(this.node);
36 }
37 ngOnDestroy() {
38 this.subscription.unsubscribe();
39 }
40}
41OrganizationChartNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartNode, deps: [{ token: forwardRef(() => OrganizationChart) }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
42OrganizationChartNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: OrganizationChartNode, selector: "[pOrganizationChartNode]", inputs: { node: "node", root: "root", first: "first", last: "last" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
43 <tbody *ngIf="node">
44 <tr>
45 <td [attr.colspan]="colspan">
46 <div [class]="node.styleClass" [ngClass]="{'p-organizationchart-node-content': true, 'p-organizationchart-selectable-node': chart.selectionMode && node.selectable !== false,'p-highlight':isSelected()}"
47 (click)="onNodeClick($event,node)">
48 <div *ngIf="!chart.getTemplateForNode(node)">{{node.label}}</div>
49 <div *ngIf="chart.getTemplateForNode(node)">
50 <ng-container *ngTemplateOutlet="chart.getTemplateForNode(node); context: {$implicit: node}"></ng-container>
51 </div>
52 <a *ngIf="!leaf" tabindex="0" class="p-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)">
53 <i class="p-node-toggler-icon pi" [ngClass]="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
54 </a>
55 </div>
56 </td>
57 </tr>
58 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-lines" [@childState]="'in'">
59 <td [attr.colspan]="colspan">
60 <div class="p-organizationchart-line-down"></div>
61 </td>
62 </tr>
63 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-lines" [@childState]="'in'">
64 <ng-container *ngIf="node.children && node.children.length === 1">
65 <td [attr.colspan]="colspan">
66 <div class="p-organizationchart-line-down"></div>
67 </td>
68 </ng-container>
69 <ng-container *ngIf="node.children && node.children.length > 1">
70 <ng-template ngFor let-child [ngForOf]="node.children" let-first="first" let-last="last">
71 <td class="p-organizationchart-line-left" [ngClass]="{'p-organizationchart-line-top':!first}">&nbsp;</td>
72 <td class="p-organizationchart-line-right" [ngClass]="{'p-organizationchart-line-top':!last}">&nbsp;</td>
73 </ng-template>
74 </ng-container>
75 </tr>
76 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-nodes" [@childState]="'in'">
77 <td *ngFor="let child of node.children" colspan="2">
78 <table class="p-organizationchart-table" pOrganizationChartNode [node]="child"></table>
79 </td>
80 </tr>
81 </tbody>
82 `, isInline: true, styles: [".p-organizationchart-table{border-spacing:0;border-collapse:separate;margin:0 auto}.p-organizationchart-table>tbody>tr>td{text-align:center;vertical-align:top;padding:0 .75rem}.p-organizationchart-node-content{display:inline-block;position:relative}.p-organizationchart-node-content .p-node-toggler{position:absolute;bottom:-.75rem;margin-left:-.75rem;z-index:2;left:50%;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:1.5rem;height:1.5rem}.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{position:relative;top:.25rem}.p-organizationchart-line-down{margin:0 auto;height:20px;width:1px}.p-organizationchart-line-right,.p-organizationchart-line-left{border-radius:0}.p-organizationchart-selectable-node{cursor:pointer}.p-organizationchart .p-organizationchart-node-hidden{display:none}.p-organizationchart-preservespace .p-organizationchart-node-hidden{visibility:hidden;display:inherit}\n"], components: [{ type: OrganizationChartNode, selector: "[pOrganizationChartNode]", inputs: ["node", "root", "first", "last"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
83 trigger('childState', [
84 state('in', style({ opacity: 1 })),
85 transition('void => *', [
86 style({ opacity: 0 }),
87 animate(150)
88 ]),
89 transition('* => void', [
90 animate(150, style({ opacity: 0 }))
91 ])
92 ])
93 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
94i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartNode, decorators: [{
95 type: Component,
96 args: [{ selector: '[pOrganizationChartNode]', template: `
97 <tbody *ngIf="node">
98 <tr>
99 <td [attr.colspan]="colspan">
100 <div [class]="node.styleClass" [ngClass]="{'p-organizationchart-node-content': true, 'p-organizationchart-selectable-node': chart.selectionMode && node.selectable !== false,'p-highlight':isSelected()}"
101 (click)="onNodeClick($event,node)">
102 <div *ngIf="!chart.getTemplateForNode(node)">{{node.label}}</div>
103 <div *ngIf="chart.getTemplateForNode(node)">
104 <ng-container *ngTemplateOutlet="chart.getTemplateForNode(node); context: {$implicit: node}"></ng-container>
105 </div>
106 <a *ngIf="!leaf" tabindex="0" class="p-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)">
107 <i class="p-node-toggler-icon pi" [ngClass]="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
108 </a>
109 </div>
110 </td>
111 </tr>
112 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-lines" [@childState]="'in'">
113 <td [attr.colspan]="colspan">
114 <div class="p-organizationchart-line-down"></div>
115 </td>
116 </tr>
117 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-lines" [@childState]="'in'">
118 <ng-container *ngIf="node.children && node.children.length === 1">
119 <td [attr.colspan]="colspan">
120 <div class="p-organizationchart-line-down"></div>
121 </td>
122 </ng-container>
123 <ng-container *ngIf="node.children && node.children.length > 1">
124 <ng-template ngFor let-child [ngForOf]="node.children" let-first="first" let-last="last">
125 <td class="p-organizationchart-line-left" [ngClass]="{'p-organizationchart-line-top':!first}">&nbsp;</td>
126 <td class="p-organizationchart-line-right" [ngClass]="{'p-organizationchart-line-top':!last}">&nbsp;</td>
127 </ng-template>
128 </ng-container>
129 </tr>
130 <tr [ngClass]="!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'" class="p-organizationchart-nodes" [@childState]="'in'">
131 <td *ngFor="let child of node.children" colspan="2">
132 <table class="p-organizationchart-table" pOrganizationChartNode [node]="child"></table>
133 </td>
134 </tr>
135 </tbody>
136 `, animations: [
137 trigger('childState', [
138 state('in', style({ opacity: 1 })),
139 transition('void => *', [
140 style({ opacity: 0 }),
141 animate(150)
142 ]),
143 transition('* => void', [
144 animate(150, style({ opacity: 0 }))
145 ])
146 ])
147 ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
148 'class': 'p-element'
149 }, styles: [".p-organizationchart-table{border-spacing:0;border-collapse:separate;margin:0 auto}.p-organizationchart-table>tbody>tr>td{text-align:center;vertical-align:top;padding:0 .75rem}.p-organizationchart-node-content{display:inline-block;position:relative}.p-organizationchart-node-content .p-node-toggler{position:absolute;bottom:-.75rem;margin-left:-.75rem;z-index:2;left:50%;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:1.5rem;height:1.5rem}.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{position:relative;top:.25rem}.p-organizationchart-line-down{margin:0 auto;height:20px;width:1px}.p-organizationchart-line-right,.p-organizationchart-line-left{border-radius:0}.p-organizationchart-selectable-node{cursor:pointer}.p-organizationchart .p-organizationchart-node-hidden{display:none}.p-organizationchart-preservespace .p-organizationchart-node-hidden{visibility:hidden;display:inherit}\n"] }]
150 }], ctorParameters: function () { return [{ type: undefined, decorators: [{
151 type: Inject,
152 args: [forwardRef(() => OrganizationChart)]
153 }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { node: [{
154 type: Input
155 }], root: [{
156 type: Input
157 }], first: [{
158 type: Input
159 }], last: [{
160 type: Input
161 }] } });
162class OrganizationChart {
163 constructor(el, cd) {
164 this.el = el;
165 this.cd = cd;
166 this.preserveSpace = true;
167 this.selectionChange = new EventEmitter();
168 this.onNodeSelect = new EventEmitter();
169 this.onNodeUnselect = new EventEmitter();
170 this.onNodeExpand = new EventEmitter();
171 this.onNodeCollapse = new EventEmitter();
172 this.selectionSource = new Subject();
173 this.selectionSource$ = this.selectionSource.asObservable();
174 }
175 get selection() {
176 return this._selection;
177 }
178 set selection(val) {
179 this._selection = val;
180 if (this.initialized)
181 this.selectionSource.next(null);
182 }
183 get root() {
184 return this.value && this.value.length ? this.value[0] : null;
185 }
186 ngAfterContentInit() {
187 if (this.templates.length) {
188 this.templateMap = {};
189 }
190 this.templates.forEach((item) => {
191 this.templateMap[item.getType()] = item.template;
192 });
193 this.initialized = true;
194 }
195 getTemplateForNode(node) {
196 if (this.templateMap)
197 return node.type ? this.templateMap[node.type] : this.templateMap['default'];
198 else
199 return null;
200 }
201 onNodeClick(event, node) {
202 let eventTarget = event.target;
203 if (eventTarget.className && (eventTarget.className.indexOf('p-node-toggler') !== -1 || eventTarget.className.indexOf('p-node-toggler-icon') !== -1)) {
204 return;
205 }
206 else if (this.selectionMode) {
207 if (node.selectable === false) {
208 return;
209 }
210 let index = this.findIndexInSelection(node);
211 let selected = (index >= 0);
212 if (this.selectionMode === 'single') {
213 if (selected) {
214 this.selection = null;
215 this.onNodeUnselect.emit({ originalEvent: event, node: node });
216 }
217 else {
218 this.selection = node;
219 this.onNodeSelect.emit({ originalEvent: event, node: node });
220 }
221 }
222 else if (this.selectionMode === 'multiple') {
223 if (selected) {
224 this.selection = this.selection.filter((val, i) => i != index);
225 this.onNodeUnselect.emit({ originalEvent: event, node: node });
226 }
227 else {
228 this.selection = [...this.selection || [], node];
229 this.onNodeSelect.emit({ originalEvent: event, node: node });
230 }
231 }
232 this.selectionChange.emit(this.selection);
233 this.selectionSource.next(null);
234 }
235 }
236 findIndexInSelection(node) {
237 let index = -1;
238 if (this.selectionMode && this.selection) {
239 if (this.selectionMode === 'single') {
240 index = (this.selection == node) ? 0 : -1;
241 }
242 else if (this.selectionMode === 'multiple') {
243 for (let i = 0; i < this.selection.length; i++) {
244 if (this.selection[i] == node) {
245 index = i;
246 break;
247 }
248 }
249 }
250 }
251 return index;
252 }
253 isSelected(node) {
254 return this.findIndexInSelection(node) != -1;
255 }
256}
257OrganizationChart.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChart, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
258OrganizationChart.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: OrganizationChart, selector: "p-organizationChart", inputs: { value: "value", style: "style", styleClass: "styleClass", selectionMode: "selectionMode", preserveSpace: "preserveSpace", selection: "selection" }, outputs: { selectionChange: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
259 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-organizationchart p-component': true, 'p-organizationchart-preservespace': preserveSpace}">
260 <table class="p-organizationchart-table" pOrganizationChartNode [node]="root" *ngIf="root"></table>
261 </div>
262 `, isInline: true, components: [{ type: OrganizationChartNode, selector: "[pOrganizationChartNode]", inputs: ["node", "root", "first", "last"] }], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
263i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChart, decorators: [{
264 type: Component,
265 args: [{
266 selector: 'p-organizationChart',
267 template: `
268 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-organizationchart p-component': true, 'p-organizationchart-preservespace': preserveSpace}">
269 <table class="p-organizationchart-table" pOrganizationChartNode [node]="root" *ngIf="root"></table>
270 </div>
271 `,
272 changeDetection: ChangeDetectionStrategy.OnPush,
273 host: {
274 'class': 'p-element'
275 }
276 }]
277 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
278 type: Input
279 }], style: [{
280 type: Input
281 }], styleClass: [{
282 type: Input
283 }], selectionMode: [{
284 type: Input
285 }], preserveSpace: [{
286 type: Input
287 }], selection: [{
288 type: Input
289 }], selectionChange: [{
290 type: Output
291 }], onNodeSelect: [{
292 type: Output
293 }], onNodeUnselect: [{
294 type: Output
295 }], onNodeExpand: [{
296 type: Output
297 }], onNodeCollapse: [{
298 type: Output
299 }], templates: [{
300 type: ContentChildren,
301 args: [PrimeTemplate]
302 }] } });
303class OrganizationChartModule {
304}
305OrganizationChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
306OrganizationChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, declarations: [OrganizationChart, OrganizationChartNode], imports: [CommonModule], exports: [OrganizationChart, SharedModule] });
307OrganizationChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, imports: [[CommonModule], SharedModule] });
308i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, decorators: [{
309 type: NgModule,
310 args: [{
311 imports: [CommonModule],
312 exports: [OrganizationChart, SharedModule],
313 declarations: [OrganizationChart, OrganizationChartNode]
314 }]
315 }] });
316
317/**
318 * Generated bundle index. Do not edit.
319 */
320
321export { OrganizationChart, OrganizationChartModule, OrganizationChartNode };
Note: See TracBrowser for help on using the repository browser.