source: trip-planner-front/node_modules/primeng/fesm2015/primeng-organizationchart.mjs@ 571e0df

Last change on this file since 571e0df 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 () {
151 return [{ type: undefined, decorators: [{
152 type: Inject,
153 args: [forwardRef(() => OrganizationChart)]
154 }] }, { type: i0.ChangeDetectorRef }];
155 }, propDecorators: { node: [{
156 type: Input
157 }], root: [{
158 type: Input
159 }], first: [{
160 type: Input
161 }], last: [{
162 type: Input
163 }] } });
164class OrganizationChart {
165 constructor(el, cd) {
166 this.el = el;
167 this.cd = cd;
168 this.preserveSpace = true;
169 this.selectionChange = new EventEmitter();
170 this.onNodeSelect = new EventEmitter();
171 this.onNodeUnselect = new EventEmitter();
172 this.onNodeExpand = new EventEmitter();
173 this.onNodeCollapse = new EventEmitter();
174 this.selectionSource = new Subject();
175 this.selectionSource$ = this.selectionSource.asObservable();
176 }
177 get selection() {
178 return this._selection;
179 }
180 set selection(val) {
181 this._selection = val;
182 if (this.initialized)
183 this.selectionSource.next(null);
184 }
185 get root() {
186 return this.value && this.value.length ? this.value[0] : null;
187 }
188 ngAfterContentInit() {
189 if (this.templates.length) {
190 this.templateMap = {};
191 }
192 this.templates.forEach((item) => {
193 this.templateMap[item.getType()] = item.template;
194 });
195 this.initialized = true;
196 }
197 getTemplateForNode(node) {
198 if (this.templateMap)
199 return node.type ? this.templateMap[node.type] : this.templateMap['default'];
200 else
201 return null;
202 }
203 onNodeClick(event, node) {
204 let eventTarget = event.target;
205 if (eventTarget.className && (eventTarget.className.indexOf('p-node-toggler') !== -1 || eventTarget.className.indexOf('p-node-toggler-icon') !== -1)) {
206 return;
207 }
208 else if (this.selectionMode) {
209 if (node.selectable === false) {
210 return;
211 }
212 let index = this.findIndexInSelection(node);
213 let selected = (index >= 0);
214 if (this.selectionMode === 'single') {
215 if (selected) {
216 this.selection = null;
217 this.onNodeUnselect.emit({ originalEvent: event, node: node });
218 }
219 else {
220 this.selection = node;
221 this.onNodeSelect.emit({ originalEvent: event, node: node });
222 }
223 }
224 else if (this.selectionMode === 'multiple') {
225 if (selected) {
226 this.selection = this.selection.filter((val, i) => i != index);
227 this.onNodeUnselect.emit({ originalEvent: event, node: node });
228 }
229 else {
230 this.selection = [...this.selection || [], node];
231 this.onNodeSelect.emit({ originalEvent: event, node: node });
232 }
233 }
234 this.selectionChange.emit(this.selection);
235 this.selectionSource.next(null);
236 }
237 }
238 findIndexInSelection(node) {
239 let index = -1;
240 if (this.selectionMode && this.selection) {
241 if (this.selectionMode === 'single') {
242 index = (this.selection == node) ? 0 : -1;
243 }
244 else if (this.selectionMode === 'multiple') {
245 for (let i = 0; i < this.selection.length; i++) {
246 if (this.selection[i] == node) {
247 index = i;
248 break;
249 }
250 }
251 }
252 }
253 return index;
254 }
255 isSelected(node) {
256 return this.findIndexInSelection(node) != -1;
257 }
258}
259OrganizationChart.ɵ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 });
260OrganizationChart.ɵ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: `
261 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-organizationchart p-component': true, 'p-organizationchart-preservespace': preserveSpace}">
262 <table class="p-organizationchart-table" pOrganizationChartNode [node]="root" *ngIf="root"></table>
263 </div>
264 `, 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 });
265i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChart, decorators: [{
266 type: Component,
267 args: [{
268 selector: 'p-organizationChart',
269 template: `
270 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-organizationchart p-component': true, 'p-organizationchart-preservespace': preserveSpace}">
271 <table class="p-organizationchart-table" pOrganizationChartNode [node]="root" *ngIf="root"></table>
272 </div>
273 `,
274 changeDetection: ChangeDetectionStrategy.OnPush,
275 host: {
276 'class': 'p-element'
277 }
278 }]
279 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
280 type: Input
281 }], style: [{
282 type: Input
283 }], styleClass: [{
284 type: Input
285 }], selectionMode: [{
286 type: Input
287 }], preserveSpace: [{
288 type: Input
289 }], selection: [{
290 type: Input
291 }], selectionChange: [{
292 type: Output
293 }], onNodeSelect: [{
294 type: Output
295 }], onNodeUnselect: [{
296 type: Output
297 }], onNodeExpand: [{
298 type: Output
299 }], onNodeCollapse: [{
300 type: Output
301 }], templates: [{
302 type: ContentChildren,
303 args: [PrimeTemplate]
304 }] } });
305class OrganizationChartModule {
306}
307OrganizationChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
308OrganizationChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, declarations: [OrganizationChart, OrganizationChartNode], imports: [CommonModule], exports: [OrganizationChart, SharedModule] });
309OrganizationChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, imports: [[CommonModule], SharedModule] });
310i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OrganizationChartModule, decorators: [{
311 type: NgModule,
312 args: [{
313 imports: [CommonModule],
314 exports: [OrganizationChart, SharedModule],
315 declarations: [OrganizationChart, OrganizationChartNode]
316 }]
317 }] });
318
319/**
320 * Generated bundle index. Do not edit.
321 */
322
323export { OrganizationChart, OrganizationChartModule, OrganizationChartNode };
Note: See TracBrowser for help on using the repository browser.