import * as i0 from '@angular/core'; import { forwardRef, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i3 from 'primeng/api'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { ObjectUtils, ZIndexUtils } from 'primeng/utils'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import { trigger, transition, style, animate } from '@angular/animations'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import * as i2 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; const CASCADESELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CascadeSelect), multi: true }; class CascadeSelectSub { constructor(cascadeSelect, el) { this.el = el; this.level = 0; this.onSelect = new EventEmitter(); this.onGroupSelect = new EventEmitter(); this.activeOption = null; this.cascadeSelect = cascadeSelect; } get parentActive() { return this._parentActive; } ; set parentActive(val) { if (!val) { this.activeOption = null; } this._parentActive = val; } ngOnInit() { if (this.selectionPath && this.options && !this.dirty) { for (let option of this.options) { if (this.selectionPath.includes(option)) { this.activeOption = option; break; } } } if (!this.root) { this.position(); } } onOptionClick(event, option) { if (this.isOptionGroup(option)) { this.activeOption = (this.activeOption === option) ? null : option; this.onGroupSelect.emit({ originalEvent: event, value: option }); } else { this.onSelect.emit({ originalEvent: event, value: this.getOptionValue(option) }); } } onOptionSelect(event) { this.onSelect.emit(event); } onOptionGroupSelect(event) { this.onGroupSelect.emit(event); } getOptionLabel(option) { return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; } getOptionValue(option) { return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; } getOptionGroupLabel(optionGroup) { return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null; } getOptionGroupChildren(optionGroup) { return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[this.level]); } isOptionGroup(option) { return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[this.level]); } getOptionLabelToRender(option) { return this.isOptionGroup(option) ? this.getOptionGroupLabel(option) : this.getOptionLabel(option); } getItemClass(option) { return { 'p-cascadeselect-item': true, 'p-cascadeselect-item-group': this.isOptionGroup(option), 'p-cascadeselect-item-active p-highlight': this.isOptionActive(option) }; } isOptionActive(option) { return this.activeOption === option; } onKeyDown(event, option, index) { let listItem = event.currentTarget.parentElement; switch (event.key) { case 'Down': case 'ArrowDown': var nextItem = this.el.nativeElement.children[0].children[index + 1]; if (nextItem) { nextItem.children[0].focus(); } event.preventDefault(); break; case 'Up': case 'ArrowUp': var prevItem = this.el.nativeElement.children[0].children[index - 1]; if (prevItem) { prevItem.children[0].focus(); } event.preventDefault(); break; case 'Right': case 'ArrowRight': if (this.isOptionGroup(option)) { if (this.isOptionActive(option)) { listItem.children[1].children[0].children[0].children[0].focus(); } else { this.activeOption = option; } } event.preventDefault(); break; case 'Left': case 'ArrowLeft': this.activeOption = null; var parentList = listItem.parentElement.parentElement.parentElement; if (parentList) { parentList.children[0].focus(); } event.preventDefault(); break; case 'Enter': this.onOptionClick(event, option); event.preventDefault(); break; case 'Tab': case 'Escape': this.cascadeSelect.hide(); event.preventDefault(); break; } } position() { const parentItem = this.el.nativeElement.parentElement; const containerOffset = DomHandler.getOffset(parentItem); const viewport = DomHandler.getViewport(); const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : DomHandler.getHiddenElementOuterWidth(this.el.nativeElement.children[0]); const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]); if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) { this.el.nativeElement.children[0].style.left = '-200%'; } } } CascadeSelectSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectSub, deps: [{ token: forwardRef(() => CascadeSelect) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); CascadeSelectSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: { selectionPath: "selectionPath", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", level: "level", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: "dirty", root: "root", parentActive: "parentActive" }, outputs: { onSelect: "onSelect", onGroupSelect: "onGroupSelect" }, ngImport: i0, template: ` `, isInline: true, components: [{ type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: ["selectionPath", "options", "optionGroupChildren", "optionTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "parentActive"], outputs: ["onSelect", "onGroupSelect"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectSub, decorators: [{ type: Component, args: [{ selector: 'p-cascadeSelectSub', template: ` `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] }], ctorParameters: function () { return [{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => CascadeSelect)] }] }, { type: i0.ElementRef }]; }, propDecorators: { selectionPath: [{ type: Input }], options: [{ type: Input }], optionGroupChildren: [{ type: Input }], optionTemplate: [{ type: Input }], level: [{ type: Input }], optionLabel: [{ type: Input }], optionValue: [{ type: Input }], optionGroupLabel: [{ type: Input }], dirty: [{ type: Input }], root: [{ type: Input }], onSelect: [{ type: Output }], onGroupSelect: [{ type: Output }], parentActive: [{ type: Input }] } }); class CascadeSelect { constructor(el, cd, config, overlayService) { this.el = el; this.cd = cd; this.config = config; this.overlayService = overlayService; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; this.onChange = new EventEmitter(); this.onGroupChange = new EventEmitter(); this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.onBeforeShow = new EventEmitter(); this.onBeforeHide = new EventEmitter(); this.selectionPath = null; this.focused = false; this.filled = false; this.overlayVisible = false; this.dirty = false; this.onModelChange = () => { }; this.onModelTouched = () => { }; } ngOnInit() { this.updateSelectionPath(); } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'value': this.valueTemplate = item.template; break; case 'option': this.optionTemplate = item.template; break; } }); } onOptionSelect(event) { this.value = event.value; this.updateSelectionPath(); this.onModelChange(this.value); this.onChange.emit(event); this.hide(); this.focusInputEl.nativeElement.focus(); } onOptionGroupSelect(event) { this.dirty = true; this.onGroupChange.emit(event); } getOptionLabel(option) { return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; } getOptionValue(option) { return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; } getOptionGroupChildren(optionGroup, level) { return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[level]); } isOptionGroup(option, level) { return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]); } updateSelectionPath() { let path; if (this.value != null && this.options) { for (let option of this.options) { path = this.findModelOptionInGroup(option, 0); if (path) { break; } } } this.selectionPath = path; this.updateFilledState(); } updateFilledState() { this.filled = !(this.selectionPath == null || this.selectionPath.length == 0); } findModelOptionInGroup(option, level) { if (this.isOptionGroup(option, level)) { let selectedOption; for (let childOption of this.getOptionGroupChildren(option, level)) { selectedOption = this.findModelOptionInGroup(childOption, level + 1); if (selectedOption) { selectedOption.unshift(option); return selectedOption; } } } else if ((ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey))) { return [option]; } return null; } show() { this.onBeforeShow.emit(); this.overlayVisible = true; } hide() { this.onBeforeHide.emit(); this.overlayVisible = false; this.cd.markForCheck(); } onClick(event) { if (this.disabled) { return; } if (!this.overlayEl || !this.overlayEl || !this.overlayEl.contains(event.target)) { if (this.overlayVisible) { this.hide(); } else { this.show(); } this.focusInputEl.nativeElement.focus(); } } onFocus() { this.focused = true; } onBlur() { this.focused = false; } onOverlayClick(event) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': this.overlayEl = event.element; this.onOverlayEnter(); break; } } onOverlayAnimationDone(event) { switch (event.toState) { case 'void': this.onOverlayLeave(); break; } } 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(); this.onHide.emit(); ZIndexUtils.clear(this.overlayEl); this.overlayEl = null; this.dirty = false; } writeValue(value) { this.value = value; this.updateSelectionPath(); this.cd.markForCheck(); } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { this.disabled = val; this.cd.markForCheck(); } 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; } } 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); } } label() { if (this.selectionPath) return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]); else return this.placeholder || 'p-emptylabel'; } onKeyDown(event) { switch (event.code) { case 'Down': case 'ArrowDown': if (this.overlayVisible) { DomHandler.findSingle(this.overlayEl, '.p-cascadeselect-item').children[0].focus(); } else if (event.altKey && this.options && this.options.length) { this.show(); } event.preventDefault(); break; case 'Space': case 'Enter': if (!this.overlayVisible) this.show(); else this.hide(); event.preventDefault(); break; case 'Tab': case 'Escape': if (this.overlayVisible) { this.hide(); event.preventDefault(); } break; } } containerClass() { return { 'p-cascadeselect p-component p-inputwrapper': true, 'p-disabled': this.disabled, 'p-focus': this.focused }; } labelClass() { return { 'p-cascadeselect-label': true, 'p-placeholder': this.label() === this.placeholder, 'p-cascadeselect-label-empty': !this.value && (this.label() === 'p-emptylabel' || this.label().length === 0) }; } ngOnDestroy() { this.restoreAppend(); this.unbindOutsideClickListener(); this.unbindResizeListener(); if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } this.overlayEl = null; } } CascadeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); CascadeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CascadeSelect, selector: "p-cascadeSelect", inputs: { styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", appendTo: "appendTo", disabled: "disabled", rounded: "rounded", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "focusInputEl", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
{{label()}}
`, isInline: true, styles: [".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect .p-cascadeselect-panel{min-width:100%}.p-cascadeselect-panel{position:absolute;top:0;left:0}.p-cascadeselect-item{cursor:pointer;font-weight:normal;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}\n"], components: [{ type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: ["selectionPath", "options", "optionGroupChildren", "optionTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "parentActive"], outputs: ["onSelect", "onGroupSelect"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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: CascadeSelect, decorators: [{ type: Component, args: [{ selector: 'p-cascadeSelect', template: `
{{label()}}
`, 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]': 'filled', '[class.p-inputwrapper-focus]': 'focused || overlayVisible' }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect .p-cascadeselect-panel{min-width:100%}.p-cascadeselect-panel{position:absolute;top:0;left:0}.p-cascadeselect-item{cursor:pointer;font-weight:normal;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.PrimeNGConfig }, { type: i3.OverlayService }]; }, propDecorators: { styleClass: [{ type: Input }], style: [{ type: Input }], options: [{ type: Input }], optionLabel: [{ type: Input }], optionValue: [{ type: Input }], optionGroupLabel: [{ type: Input }], optionGroupChildren: [{ type: Input }], placeholder: [{ type: Input }], value: [{ type: Input }], dataKey: [{ type: Input }], inputId: [{ type: Input }], tabindex: [{ type: Input }], ariaLabelledBy: [{ type: Input }], appendTo: [{ type: Input }], disabled: [{ type: Input }], rounded: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], focusInputEl: [{ type: ViewChild, args: ['focusInput'] }], containerEl: [{ type: ViewChild, args: ['container'] }], onChange: [{ type: Output }], onGroupChange: [{ type: Output }], onShow: [{ type: Output }], onHide: [{ type: Output }], onBeforeShow: [{ type: Output }], onBeforeHide: [{ type: Output }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class CascadeSelectModule { } CascadeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); CascadeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, SharedModule, RippleModule], exports: [CascadeSelect, CascadeSelectSub, SharedModule] }); CascadeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectModule, imports: [[CommonModule, SharedModule, RippleModule], SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CascadeSelectModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, SharedModule, RippleModule], exports: [CascadeSelect, CascadeSelectSub, SharedModule], declarations: [CascadeSelect, CascadeSelectSub] }] }] }); /** * Generated bundle index. Do not edit. */ export { CASCADESELECT_VALUE_ACCESSOR, CascadeSelect, CascadeSelectModule, CascadeSelectSub };