primeng/fesm2022/primeng-cascadeselect.mjs.map

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

{"version":3,"file":"primeng-cascadeselect.mjs","sources":["../../src/app/components/cascadeselect/cascadeselect.ts","../../src/app/components/cascadeselect/primeng-cascadeselect.ts"],"sourcesContent":["import { AnimationEvent } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    computed,\n    ContentChildren,\n    effect,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Inject,\n    Input,\n    NgModule,\n    numberAttribute,\n    OnInit,\n    Output,\n    QueryList,\n    signal,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { DomHandler } from 'primeng/dom';\nimport { AngleRightIcon } from 'primeng/icons/angleright';\nimport { AutoFocusModule } from 'primeng/autofocus';\n\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { Overlay, OverlayModule } from 'primeng/overlay';\nimport { RippleModule } from 'primeng/ripple';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { ObjectUtils, UniqueComponentId } from 'primeng/utils';\nimport { CascadeSelectBeforeHideEvent, CascadeSelectBeforeShowEvent, CascadeSelectChangeEvent, CascadeSelectHideEvent, CascadeSelectShowEvent } from './cascadeselect.interface';\n\nexport const CASCADESELECT_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => CascadeSelect),\n    multi: true\n};\n\n@Component({\n    selector: 'p-cascadeSelectSub',\n    template: `\n        <ul\n            class=\"p-cascadeselect-panel p-cascadeselect-items\"\n            [ngClass]=\"{ 'p-cascadeselect-panel-root': root }\"\n            [attr.role]=\"role\"\n            aria-orientation=\"horizontal\"\n            [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\"\n            [attr.aria-label]=\"listLabel\"\n        >\n            <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n                <li\n                    [ngClass]=\"getItemClass(processedOption)\"\n                    role=\"treeitem\"\n                    [attr.aria-level]=\"level + 1\"\n                    [attr.aria-setsize]=\"options.length\"\n                    [attr.data-pc-section]=\"'item'\"\n                    [id]=\"getOptionId(processedOption)\"\n                    [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\n                    [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n                    [attr.aria-posinset]=\"i + 1\"\n                >\n                    <div class=\"p-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\n                        <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n                            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\n                        </ng-container>\n                        <ng-template #defaultOptionTemplate>\n                            <span class=\"p-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\n                        </ng-template>\n                        <span class=\"p-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                            <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\n                        </span>\n                    </div>\n                    <p-cascadeSelectSub\n                        *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                        [role]=\"'group'\"\n                        class=\"p-cascadeselect-sublist\"\n                        [selectId]=\"selectId\"\n                        [focusedOptionId]=\"focusedOptionId\"\n                        [activeOptionPath]=\"activeOptionPath\"\n                        [options]=\"getOptionGroupChildren(processedOption)\"\n                        [optionLabel]=\"optionLabel\"\n                        [optionValue]=\"optionValue\"\n                        [level]=\"level + 1\"\n                        (onChange)=\"onOptionChange($event)\"\n                        [optionGroupLabel]=\"optionGroupLabel\"\n                        [optionGroupChildren]=\"optionGroupChildren\"\n                        [dirty]=\"dirty\"\n                        [optionTemplate]=\"optionTemplate\"\n                    >\n                    </p-cascadeSelectSub>\n                </li>\n            </ng-template>\n        </ul>\n    `,\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class CascadeSelectSub implements OnInit {\n    @Input() role: string | undefined;\n\n    @Input() selectId: string | undefined;\n\n    @Input() activeOptionPath: any[];\n\n    @Input() optionDisabled: any[];\n\n    @Input() focusedOptionId: string | undefined;\n\n    @Input() options: string[] | string | undefined | null;\n\n    @Input() optionGroupChildren: string[] | string | undefined | null;\n\n    @Input() optionTemplate: Nullable<TemplateRef<any>>;\n\n    @Input() groupIconTemplate: Nullable<TemplateRef<any>>;\n\n    @Input({ transform: numberAttribute }) level: number = 0;\n\n    @Input() optionLabel: string | undefined;\n\n    @Input() optionValue: string | undefined;\n\n    @Input() optionGroupLabel: string | undefined;\n\n    @Input({ transform: booleanAttribute }) dirty: boolean | undefined;\n\n    @Input({ transform: booleanAttribute }) root: boolean | undefined;\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    get listLabel(): string {\n        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];\n    }\n\n    constructor(\n        private el: ElementRef,\n        public config: PrimeNGConfig\n    ) {}\n\n    ngOnInit() {\n        if (!this.root) {\n            this.position();\n        }\n    }\n\n    onOptionClick(event, option: any) {\n        this.onChange.emit({\n            originalEvent: event,\n            value: option,\n            isFocus: true\n        });\n    }\n\n    onOptionChange(event) {\n        this.onChange.emit(event);\n    }\n\n    getOptionId(processedOption) {\n        return `${this.selectId}_${processedOption.key}`;\n    }\n\n    getOptionLabel(processedOption) {\n        return this.optionLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option;\n    }\n\n    getOptionValue(processedOption) {\n        return this.optionValue ? ObjectUtils.resolveFieldData(processedOption.option, this.optionValue) : processedOption.option;\n    }\n\n    getOptionLabelToRender(processedOption) {\n        return this.isOptionGroup(processedOption) ? this.getOptionGroupLabel(processedOption) : this.getOptionLabel(processedOption);\n    }\n\n    isOptionDisabled(processedOption) {\n        return this.optionDisabled ? ObjectUtils.resolveFieldData(processedOption.option, this.optionDisabled) : false;\n    }\n\n    getOptionGroupLabel(processedOption) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionGroupLabel) : null;\n    }\n\n    getOptionGroupChildren(processedOption) {\n        return processedOption.children;\n    }\n\n    isOptionGroup(processedOption) {\n        return ObjectUtils.isNotEmpty(processedOption.children);\n    }\n\n    isOptionSelected(processedOption) {\n        return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);\n    }\n\n    isOptionActive(processedOption) {\n        return this.activeOptionPath.some((path) => path.key === processedOption.key);\n    }\n\n    isOptionFocused(processedOption) {\n        return this.focusedOptionId === this.getOptionId(processedOption);\n    }\n\n    getItemClass(option: string | string[]) {\n        return {\n            'p-cascadeselect-item': true,\n            'p-cascadeselect-item-group': this.isOptionGroup(option),\n            'p-cascadeselect-item-active p-highlight': this.isOptionActive(option),\n            'p-focus': this.isOptionFocused(option),\n            'p-disabled': this.isOptionDisabled(option)\n        };\n    }\n\n    position() {\n        const parentItem = this.el.nativeElement.parentElement;\n        const containerOffset = DomHandler.getOffset(parentItem);\n        const viewport = DomHandler.getViewport();\n        const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : DomHandler.getHiddenElementOuterWidth(this.el.nativeElement.children[0]);\n        const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);\n\n        if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {\n            this.el.nativeElement.children[0].style.left = '-200%';\n        }\n    }\n}\n/**\n * CascadeSelect is a form component to select a value from a nested structure of options.\n * @group Components\n */\n@Component({\n    selector: 'p-cascadeSelect',\n    template: ` <div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\n        <div class=\"p-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n            <input\n                #focusInput\n                readonly\n                type=\"text\"\n                role=\"combobox\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.id]=\"inputId\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                aria-haspopup=\"tree\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onInputKeyDown($event)\"\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n            />\n        </div>\n        <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\n            <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n                <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultValueTemplate>\n                {{ label() }}\n            </ng-template>\n        </span>\n\n        <ng-container *ngIf=\"filled && !disabled && showClear\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'p-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate\" class=\"p-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"p-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'p-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'p-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'p-cascadeselect-trigger-icon'\" />\n                <span *ngIf=\"triggerIconTemplate\" class=\"p-cascadeselect-trigger-icon\">\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n            {{ searchResultMessageText }}\n        </span>\n        <p-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationDone)=\"onOverlayAnimationDone($event)\"\n            (onBeforeShow)=\"onBeforeShow.emit($event)\"\n            (onShow)=\"show($event)\"\n            (onBeforeHide)=\"onBeforeHide.emit($event)\"\n            (onHide)=\"hide($event)\"\n        >\n            <ng-template pTemplate=\"content\">\n                <div #panel class=\"p-cascadeselect-panel p-component\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                    <div class=\"p-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                        <p-cascadeSelectSub\n                            [options]=\"processedOptions\"\n                            [selectId]=\"id\"\n                            [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\n                            [activeOptionPath]=\"activeOptionPath()\"\n                            [optionLabel]=\"optionLabel\"\n                            [optionValue]=\"optionValue\"\n                            [level]=\"0\"\n                            [optionTemplate]=\"optionTemplate\"\n                            [groupIconTemplate]=\"groupIconTemplate\"\n                            [optionGroupLabel]=\"optionGroupLabel\"\n                            [optionGroupChildren]=\"optionGroupChildren\"\n                            [optionDisabled]=\"optionDisabled\"\n                            [optionValue]=\"optionValue\"\n                            [optionLabel]=\"optionLabel\"\n                            [root]=\"true\"\n                            (onChange)=\"onOptionChange($event)\"\n                            [dirty]=\"dirty\"\n                            [role]=\"'tree'\"\n                        >\n                        </p-cascadeSelectSub>\n                    </div>\n                    <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n                        {{ selectedMessageText }}\n                    </span>\n                </div>\n            </ng-template>\n        </p-overlay>\n    </div>`,\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': 'focused || overlayVisible',\n        '[class.p-cascadeselect-clearable]': 'showClear && !disabled'\n    },\n    providers: [CASCADESELECT_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./cascadeselect.css']\n})\nexport class CascadeSelect implements OnInit, AfterContentInit {\n    /**\n     * Unique identifier of the component\n     * @group Props\n     */\n    @Input() id: string | undefined;\n    /**\n     * Determines if the option will be selected on focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false;\n    /**\n     * Text to display when the search is active. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} results are available'\n     */\n    @Input() searchMessage: string | undefined;\n    /**\n     * Text to display when there is no data. Defaults to global value in i18n translation configuration.\n     * @group Props\n     */\n    @Input() emptyMessage: string | undefined;\n    /**\n     * Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} items selected'\n     */\n    @Input() selectionMessage: string | undefined;\n    /**\n     * Text to display when filtering does not return any results. Defaults to value from PrimeNG locale configuration.\n     * @group Props\n     * @defaultValue 'No available options'\n     */\n    @Input() emptySearchMessage: string | undefined;\n    /**\n     * Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue 'No selected item'\n     */\n    @Input() emptySelectionMessage: string | undefined;\n    /**\n     * Locale to use in searching. The default locale is the host environment's current locale.\n     * @group Props\n     */\n    @Input() searchLocale: string | undefined;\n    /**\n     * Name of the disabled field of an option.\n     * @group Props\n     */\n    @Input() optionDisabled: any;\n    /**\n     * Whether to focus on the first visible or selected element when the overlay panel is shown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoOptionFocus: boolean = true;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * An array of selectitems to display as the available options.\n     * @group Props\n     */\n    @Input() options: string[] | string | undefined;\n    /**\n     * Property name or getter function to use as the label of an option.\n     * @group Props\n     */\n    @Input() optionLabel: string | undefined;\n    /**\n     * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.\n     * @group Props\n     */\n    @Input() optionValue: string | undefined;\n    /**\n     * Property name or getter function to use as the label of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | string[] | undefined;\n    /**\n     * Property name or getter function to retrieve the items of a group.\n     * @group Props\n     */\n    @Input() optionGroupChildren: string | string[] | undefined;\n    /**\n     * Default text to display when no option is selected.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Selected value of the component.\n     * @group Props\n     */\n    @Input() value: string | undefined | null;\n    /**\n     * A property to uniquely identify an option.\n     * @group Props\n     */\n    @Input() dataKey: string | undefined;\n    /**\n     * Identifier of the underlying input element.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined = 0;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Label of the input for accessibility.\n     * @group Props\n     */\n    @Input() inputLabel: string | undefined;\n    /**\n     * Defines a string that labels the input for accessibility.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Id of the element or \"body\" for document where the overlay should be appended to.\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * When present, it specifies that the component should be disabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showClear: boolean = false;\n    /**\n     * Style class of the overlay panel.\n     * @group Props\n     */\n    @Input() panelStyleClass: string | undefined;\n    /**\n     * Inline style of the overlay panel.\n     * @group Props\n     */\n    @Input() panelStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.\n     * @group Props\n     */\n    @Input() overlayOptions: OverlayOptions | undefined;\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     * @deprecated deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get showTransitionOptions(): string {\n        return this._showTransitionOptions;\n    }\n    set showTransitionOptions(val: string) {\n        this._showTransitionOptions = val;\n        console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Whether the dropdown is in loading state.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) loading: boolean | undefined = false;\n    /**\n     * Icon to display in loading state.\n     * @group Props\n     */\n    @Input() loadingIcon: string | undefined;\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     * @deprecated deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get hideTransitionOptions(): string {\n        return this._hideTransitionOptions;\n    }\n    set hideTransitionOptions(val: string) {\n        this._hideTransitionOptions = val;\n        console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * Callback to invoke on value change.\n     * @param {CascadeSelectChangeEvent} event - Custom change event.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<CascadeSelectChangeEvent> = new EventEmitter<CascadeSelectChangeEvent>();\n    /**\n     * Callback to invoke when a group changes.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onGroupChange: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when the overlay is shown.\n     * @param {CascadeSelectShowEvent} event - Custom overlay show event.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<CascadeSelectShowEvent> = new EventEmitter<CascadeSelectShowEvent>();\n    /**\n     * Callback to invoke when the overlay is hidden.\n     * @param {CascadeSelectHideEvent} event - Custom overlay hide event.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<CascadeSelectHideEvent> = new EventEmitter<CascadeSelectHideEvent>();\n    /**\n     * Callback to invoke when the clear token is clicked.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<any> = new EventEmitter();\n    /**\n     * Callback to invoke before overlay is shown.\n     * @param {CascadeSelectBeforeShowEvent} event - Custom overlay show event.\n     * @group Emits\n     */\n    @Output() onBeforeShow: EventEmitter<CascadeSelectBeforeShowEvent> = new EventEmitter<CascadeSelectBeforeShowEvent>();\n    /**\n     * Callback to invoke before overlay is hidden.\n     * @param {CascadeSelectBeforeHideEvent} event - Custom overlay hide event.\n     * @group Emits\n     */\n    @Output() onBeforeHide: EventEmitter<CascadeSelectBeforeHideEvent> = new EventEmitter<CascadeSelectBeforeHideEvent>();\n    /**\n     * Callback to invoke when input receives focus.\n     * @param {FocusEvent} event - Focus event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n    /**\n     * Callback to invoke when input loses focus.\n     * @param {FocusEvent} event - Focus event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n\n    @ViewChild('focusInput') focusInputViewChild: Nullable<ElementRef>;\n\n    @ViewChild('container') containerViewChild: Nullable<ElementRef>;\n\n    @ViewChild('panel') panelViewChild: Nullable<ElementRef>;\n\n    @ViewChild('overlay') overlayViewChild: Nullable<Overlay>;\n\n    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;\n\n    _showTransitionOptions: string = '';\n\n    _hideTransitionOptions: string = '';\n\n    selectionPath: any = null;\n\n    focused: boolean = false;\n\n    overlayVisible: boolean = false;\n\n    dirty: boolean = true;\n\n    searchValue: string | undefined;\n\n    searchTimeout: any;\n\n    valueTemplate: Nullable<TemplateRef<any>>;\n\n    optionTemplate: Nullable<TemplateRef<any>>;\n\n    triggerIconTemplate: Nullable<TemplateRef<any>>;\n\n    loadingIconTemplate: Nullable<TemplateRef<any>>;\n\n    groupIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    focusedOptionInfo = signal<any>({ index: -1, level: 0, parentKey: '' });\n\n    activeOptionPath = signal<any>([]);\n\n    modelValue = signal<any>(null);\n\n    processedOptions: string[] | string | undefined = [];\n\n    get containerClass() {\n        return {\n            'p-cascadeselect p-component p-inputwrapper': true,\n            'p-disabled': this.disabled,\n            'p-focus': this.focused,\n            'p-inputwrapper-filled': this.modelValue(),\n            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled',\n            'p-inputwrapper-focus': this.focused || this.overlayVisible,\n            'p-overlay-open': this.overlayVisible\n        };\n    }\n\n    get labelClass() {\n        return {\n            'p-cascadeselect-label': true,\n            'p-placeholder': this.label() === this.placeholder,\n            'p-cascadeselect-label-empty': !this.value && (this.label() === 'p-emptylabel' || this.label().length === 0)\n        };\n    }\n\n    get focusedOptionId() {\n        return this.focusedOptionInfo().index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null;\n    }\n\n    get filled(): boolean {\n        if (typeof this.modelValue() === 'string') return !!this.modelValue();\n\n        return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;\n    }\n\n    get searchResultMessageText() {\n        return ObjectUtils.isNotEmpty(this.visibleOptions()) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText;\n    }\n\n    get searchMessageText() {\n        return this.searchMessage || this.config.translation.searchMessage || '';\n    }\n\n    get emptySearchMessageText() {\n        return this.emptySearchMessage || this.config.translation.emptySearchMessage || '';\n    }\n\n    get emptyMessageText() {\n        return this.emptyMessage || this.config.translation.emptyMessage || '';\n    }\n\n    get selectionMessageText() {\n        return this.selectionMessage || this.config.translation.selectionMessage || '';\n    }\n\n    get emptySelectionMessageText() {\n        return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';\n    }\n\n    get selectedMessageText() {\n        return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;\n    }\n\n    visibleOptions = computed(() => {\n        const processedOption = this.activeOptionPath().find((p) => p.key === this.focusedOptionInfo().parentKey);\n\n        return processedOption ? processedOption.children : this.processedOptions;\n    });\n\n    label = computed(() => {\n        const label = this.placeholder || 'p-emptylabel';\n\n        if (this.hasSelectedOption()) {\n            const activeOptionPath = this.findOptionPathByValue(this.modelValue(), null);\n            const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;\n\n            return processedOption ? this.getOptionLabel(processedOption.option) : label;\n        }\n        return label;\n    });\n\n    get _label() {\n        const label = this.placeholder || 'p-emptylabel';\n\n        if (this.hasSelectedOption()) {\n            const activeOptionPath = this.findOptionPathByValue(this.modelValue(), null);\n            const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;\n\n            return processedOption ? this.getOptionLabel(processedOption.option) : label;\n        }\n        return label;\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.options) {\n            this.processedOptions = this.createProcessedOptions(changes.options.currentValue || []);\n            this.updateModel(null);\n        }\n    }\n\n    hasSelectedOption() {\n        return ObjectUtils.isNotEmpty(this.modelValue());\n    }\n\n    createProcessedOptions(options, level = 0, parent = {}, parentKey = '') {\n        const processedOptions = [];\n\n        options &&\n            options.forEach((option, index) => {\n                const key = (parentKey !== '' ? parentKey + '_' : '') + index;\n                const newOption = {\n                    option,\n                    index,\n                    level,\n                    key,\n                    parent,\n                    parentKey\n                };\n\n                newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);\n                processedOptions.push(newOption);\n            });\n\n        return processedOptions;\n    }\n\n    onInputFocus(event: FocusEvent) {\n        if (this.disabled) {\n            // For screenreaders\n            return;\n        }\n\n        this.focused = true;\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event: FocusEvent) {\n        this.focused = false;\n        this.focusedOptionInfo.set({ indeX: -1, level: 0, parentKey: '' });\n        this.searchValue = '';\n        this.onModelTouched();\n        this.onBlur.emit(event);\n    }\n\n    onInputKeyDown(event: KeyboardEvent) {\n        if (this.disabled || this.loading) {\n            event.preventDefault();\n\n            return;\n        }\n\n        const metaKey = event.metaKey || event.ctrlKey;\n\n        switch (event.code) {\n            case 'ArrowDown':\n                this.onArrowDownKey(event);\n                break;\n\n            case 'ArrowUp':\n                this.onArrowUpKey(event);\n                break;\n\n            case 'ArrowLeft':\n                this.onArrowLeftKey(event);\n                break;\n\n            case 'ArrowRight':\n                this.onArrowRightKey(event);\n                break;\n\n            case 'Home':\n                this.onHomeKey(event);\n                break;\n\n            case 'End':\n                this.onEndKey(event);\n                break;\n\n            case 'Space':\n                this.onSpaceKey(event);\n                break;\n\n            case 'Enter':\n            case 'NumpadEnter':\n                this.onEnterKey(event);\n                break;\n\n            case 'Escape':\n                this.onEscapeKey(event);\n                break;\n\n            case 'Tab':\n                this.onTabKey(event);\n                break;\n\n            case 'Backspace':\n                this.onBackspaceKey(event);\n                break;\n\n            case 'PageDown':\n            case 'PageUp':\n            case 'ShiftLeft':\n            case 'ShiftRight':\n                //NOOP\n                break;\n\n            default:\n                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {\n                    !this.overlayVisible && this.show();\n                    this.searchOptions(event, event.key);\n                }\n\n                break;\n        }\n    }\n\n    onArrowDownKey(event) {\n        const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo().index) : this.findFirstFocusedOptionIndex();\n\n        this.changeFocusedOptionIndex(event, optionIndex);\n\n        !this.overlayVisible && this.show();\n        event.preventDefault();\n    }\n\n    onArrowUpKey(event) {\n        if (event.altKey) {\n            if (this.focusedOptionInfo().index !== -1) {\n                const processedOption = this.visibleOptions[this.focusedOptionInfo().index];\n                const grouped = this.isProccessedOptionGroup(processedOption);\n\n                !grouped && this.onOptionChange({ originalEvent: event, value: processedOption });\n            }\n\n            this.overlayVisible && this.hide();\n            event.preventDefault();\n        } else {\n            const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo().index) : this.findLastFocusedOptionIndex();\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n\n            !this.overlayVisible && this.show();\n            event.preventDefault();\n        }\n    }\n\n    onArrowLeftKey(event) {\n        if (this.overlayVisible) {\n            const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];\n            const parentOption = this.activeOptionPath().find((p) => p.key === processedOption.parentKey);\n            const matched = this.focusedOptionInfo().parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo().parentKey);\n            const root = ObjectUtils.isEmpty(processedOption.parent);\n\n            if (matched) {\n                const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== this.focusedOptionInfo().parentKey);\n                this.activeOptionPath.set(activeOptionPath);\n            }\n\n            if (!root) {\n                this.focusedOptionInfo.set({ index: -1, parentKey: parentOption ? parentOption.parentKey : '' });\n                this.searchValue = '';\n                this.onArrowDownKey(event);\n            }\n\n            event.preventDefault();\n        }\n    }\n\n    onArrowRightKey(event) {\n        if (this.overlayVisible) {\n            const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];\n            const grouped = this.isProccessedOptionGroup(processedOption);\n\n            if (grouped) {\n                const matched = this.activeOptionPath().some((p) => processedOption.key === p.key);\n\n                if (matched) {\n                    this.focusedOptionInfo.set({ index: -1, parentKey: processedOption.key });\n                    this.searchValue = '';\n                    this.onArrowDownKey(event);\n                } else {\n                    this.onOptionChange({ originalEvent: event, value: processedOption });\n                }\n            }\n\n            event.preventDefault();\n        }\n    }\n\n    onHomeKey(event) {\n        this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());\n\n        !this.overlayVisible && this.show();\n        event.preventDefault();\n    }\n\n    onEndKey(event) {\n        this.changeFocusedOptionIndex(event, this.findLastOptionIndex());\n\n        !this.overlayVisible && this.show();\n        event.preventDefault();\n    }\n\n    onEnterKey(event) {\n        if (!this.overlayVisible) {\n            this.onArrowDownKey(event);\n        } else {\n            if (this.focusedOptionInfo().index !== -1) {\n                const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];\n                const grouped = this.isProccessedOptionGroup(processedOption);\n\n                this.onOptionChange({ originalEvent: event, value: processedOption });\n                !grouped && this.hide();\n            }\n        }\n\n        event.preventDefault();\n    }\n\n    onSpaceKey(event) {\n        this.onEnterKey(event);\n    }\n\n    onEscapeKey(event) {\n        this.overlayVisible && this.hide(true);\n        event.preventDefault();\n    }\n\n    onTabKey(event) {\n        if (this.focusedOptionInfo().index !== -1) {\n            const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];\n            const grouped = this.isProccessedOptionGroup(processedOption);\n\n            !grouped && this.onOptionChange({ originalEvent: event, value: processedOption });\n        }\n\n        this.overlayVisible && this.hide();\n    }\n\n    onBackspaceKey(event) {\n        if (ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear) {\n            this.clear();\n        }\n\n        event.stopPropagation();\n    }\n\n    equalityKey() {\n        return this.optionValue ? null : this.dataKey;\n    }\n\n    updateModel(value, event?) {\n        this.value = value;\n        this.onModelChange(value);\n        this.modelValue.set(value);\n\n        this.onChange.emit({\n            originalEvent: event,\n            value: value\n        });\n    }\n\n    autoUpdateModel() {\n        if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {\n            this.focusedOptionInfo().index = this.findFirstFocusedOptionIndex();\n            this.onOptionChange({ originalEvent: null, processedOption: this.visibleOptions()[this.focusedOptionInfo().index], isHide: false });\n\n            !this.overlayVisible && this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });\n        }\n    }\n\n    scrollInView(index = -1) {\n        const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;\n        const element = DomHandler.findSingle(this.panelViewChild?.nativeElement, `li[id=\"${id}\"]`);\n\n        if (element) {\n            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });\n        }\n    }\n\n    changeFocusedOptionIndex(event, index) {\n        if (this.focusedOptionInfo().index !== index) {\n            const focusedOptionInfo = this.focusedOptionInfo();\n            this.focusedOptionInfo.set({ ...focusedOptionInfo, index });\n            this.scrollInView();\n        }\n\n        if (this.selectOnFocus) {\n            this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false });\n        }\n    }\n\n    onOptionChange(event) {\n        const { originalEvent, value, isFocus, isHide } = event;\n        if (ObjectUtils.isEmpty(value)) return;\n\n        const { index, level, parentKey, children } = value;\n        const grouped = ObjectUtils.isNotEmpty(children);\n\n        const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey);\n\n        activeOptionPath.push(value);\n\n        this.focusedOptionInfo.set({ index, level, parentKey });\n        this.activeOptionPath.set(activeOptionPath);\n\n        grouped ? this.onOptionGroupSelect({ originalEvent, value, isFocus: false }) : this.onOptionSelect({ originalEvent, value, isFocus });\n        isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);\n    }\n\n    onOptionSelect(event) {\n        const { originalEvent, value, isFocus } = event;\n        const newValue = this.getOptionValue(value.option);\n\n        const activeOptionPath = this.activeOptionPath();\n        activeOptionPath.forEach((p) => (p.selected = true));\n\n        this.activeOptionPath.set(activeOptionPath);\n        this.updateModel(newValue, originalEvent);\n        isFocus && this.hide(true);\n    }\n\n    onOptionGroupSelect(event) {\n        this.dirty = true;\n        this.onGroupChange.emit(event);\n    }\n\n    onContainerClick(event: MouseEvent) {\n        if (this.disabled || this.loading) {\n            return;\n        }\n\n        if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target)) {\n            if (this.overlayVisible) {\n                this.hide();\n            } else {\n                this.show();\n            }\n\n            this.focusInputViewChild?.nativeElement.focus();\n        }\n    }\n\n    isOptionMatched(processedOption) {\n        return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));\n    }\n\n    isOptionDisabled(option) {\n        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;\n    }\n\n    isValidOption(processedOption) {\n        return !!processedOption && !this.isOptionDisabled(processedOption.option);\n    }\n\n    isValidSelectedOption(processedOption) {\n        return this.isValidOption(processedOption) && this.isSelected(processedOption);\n    }\n\n    isSelected(processedOption) {\n        return this.activeOptionPath().some((p) => p.key === processedOption.key);\n    }\n\n    findOptionPathByValue(value, processedOptions?, level = 0) {\n        processedOptions = processedOptions || (level === 0 && this.processedOptions);\n\n        if (!processedOptions) return null;\n        if (ObjectUtils.isEmpty(value)) return [];\n\n        for (let i = 0; i < processedOptions.length; i++) {\n            const processedOption = processedOptions[i];\n\n            if (ObjectUtils.equals(value, this.getOptionValue(processedOption.option), this.equalityKey())) {\n                return [processedOption];\n            }\n\n            const matchedOptions = this.findOptionPathByValue(value, processedOption.children, level + 1);\n\n            if (matchedOptions) {\n                matchedOptions.unshift(processedOption);\n\n                return matchedOptions;\n            }\n        }\n    }\n\n    findFirstOptionIndex() {\n        return this.visibleOptions().findIndex((processedOption) => this.isValidOption(processedOption));\n    }\n\n    findLastOptionIndex() {\n        return ObjectUtils.findLastIndex(this.visibleOptions(), (processedOption) => this.isValidOption(processedOption));\n    }\n\n    findNextOptionIndex(index) {\n        const matchedOptionIndex =\n            index < this.visibleOptions().length - 1\n                ? this.visibleOptions()\n                      .slice(index + 1)\n                      .findIndex((processedOption) => this.isValidOption(processedOption))\n                : -1;\n\n        return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n    }\n\n    findPrevOptionIndex(index) {\n        const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;\n\n        return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n    }\n\n    findSelectedOptionIndex() {\n        return this.visibleOptions().findIndex((processedOption) => this.isValidSelectedOption(processedOption));\n    }\n\n    findFirstFocusedOptionIndex() {\n        const selectedIndex = this.findSelectedOptionIndex();\n\n        return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n    }\n\n    findLastFocusedOptionIndex() {\n        const selectedIndex = this.findSelectedOptionIndex();\n\n        return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n    }\n\n    searchOptions(event, char) {\n        this.searchValue = (this.searchValue || '') + char;\n\n        let optionIndex = -1;\n        let matched = false;\n        const focusedOptionInfo = this.focusedOptionInfo();\n\n        if (focusedOptionInfo.index !== -1) {\n            optionIndex = this.visibleOptions()\n                .slice(focusedOptionInfo.index)\n                .findIndex((processedOption) => this.isOptionMatched(processedOption));\n            optionIndex =\n                optionIndex === -1\n                    ? this.visibleOptions()\n                          .slice(0, focusedOptionInfo.index)\n                          .findIndex((processedOption) => this.isOptionMatched(processedOption))\n                    : optionIndex + focusedOptionInfo.index;\n        } else {\n            optionIndex = this.visibleOptions().findIndex((processedOption) => this.isOptionMatched(processedOption));\n        }\n\n        if (optionIndex !== -1) {\n            matched = true;\n        }\n\n        if (optionIndex === -1 && focusedOptionInfo.index === -1) {\n            optionIndex = this.findFirstFocusedOptionIndex();\n        }\n\n        if (optionIndex !== -1) {\n            this.changeFocusedOptionIndex(event, optionIndex);\n        }\n\n        if (this.searchTimeout) {\n            clearTimeout(this.searchTimeout);\n        }\n\n        this.searchTimeout = setTimeout(() => {\n            this.searchValue = '';\n            this.searchTimeout = null;\n        }, 500);\n\n        return matched;\n    }\n\n    hide(event?, isFocus = false) {\n        const _hide = () => {\n            this.overlayVisible = false;\n            this.activeOptionPath.set([]);\n            this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });\n\n            isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);\n            this.onHide.emit(event);\n        };\n\n        setTimeout(() => {\n            _hide();\n        }, 0); // For ScreenReaders\n    }\n\n    show(event?, isFocus = false) {\n        this.onShow.emit(event);\n        this.overlayVisible = true;\n        const activeOptionPath = this.hasSelectedOption() ? this.findOptionPathByValue(this.modelValue()) : this.activeOptionPath();\n        this.activeOptionPath.set(activeOptionPath);\n\n        let focusedOptionInfo;\n\n        if (this.hasSelectedOption() && ObjectUtils.isNotEmpty(this.activeOptionPath())) {\n            const processedOption = this.activeOptionPath()[this.activeOptionPath().length - 1];\n\n            focusedOptionInfo = { index: this.autoOptionFocus ? processedOption.index : -1, level: processedOption.level, parentKey: processedOption.parentKey };\n        } else {\n            focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };\n        }\n\n        this.focusedOptionInfo.set(focusedOptionInfo);\n\n        isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);\n    }\n\n    clear(event?: MouseEvent) {\n        if (ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear) {\n            this.updateModel(null);\n            this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });\n            this.activeOptionPath.set([]);\n            this.onClear.emit();\n        }\n\n        event && event.stopPropagation();\n    }\n\n    getOptionLabel(option) {\n        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;\n    }\n\n    getOptionValue(option) {\n        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;\n    }\n\n    getOptionGroupLabel(optionGroup) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null;\n    }\n\n    getOptionGroupChildren(optionGroup, level) {\n        return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[level]);\n    }\n\n    isOptionGroup(option, level) {\n        return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);\n    }\n\n    isProccessedOptionGroup(processedOption) {\n        return ObjectUtils.isNotEmpty(processedOption.children);\n    }\n\n    getProccessedOptionLabel(processedOption) {\n        const grouped = this.isProccessedOptionGroup(processedOption);\n\n        return grouped ? this.getOptionGroupLabel(processedOption.option) : this.getOptionLabel(processedOption.option);\n    }\n\n    constructor(\n        private el: ElementRef,\n        private cd: ChangeDetectorRef,\n        private config: PrimeNGConfig,\n        public overlayService: OverlayService\n    ) {\n        effect(() => {\n            const activeOptionPath = this.activeOptionPath();\n            if (ObjectUtils.isNotEmpty(activeOptionPath)) {\n