import * as i0 from '@angular/core'; import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, ViewChild, Output, NgModule } from '@angular/core'; import * as i3 from '@angular/common'; import { CommonModule } from '@angular/common'; import { RippleModule } from 'primeng/ripple'; import * as i1 from 'primeng/api'; import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api'; import { trigger, transition, style, animate } from '@angular/animations'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import * as i2 from 'primeng/tree'; import { TreeModule } from 'primeng/tree'; import { ZIndexUtils } from 'primeng/utils'; const TREESELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TreeSelect), multi: true }; class TreeSelect { constructor(config, cd, el, overlayService) { this.config = config; this.cd = cd; this.el = el; this.overlayService = overlayService; this.type = "button"; this.scrollHeight = "400px"; this.metaKeySelection = true; this.display = "comma"; this.selectionMode = "single"; this.propagateSelectionDown = true; this.propagateSelectionUp = true; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; this.onNodeExpand = new EventEmitter(); this.onNodeCollapse = new EventEmitter(); this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.onNodeUnselect = new EventEmitter(); this.onNodeSelect = new EventEmitter(); this.expandedNodes = []; this.onModelChange = () => { }; this.onModelTouched = () => { }; } get options() { return this._options; } ; set options(options) { this._options = options; this.updateTreeState(); } ngOnInit() { this.updateTreeState(); } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'value': this.valueTemplate = item.template; break; case 'header': this.headerTemplate = item.template; break; case 'empty': this.emptyTemplate = item.template; break; case 'footer': this.footerTemplate = item.template; break; default: this.valueTemplate = item.template; break; } }); } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': this.overlayEl = event.element; this.onOverlayEnter(); break; } } onOverlayAnimationDone(event) { switch (event.toState) { case 'void': this.onOverlayLeave(); break; } } onSelectionChange(event) { this.value = event; this.onModelChange(this.value); this.cd.markForCheck(); } onClick(event) { if (!this.disabled && (!this.overlayEl || !this.overlayEl.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) { if (this.overlayVisible) { this.hide(); } else this.show(); this.focusInput.nativeElement.focus(); } } onKeyDown(event) { switch (event.which) { //down case 40: if (!this.overlayVisible && event.altKey) { this.show(); event.preventDefault(); } else if (this.overlayVisible && this.overlayEl) { let focusableElements = DomHandler.getFocusableElements(this.overlayEl); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); } event.preventDefault(); } break; //space case 32: if (!this.overlayVisible) { this.show(); event.preventDefault(); } break; //enter and escape case 13: case 27: if (this.overlayVisible) { this.hide(); event.preventDefault(); } break; //tab case 9: this.hide(); break; default: break; } } show() { this.overlayVisible = true; } hide() { this.overlayVisible = false; this.cd.markForCheck(); } onOverlayClick(event) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); } updateTreeState() { if (this.value) { let selectedNodes = this.selectionMode === "single" ? [this.value] : [...this.value]; this.resetExpandedNodes(); if (selectedNodes && this.options) { this.updateTreeBranchState(null, null, selectedNodes); } } } updateTreeBranchState(node, path, selectedNodes) { if (node) { if (this.isSelected(node)) { this.expandPath(path); selectedNodes.splice(selectedNodes.indexOf(node), 1); } if (selectedNodes.length > 0 && node.children) { for (let childNode of node.children) { path.push(node); this.updateTreeBranchState(childNode, path, selectedNodes); } } } else { for (let childNode of this.options) { this.updateTreeBranchState(childNode, [], selectedNodes); } } } expandPath(expandedNodes) { for (let node of expandedNodes) { node.expanded = true; } this.expandedNodes = [...expandedNodes]; } nodeExpand(event) { this.onNodeExpand.emit(event); this.expandedNodes.push(event.node); } nodeCollapse(event) { this.onNodeCollapse.emit(event); this.expandedNodes.splice(this.expandedNodes.indexOf(event.node), 1); } resetExpandedNodes() { for (let node of this.expandedNodes) { node.expanded = false; } this.expandedNodes = []; } findSelectedNodes(node, keys, selectedNodes) { if (node) { if (this.isSelected(node)) { selectedNodes.push(node); delete keys[node.key]; } if (Object.keys(keys).length && node.children) { for (let childNode of node.children) { this.findSelectedNodes(childNode, keys, selectedNodes); } } } else { for (let childNode of this.options) { this.findSelectedNodes(childNode, keys, selectedNodes); } } } isSelected(node) { return this.findIndexInSelection(node) != -1; } findIndexInSelection(node) { let index = -1; if (this.value) { if (this.selectionMode === "single") { let areNodesEqual = (this.value.key && this.value.key === node.key) || this.value == node; index = areNodesEqual ? 0 : -1; } else { for (let i = 0; i < this.value.length; i++) { let selectedNode = this.value[i]; let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node; if (areNodesEqual) { index = i; break; } } } } return index; } onSelect(node) { this.onNodeSelect.emit(node); if (this.selectionMode === 'single') { this.hide(); } } onUnselect(node) { this.onNodeUnselect.emit(node); } onOverlayEnter() { ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay); this.appendContainer(); this.alignOverlay(); this.bindOutsideClickListener(); this.bindScrollListener(); this.bindResizeListener(); this.onShow.emit(); } onOverlayLeave() { this.unbindOutsideClickListener(); this.unbindScrollListener(); this.unbindResizeListener(); ZIndexUtils.clear(this.overlayEl); this.overlayEl = null; this.onHide.emit(); } onFocus() { this.focused = true; } onBlur() { this.focused = false; } writeValue(value) { this.value = value; this.updateTreeState(); this.cd.markForCheck(); } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { this.disabled = val; this.cd.markForCheck(); } appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.overlayEl); else document.getElementById(this.appendTo).appendChild(this.overlayEl); } } restoreAppend() { if (this.overlayEl && this.appendTo) { if (this.appendTo === 'body') document.body.removeChild(this.overlayEl); else document.getElementById(this.appendTo).removeChild(this.overlayEl); } } alignOverlay() { if (this.appendTo) { DomHandler.absolutePosition(this.overlayEl, this.containerEl.nativeElement); this.overlayEl.style.minWidth = DomHandler.getOuterWidth(this.containerEl.nativeElement) + 'px'; } else { DomHandler.relativePosition(this.overlayEl, this.containerEl.nativeElement); } } bindOutsideClickListener() { if (!this.outsideClickListener) { this.outsideClickListener = (event) => { if (this.overlayVisible && this.overlayEl && !this.containerEl.nativeElement.contains(event.target) && !this.overlayEl.contains(event.target)) { this.hide(); } }; document.addEventListener('click', this.outsideClickListener); } } unbindOutsideClickListener() { if (this.outsideClickListener) { document.removeEventListener('click', this.outsideClickListener); this.outsideClickListener = null; } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEl.nativeElement, () => { if (this.overlayVisible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } bindResizeListener() { if (!this.resizeListener) { this.resizeListener = () => { if (this.overlayVisible) { this.hide(); } }; window.addEventListener('resize', this.resizeListener); } } unbindResizeListener() { if (this.resizeListener) { window.removeEventListener('resize', this.resizeListener); this.resizeListener = null; } } ngOnDestroy() { this.restoreAppend(); this.unbindOutsideClickListener(); this.unbindResizeListener(); if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } if (this.overlayEl) { ZIndexUtils.clear(this.overlayEl); this.overlayEl = null; } } containerClass() { return { 'p-treeselect p-component p-inputwrapper': true, 'p-treeselect-chip': this.display === 'chip', 'p-disabled': this.disabled, 'p-focus': this.focused }; } labelClass() { return { 'p-treeselect-label': true, 'p-placeholder': this.label === this.placeholder, 'p-treeselect-label-empty': !this.placeholder && this.emptyValue }; } get emptyMessageText() { return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE); } get emptyValue() { return !this.value || Object.keys(this.value).length === 0; } get emptyOptions() { return !this.options || this.options.length === 0; } get label() { let value = this.value || []; return value.length ? value.map(node => node.label).join(', ') : (this.selectionMode === "single" && this.value) ? value.label : this.placeholder; } } 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 }); 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: `
{{label || 'empty'}}
{{node.label}}
{{placeholder || 'empty'}}
{{emptyMessageText}}
`, 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: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelect, decorators: [{ type: Component, args: [{ selector: 'p-treeSelect', template: `
{{label || 'empty'}}
{{node.label}}
{{placeholder || 'empty'}}
{{emptyMessageText}}
`, animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], host: { 'class': 'p-element p-inputwrapper', '[class.p-inputwrapper-filled]': '!emptyValue', '[class.p-inputwrapper-focus]': 'focused || overlayVisible' }, 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"] }] }], ctorParameters: function () { return [{ type: i1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.OverlayService }]; }, propDecorators: { type: [{ type: Input }], inputId: [{ type: Input }], scrollHeight: [{ type: Input }], disabled: [{ type: Input }], metaKeySelection: [{ type: Input }], display: [{ type: Input }], selectionMode: [{ type: Input }], tabindex: [{ type: Input }], ariaLabelledBy: [{ type: Input }], placeholder: [{ type: Input }], panelClass: [{ type: Input }], emptyMessage: [{ type: Input }], appendTo: [{ type: Input }], propagateSelectionDown: [{ type: Input }], propagateSelectionUp: [{ type: Input }], options: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], containerEl: [{ type: ViewChild, args: ['container'] }], focusInput: [{ type: ViewChild, args: ['focusInput'] }], onNodeExpand: [{ type: Output }], onNodeCollapse: [{ type: Output }], onShow: [{ type: Output }], onHide: [{ type: Output }], onNodeUnselect: [{ type: Output }], onNodeSelect: [{ type: Output }] } }); class TreeSelectModule { } TreeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 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] }); TreeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, imports: [[CommonModule, RippleModule, SharedModule, TreeModule], SharedModule, TreeModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, RippleModule, SharedModule, TreeModule], exports: [TreeSelect, SharedModule, TreeModule], declarations: [TreeSelect] }] }] }); /** * Generated bundle index. Do not edit. */ export { TREESELECT_VALUE_ACCESSOR, TreeSelect, TreeSelectModule };