1 | import * as i0 from '@angular/core';
|
---|
2 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
|
---|
3 | import * as i3 from '@angular/common';
|
---|
4 | import { CommonModule } from '@angular/common';
|
---|
5 | import { RippleModule } from 'primeng/ripple';
|
---|
6 | import * as i1 from 'primeng/api';
|
---|
7 | import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
|
---|
8 | import { trigger, transition, style, animate } from '@angular/animations';
|
---|
9 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
---|
10 | import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
---|
11 | import * as i2 from 'primeng/tree';
|
---|
12 | import { TreeModule } from 'primeng/tree';
|
---|
13 | import { ZIndexUtils } from 'primeng/utils';
|
---|
14 |
|
---|
15 | const TREESELECT_VALUE_ACCESSOR = {
|
---|
16 | provide: NG_VALUE_ACCESSOR,
|
---|
17 | useExisting: forwardRef(() => TreeSelect),
|
---|
18 | multi: true
|
---|
19 | };
|
---|
20 | class TreeSelect {
|
---|
21 | constructor(config, cd, el, overlayService) {
|
---|
22 | this.config = config;
|
---|
23 | this.cd = cd;
|
---|
24 | this.el = el;
|
---|
25 | this.overlayService = overlayService;
|
---|
26 | this.type = "button";
|
---|
27 | this.scrollHeight = "400px";
|
---|
28 | this.metaKeySelection = true;
|
---|
29 | this.display = "comma";
|
---|
30 | this.selectionMode = "single";
|
---|
31 | this.propagateSelectionDown = true;
|
---|
32 | this.propagateSelectionUp = true;
|
---|
33 | this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
---|
34 | this.hideTransitionOptions = '.1s linear';
|
---|
35 | this.onNodeExpand = new EventEmitter();
|
---|
36 | this.onNodeCollapse = new EventEmitter();
|
---|
37 | this.onShow = new EventEmitter();
|
---|
38 | this.onHide = new EventEmitter();
|
---|
39 | this.onNodeUnselect = new EventEmitter();
|
---|
40 | this.onNodeSelect = new EventEmitter();
|
---|
41 | this.expandedNodes = [];
|
---|
42 | this.onModelChange = () => { };
|
---|
43 | this.onModelTouched = () => { };
|
---|
44 | }
|
---|
45 | get options() {
|
---|
46 | return this._options;
|
---|
47 | }
|
---|
48 | ;
|
---|
49 | set options(options) {
|
---|
50 | this._options = options;
|
---|
51 | this.updateTreeState();
|
---|
52 | }
|
---|
53 | ngOnInit() {
|
---|
54 | this.updateTreeState();
|
---|
55 | }
|
---|
56 | ngAfterContentInit() {
|
---|
57 | this.templates.forEach((item) => {
|
---|
58 | switch (item.getType()) {
|
---|
59 | case 'value':
|
---|
60 | this.valueTemplate = item.template;
|
---|
61 | break;
|
---|
62 | case 'header':
|
---|
63 | this.headerTemplate = item.template;
|
---|
64 | break;
|
---|
65 | case 'empty':
|
---|
66 | this.emptyTemplate = item.template;
|
---|
67 | break;
|
---|
68 | case 'footer':
|
---|
69 | this.footerTemplate = item.template;
|
---|
70 | break;
|
---|
71 | default:
|
---|
72 | this.valueTemplate = item.template;
|
---|
73 | break;
|
---|
74 | }
|
---|
75 | });
|
---|
76 | }
|
---|
77 | onOverlayAnimationStart(event) {
|
---|
78 | switch (event.toState) {
|
---|
79 | case 'visible':
|
---|
80 | this.overlayEl = event.element;
|
---|
81 | this.onOverlayEnter();
|
---|
82 | break;
|
---|
83 | }
|
---|
84 | }
|
---|
85 | onOverlayAnimationDone(event) {
|
---|
86 | switch (event.toState) {
|
---|
87 | case 'void':
|
---|
88 | this.onOverlayLeave();
|
---|
89 | break;
|
---|
90 | }
|
---|
91 | }
|
---|
92 | onSelectionChange(event) {
|
---|
93 | this.value = event;
|
---|
94 | this.onModelChange(this.value);
|
---|
95 | this.cd.markForCheck();
|
---|
96 | }
|
---|
97 | onClick(event) {
|
---|
98 | if (!this.disabled && (!this.overlayEl || !this.overlayEl.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
|
---|
99 | if (this.overlayVisible) {
|
---|
100 | this.hide();
|
---|
101 | }
|
---|
102 | else
|
---|
103 | this.show();
|
---|
104 | this.focusInput.nativeElement.focus();
|
---|
105 | }
|
---|
106 | }
|
---|
107 | onKeyDown(event) {
|
---|
108 | switch (event.which) {
|
---|
109 | //down
|
---|
110 | case 40:
|
---|
111 | if (!this.overlayVisible && event.altKey) {
|
---|
112 | this.show();
|
---|
113 | event.preventDefault();
|
---|
114 | }
|
---|
115 | else if (this.overlayVisible && this.overlayEl) {
|
---|
116 | let focusableElements = DomHandler.getFocusableElements(this.overlayEl);
|
---|
117 | if (focusableElements && focusableElements.length > 0) {
|
---|
118 | focusableElements[0].focus();
|
---|
119 | }
|
---|
120 | event.preventDefault();
|
---|
121 | }
|
---|
122 | break;
|
---|
123 | //space
|
---|
124 | case 32:
|
---|
125 | if (!this.overlayVisible) {
|
---|
126 | this.show();
|
---|
127 | event.preventDefault();
|
---|
128 | }
|
---|
129 | break;
|
---|
130 | //enter and escape
|
---|
131 | case 13:
|
---|
132 | case 27:
|
---|
133 | if (this.overlayVisible) {
|
---|
134 | this.hide();
|
---|
135 | event.preventDefault();
|
---|
136 | }
|
---|
137 | break;
|
---|
138 | //tab
|
---|
139 | case 9:
|
---|
140 | this.hide();
|
---|
141 | break;
|
---|
142 | default:
|
---|
143 | break;
|
---|
144 | }
|
---|
145 | }
|
---|
146 | show() {
|
---|
147 | this.overlayVisible = true;
|
---|
148 | }
|
---|
149 | hide() {
|
---|
150 | this.overlayVisible = false;
|
---|
151 | this.cd.markForCheck();
|
---|
152 | }
|
---|
153 | onOverlayClick(event) {
|
---|
154 | this.overlayService.add({
|
---|
155 | originalEvent: event,
|
---|
156 | target: this.el.nativeElement
|
---|
157 | });
|
---|
158 | }
|
---|
159 | updateTreeState() {
|
---|
160 | if (this.value) {
|
---|
161 | let selectedNodes = this.selectionMode === "single" ? [this.value] : [...this.value];
|
---|
162 | this.resetExpandedNodes();
|
---|
163 | if (selectedNodes && this.options) {
|
---|
164 | this.updateTreeBranchState(null, null, selectedNodes);
|
---|
165 | }
|
---|
166 | }
|
---|
167 | }
|
---|
168 | updateTreeBranchState(node, path, selectedNodes) {
|
---|
169 | if (node) {
|
---|
170 | if (this.isSelected(node)) {
|
---|
171 | this.expandPath(path);
|
---|
172 | selectedNodes.splice(selectedNodes.indexOf(node), 1);
|
---|
173 | }
|
---|
174 | if (selectedNodes.length > 0 && node.children) {
|
---|
175 | for (let childNode of node.children) {
|
---|
176 | path.push(node);
|
---|
177 | this.updateTreeBranchState(childNode, path, selectedNodes);
|
---|
178 | }
|
---|
179 | }
|
---|
180 | }
|
---|
181 | else {
|
---|
182 | for (let childNode of this.options) {
|
---|
183 | this.updateTreeBranchState(childNode, [], selectedNodes);
|
---|
184 | }
|
---|
185 | }
|
---|
186 | }
|
---|
187 | expandPath(expandedNodes) {
|
---|
188 | for (let node of expandedNodes) {
|
---|
189 | node.expanded = true;
|
---|
190 | }
|
---|
191 | this.expandedNodes = [...expandedNodes];
|
---|
192 | }
|
---|
193 | nodeExpand(event) {
|
---|
194 | this.onNodeExpand.emit(event);
|
---|
195 | this.expandedNodes.push(event.node);
|
---|
196 | }
|
---|
197 | nodeCollapse(event) {
|
---|
198 | this.onNodeCollapse.emit(event);
|
---|
199 | this.expandedNodes.splice(this.expandedNodes.indexOf(event.node), 1);
|
---|
200 | }
|
---|
201 | resetExpandedNodes() {
|
---|
202 | for (let node of this.expandedNodes) {
|
---|
203 | node.expanded = false;
|
---|
204 | }
|
---|
205 | this.expandedNodes = [];
|
---|
206 | }
|
---|
207 | findSelectedNodes(node, keys, selectedNodes) {
|
---|
208 | if (node) {
|
---|
209 | if (this.isSelected(node)) {
|
---|
210 | selectedNodes.push(node);
|
---|
211 | delete keys[node.key];
|
---|
212 | }
|
---|
213 | if (Object.keys(keys).length && node.children) {
|
---|
214 | for (let childNode of node.children) {
|
---|
215 | this.findSelectedNodes(childNode, keys, selectedNodes);
|
---|
216 | }
|
---|
217 | }
|
---|
218 | }
|
---|
219 | else {
|
---|
220 | for (let childNode of this.options) {
|
---|
221 | this.findSelectedNodes(childNode, keys, selectedNodes);
|
---|
222 | }
|
---|
223 | }
|
---|
224 | }
|
---|
225 | isSelected(node) {
|
---|
226 | return this.findIndexInSelection(node) != -1;
|
---|
227 | }
|
---|
228 | findIndexInSelection(node) {
|
---|
229 | let index = -1;
|
---|
230 | if (this.value) {
|
---|
231 | if (this.selectionMode === "single") {
|
---|
232 | let areNodesEqual = (this.value.key && this.value.key === node.key) || this.value == node;
|
---|
233 | index = areNodesEqual ? 0 : -1;
|
---|
234 | }
|
---|
235 | else {
|
---|
236 | for (let i = 0; i < this.value.length; i++) {
|
---|
237 | let selectedNode = this.value[i];
|
---|
238 | let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
|
---|
239 | if (areNodesEqual) {
|
---|
240 | index = i;
|
---|
241 | break;
|
---|
242 | }
|
---|
243 | }
|
---|
244 | }
|
---|
245 | }
|
---|
246 | return index;
|
---|
247 | }
|
---|
248 | onSelect(node) {
|
---|
249 | this.onNodeSelect.emit(node);
|
---|
250 | if (this.selectionMode === 'single') {
|
---|
251 | this.hide();
|
---|
252 | }
|
---|
253 | }
|
---|
254 | onUnselect(node) {
|
---|
255 | this.onNodeUnselect.emit(node);
|
---|
256 | }
|
---|
257 | onOverlayEnter() {
|
---|
258 | ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay);
|
---|
259 | this.appendContainer();
|
---|
260 | this.alignOverlay();
|
---|
261 | this.bindOutsideClickListener();
|
---|
262 | this.bindScrollListener();
|
---|
263 | this.bindResizeListener();
|
---|
264 | this.onShow.emit();
|
---|
265 | }
|
---|
266 | onOverlayLeave() {
|
---|
267 | this.unbindOutsideClickListener();
|
---|
268 | this.unbindScrollListener();
|
---|
269 | this.unbindResizeListener();
|
---|
270 | ZIndexUtils.clear(this.overlayEl);
|
---|
271 | this.overlayEl = null;
|
---|
272 | this.onHide.emit();
|
---|
273 | }
|
---|
274 | onFocus() {
|
---|
275 | this.focused = true;
|
---|
276 | }
|
---|
277 | onBlur() {
|
---|
278 | this.focused = false;
|
---|
279 | }
|
---|
280 | writeValue(value) {
|
---|
281 | this.value = value;
|
---|
282 | this.updateTreeState();
|
---|
283 | this.cd.markForCheck();
|
---|
284 | }
|
---|
285 | registerOnChange(fn) {
|
---|
286 | this.onModelChange = fn;
|
---|
287 | }
|
---|
288 | registerOnTouched(fn) {
|
---|
289 | this.onModelTouched = fn;
|
---|
290 | }
|
---|
291 | setDisabledState(val) {
|
---|
292 | this.disabled = val;
|
---|
293 | this.cd.markForCheck();
|
---|
294 | }
|
---|
295 | appendContainer() {
|
---|
296 | if (this.appendTo) {
|
---|
297 | if (this.appendTo === 'body')
|
---|
298 | document.body.appendChild(this.overlayEl);
|
---|
299 | else
|
---|
300 | document.getElementById(this.appendTo).appendChild(this.overlayEl);
|
---|
301 | }
|
---|
302 | }
|
---|
303 | restoreAppend() {
|
---|
304 | if (this.overlayEl && this.appendTo) {
|
---|
305 | if (this.appendTo === 'body')
|
---|
306 | document.body.removeChild(this.overlayEl);
|
---|
307 | else
|
---|
308 | document.getElementById(this.appendTo).removeChild(this.overlayEl);
|
---|
309 | }
|
---|
310 | }
|
---|
311 | alignOverlay() {
|
---|
312 | if (this.appendTo) {
|
---|
313 | DomHandler.absolutePosition(this.overlayEl, this.containerEl.nativeElement);
|
---|
314 | this.overlayEl.style.minWidth = DomHandler.getOuterWidth(this.containerEl.nativeElement) + 'px';
|
---|
315 | }
|
---|
316 | else {
|
---|
317 | DomHandler.relativePosition(this.overlayEl, this.containerEl.nativeElement);
|
---|
318 | }
|
---|
319 | }
|
---|
320 | bindOutsideClickListener() {
|
---|
321 | if (!this.outsideClickListener) {
|
---|
322 | this.outsideClickListener = (event) => {
|
---|
323 | if (this.overlayVisible && this.overlayEl && !this.containerEl.nativeElement.contains(event.target) && !this.overlayEl.contains(event.target)) {
|
---|
324 | this.hide();
|
---|
325 | }
|
---|
326 | };
|
---|
327 | document.addEventListener('click', this.outsideClickListener);
|
---|
328 | }
|
---|
329 | }
|
---|
330 | unbindOutsideClickListener() {
|
---|
331 | if (this.outsideClickListener) {
|
---|
332 | document.removeEventListener('click', this.outsideClickListener);
|
---|
333 | this.outsideClickListener = null;
|
---|
334 | }
|
---|
335 | }
|
---|
336 | bindScrollListener() {
|
---|
337 | if (!this.scrollHandler) {
|
---|
338 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEl.nativeElement, () => {
|
---|
339 | if (this.overlayVisible) {
|
---|
340 | this.hide();
|
---|
341 | }
|
---|
342 | });
|
---|
343 | }
|
---|
344 | this.scrollHandler.bindScrollListener();
|
---|
345 | }
|
---|
346 | unbindScrollListener() {
|
---|
347 | if (this.scrollHandler) {
|
---|
348 | this.scrollHandler.unbindScrollListener();
|
---|
349 | }
|
---|
350 | }
|
---|
351 | bindResizeListener() {
|
---|
352 | if (!this.resizeListener) {
|
---|
353 | this.resizeListener = () => {
|
---|
354 | if (this.overlayVisible) {
|
---|
355 | this.hide();
|
---|
356 | }
|
---|
357 | };
|
---|
358 | window.addEventListener('resize', this.resizeListener);
|
---|
359 | }
|
---|
360 | }
|
---|
361 | unbindResizeListener() {
|
---|
362 | if (this.resizeListener) {
|
---|
363 | window.removeEventListener('resize', this.resizeListener);
|
---|
364 | this.resizeListener = null;
|
---|
365 | }
|
---|
366 | }
|
---|
367 | ngOnDestroy() {
|
---|
368 | this.restoreAppend();
|
---|
369 | this.unbindOutsideClickListener();
|
---|
370 | this.unbindResizeListener();
|
---|
371 | if (this.scrollHandler) {
|
---|
372 | this.scrollHandler.destroy();
|
---|
373 | this.scrollHandler = null;
|
---|
374 | }
|
---|
375 | if (this.overlayEl) {
|
---|
376 | ZIndexUtils.clear(this.overlayEl);
|
---|
377 | this.overlayEl = null;
|
---|
378 | }
|
---|
379 | }
|
---|
380 | containerClass() {
|
---|
381 | return {
|
---|
382 | 'p-treeselect p-component p-inputwrapper': true,
|
---|
383 | 'p-treeselect-chip': this.display === 'chip',
|
---|
384 | 'p-disabled': this.disabled,
|
---|
385 | 'p-focus': this.focused
|
---|
386 | };
|
---|
387 | }
|
---|
388 | labelClass() {
|
---|
389 | return {
|
---|
390 | 'p-treeselect-label': true,
|
---|
391 | 'p-placeholder': this.label === this.placeholder,
|
---|
392 | 'p-treeselect-label-empty': !this.placeholder && this.emptyValue
|
---|
393 | };
|
---|
394 | }
|
---|
395 | get emptyMessageText() {
|
---|
396 | return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
|
---|
397 | }
|
---|
398 | get emptyValue() {
|
---|
399 | return !this.value || Object.keys(this.value).length === 0;
|
---|
400 | }
|
---|
401 | get emptyOptions() {
|
---|
402 | return !this.options || this.options.length === 0;
|
---|
403 | }
|
---|
404 | get label() {
|
---|
405 | let value = this.value || [];
|
---|
406 | return value.length ? value.map(node => node.label).join(', ') : (this.selectionMode === "single" && this.value) ? value.label : this.placeholder;
|
---|
407 | }
|
---|
408 | }
|
---|
409 | TreeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelect, deps: [{ token: i1.PrimeNGConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
---|
410 | TreeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TreeSelect, selector: "p-treeSelect", inputs: { type: "type", inputId: "inputId", scrollHeight: "scrollHeight", disabled: "disabled", metaKeySelection: "metaKeySelection", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", emptyMessage: "emptyMessage", appendTo: "appendTo", propagateSelectionDown: "propagateSelectionDown", propagateSelectionUp: "propagateSelectionUp", options: "options", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, host: { properties: { "class.p-inputwrapper-filled": "!emptyValue", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }, { propertyName: "focusInput", first: true, predicate: ["focusInput"], descendants: true }], ngImport: i0, template: `
|
---|
411 | <div #container [ngClass]="containerClass()" (click)="onClick($event)">
|
---|
412 | <div class="p-hidden-accessible">
|
---|
413 | <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
|
---|
414 | aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
|
---|
415 | </div>
|
---|
416 | <div class="p-treeselect-label-container">
|
---|
417 | <div [ngClass]="labelClass()">
|
---|
418 | <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
|
---|
419 | <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
|
---|
420 | </ng-container>
|
---|
421 | <ng-template #defaultValueTemplate>
|
---|
422 | <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
|
---|
423 | {{label || 'empty'}}
|
---|
424 | </ng-container>
|
---|
425 | <ng-template #chipsValueTemplate>
|
---|
426 | <div *ngFor="let node of value" class="p-treeselect-token">
|
---|
427 | <span class="p-treeselect-token-label">{{node.label}}</span>
|
---|
428 | </div>
|
---|
429 | <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
|
---|
430 | </ng-template>
|
---|
431 | </ng-template>
|
---|
432 | </div>
|
---|
433 | </div>
|
---|
434 | <div class="p-treeselect-trigger">
|
---|
435 | <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
|
---|
436 | </div>
|
---|
437 |
|
---|
438 | <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
|
---|
439 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
|
---|
440 | <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
441 | <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
|
---|
442 | <p-tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
|
---|
443 | [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
|
---|
444 | (onNodeSelect)="onSelect($event)" (onNodeUnselect)="onUnselect($event)"></p-tree>
|
---|
445 | <div *ngIf="emptyOptions" class="p-treeselect-empty-message">
|
---|
446 | <ng-container *ngIf="!emptyTemplate; else empty">
|
---|
447 | {{emptyMessageText}}
|
---|
448 | </ng-container>
|
---|
449 | <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
|
---|
450 | </div>
|
---|
451 | </div>
|
---|
452 | <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
453 | </div>
|
---|
454 | </div>
|
---|
455 | `, isInline: true, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-fluid .p-treeselect{display:flex}\n"], components: [{ type: i2.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "scrollHeight", "virtualScroll", "virtualNodeHeight", "minBufferPx", "maxBufferPx", "indentation", "trackBy"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onFilter"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
|
---|
456 | trigger('overlayAnimation', [
|
---|
457 | transition(':enter', [
|
---|
458 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
459 | animate('{{showTransitionParams}}')
|
---|
460 | ]),
|
---|
461 | transition(':leave', [
|
---|
462 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
463 | ])
|
---|
464 | ])
|
---|
465 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
---|
466 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelect, decorators: [{
|
---|
467 | type: Component,
|
---|
468 | args: [{ selector: 'p-treeSelect', template: `
|
---|
469 | <div #container [ngClass]="containerClass()" (click)="onClick($event)">
|
---|
470 | <div class="p-hidden-accessible">
|
---|
471 | <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
|
---|
472 | aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
|
---|
473 | </div>
|
---|
474 | <div class="p-treeselect-label-container">
|
---|
475 | <div [ngClass]="labelClass()">
|
---|
476 | <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
|
---|
477 | <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
|
---|
478 | </ng-container>
|
---|
479 | <ng-template #defaultValueTemplate>
|
---|
480 | <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
|
---|
481 | {{label || 'empty'}}
|
---|
482 | </ng-container>
|
---|
483 | <ng-template #chipsValueTemplate>
|
---|
484 | <div *ngFor="let node of value" class="p-treeselect-token">
|
---|
485 | <span class="p-treeselect-token-label">{{node.label}}</span>
|
---|
486 | </div>
|
---|
487 | <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
|
---|
488 | </ng-template>
|
---|
489 | </ng-template>
|
---|
490 | </div>
|
---|
491 | </div>
|
---|
492 | <div class="p-treeselect-trigger">
|
---|
493 | <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
|
---|
494 | </div>
|
---|
495 |
|
---|
496 | <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
|
---|
497 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
|
---|
498 | <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
499 | <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
|
---|
500 | <p-tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
|
---|
501 | [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
|
---|
502 | (onNodeSelect)="onSelect($event)" (onNodeUnselect)="onUnselect($event)"></p-tree>
|
---|
503 | <div *ngIf="emptyOptions" class="p-treeselect-empty-message">
|
---|
504 | <ng-container *ngIf="!emptyTemplate; else empty">
|
---|
505 | {{emptyMessageText}}
|
---|
506 | </ng-container>
|
---|
507 | <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
|
---|
508 | </div>
|
---|
509 | </div>
|
---|
510 | <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
511 | </div>
|
---|
512 | </div>
|
---|
513 | `, animations: [
|
---|
514 | trigger('overlayAnimation', [
|
---|
515 | transition(':enter', [
|
---|
516 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
517 | animate('{{showTransitionParams}}')
|
---|
518 | ]),
|
---|
519 | transition(':leave', [
|
---|
520 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
521 | ])
|
---|
522 | ])
|
---|
523 | ], host: {
|
---|
524 | 'class': 'p-element p-inputwrapper',
|
---|
525 | '[class.p-inputwrapper-filled]': '!emptyValue',
|
---|
526 | '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
|
---|
527 | }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TREESELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-fluid .p-treeselect{display:flex}\n"] }]
|
---|
528 | }], ctorParameters: function () { return [{ type: i1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.OverlayService }]; }, propDecorators: { type: [{
|
---|
529 | type: Input
|
---|
530 | }], inputId: [{
|
---|
531 | type: Input
|
---|
532 | }], scrollHeight: [{
|
---|
533 | type: Input
|
---|
534 | }], disabled: [{
|
---|
535 | type: Input
|
---|
536 | }], metaKeySelection: [{
|
---|
537 | type: Input
|
---|
538 | }], display: [{
|
---|
539 | type: Input
|
---|
540 | }], selectionMode: [{
|
---|
541 | type: Input
|
---|
542 | }], tabindex: [{
|
---|
543 | type: Input
|
---|
544 | }], ariaLabelledBy: [{
|
---|
545 | type: Input
|
---|
546 | }], placeholder: [{
|
---|
547 | type: Input
|
---|
548 | }], panelClass: [{
|
---|
549 | type: Input
|
---|
550 | }], emptyMessage: [{
|
---|
551 | type: Input
|
---|
552 | }], appendTo: [{
|
---|
553 | type: Input
|
---|
554 | }], propagateSelectionDown: [{
|
---|
555 | type: Input
|
---|
556 | }], propagateSelectionUp: [{
|
---|
557 | type: Input
|
---|
558 | }], options: [{
|
---|
559 | type: Input
|
---|
560 | }], showTransitionOptions: [{
|
---|
561 | type: Input
|
---|
562 | }], hideTransitionOptions: [{
|
---|
563 | type: Input
|
---|
564 | }], templates: [{
|
---|
565 | type: ContentChildren,
|
---|
566 | args: [PrimeTemplate]
|
---|
567 | }], containerEl: [{
|
---|
568 | type: ViewChild,
|
---|
569 | args: ['container']
|
---|
570 | }], focusInput: [{
|
---|
571 | type: ViewChild,
|
---|
572 | args: ['focusInput']
|
---|
573 | }], onNodeExpand: [{
|
---|
574 | type: Output
|
---|
575 | }], onNodeCollapse: [{
|
---|
576 | type: Output
|
---|
577 | }], onShow: [{
|
---|
578 | type: Output
|
---|
579 | }], onHide: [{
|
---|
580 | type: Output
|
---|
581 | }], onNodeUnselect: [{
|
---|
582 | type: Output
|
---|
583 | }], onNodeSelect: [{
|
---|
584 | type: Output
|
---|
585 | }] } });
|
---|
586 | class TreeSelectModule {
|
---|
587 | }
|
---|
588 | TreeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
589 | TreeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, declarations: [TreeSelect], imports: [CommonModule, RippleModule, SharedModule, TreeModule], exports: [TreeSelect, SharedModule, TreeModule] });
|
---|
590 | TreeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, imports: [[CommonModule, RippleModule, SharedModule, TreeModule], SharedModule, TreeModule] });
|
---|
591 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, decorators: [{
|
---|
592 | type: NgModule,
|
---|
593 | args: [{
|
---|
594 | imports: [CommonModule, RippleModule, SharedModule, TreeModule],
|
---|
595 | exports: [TreeSelect, SharedModule, TreeModule],
|
---|
596 | declarations: [TreeSelect]
|
---|
597 | }]
|
---|
598 | }] });
|
---|
599 |
|
---|
600 | /**
|
---|
601 | * Generated bundle index. Do not edit.
|
---|
602 | */
|
---|
603 |
|
---|
604 | export { TREESELECT_VALUE_ACCESSOR, TreeSelect, TreeSelectModule };
|
---|