primeng/fesm2022/primeng-cascadeselect.mjs.map

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

{"version":3,"file":"primeng-cascadeselect.mjs","sources":["../../src/cascadeselect/style/cascadeselectstyle.ts","../../src/cascadeselect/cascadeselect.ts","../../src/cascadeselect/primeng-cascadeselect.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/cascadeselect';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n    ${style}\n\n    /* For PrimeNG */\n    .p-cascadeselect.ng-invalid.ng-dirty:not(.ng-untouched):not(.ng-pristine) {\n        border-color: dt('cascadeselect.invalid.border.color');\n    }\n\n    .p-cascadeselect.ng-invalid.ng-dirty:not(.ng-untouched):not(.ng-pristine) .p-cascadeselect-label.p-placeholder {\n        color: dt('cascadeselect.invalid.placeholder.color');\n    }\n`;\nconst inlineStyles = {\n    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-cascadeselect p-component p-inputwrapper',\n        {\n            'p-cascadeselect p-component p-inputwrapper': true,\n            'p-cascadeselect-clearable': instance.showClear && !instance.$disabled(),\n            'p-cascadeselect-mobile': instance.queryMatches(),\n            'p-disabled': instance.$disabled(),\n            'p-invalid': instance.invalid(),\n            'p-focus': instance.focused,\n            'p-inputwrapper-filled': instance.modelValue(),\n            'p-variant-filled': instance.$variant() === 'filled',\n            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,\n            'p-cascadeselect-open': instance.overlayVisible,\n            'p-cascadeselect-fluid': instance.hasFluid,\n            'p-cascadeselect-sm p-inputfield-sm': instance.size() === 'small',\n            'p-cascadeselect-lg p-inputfield-lg': instance.size() === 'large'\n        }\n    ],\n    label: ({ instance }) => [\n        'p-cascadeselect-label',\n        {\n            'p-placeholder': instance.label() === instance.placeholder,\n            'p-cascadeselect-label-empty': !instance.value && (instance.label() === 'p-emptylabel' || instance.label().length === 0)\n        }\n    ],\n    clearIcon: 'p-cascadeselect-clear-icon',\n    dropdown: 'p-cascadeselect-dropdown',\n    loadingIcon: 'p-cascadeselect-loading-icon',\n    dropdownIcon: 'p-cascadeselect-dropdown-icon',\n    overlay: ({ instance }) => [\n        'p-cascadeselect-overlay p-component-overlay p-component',\n        {\n            'p-cascadeselect-mobile-active': instance.queryMatches()\n        }\n    ],\n    listContainer: 'p-cascadeselect-list-container',\n    list: 'p-cascadeselect-list',\n    option: ({ instance, processedOption }) => [\n        'p-cascadeselect-option',\n        {\n            'p-cascadeselect-option-group': instance.isOptionGroup(processedOption),\n            'p-cascadeselect-option-active': instance.isOptionActive(processedOption),\n            'p-cascadeselect-option-selected': instance.isOptionSelected(processedOption),\n            'p-focus': instance.isOptionFocused(processedOption),\n            'p-disabled': instance.isOptionDisabled(processedOption)\n        }\n    ],\n    optionContent: 'p-cascadeselect-option-content',\n    optionText: 'p-cascadeselect-option-text',\n    groupIcon: 'p-cascadeselect-group-icon',\n    optionList: 'p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list'\n};\n\n@Injectable()\nexport class CascadeSelectStyle extends BaseStyle {\n    name = 'cascadeselect';\n\n    theme = theme;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * CascadeSelect is a form component to select a value from a nested structure of options.\n *\n * [Live Demo](https://www.primeng.org/cascadeselect/)\n *\n * @module cascadeselectstyle\n *\n */\nexport enum CascadeSelectClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-cascadeselect',\n    /**\n     * Class name of the label element\n     */\n    label = 'p-cascadeselect-label',\n    /**\n     * Class name of the dropdown element\n     */\n    dropdown = 'p-cascadeselect-dropdown',\n    /**\n     * Class name of the loading icon element\n     */\n    loadingIcon = 'p-cascadeselect-loading-icon',\n    /**\n     * Class name of the dropdown icon element\n     */\n    clearIcon = 'p-cascadeselect-clear-icon',\n    /**\n     * Class name of the dropdown icon element\n     */\n    dropdownIcon = 'p-cascadeselect-dropdown-icon',\n    /**\n     * Class name of the overlay element\n     */\n    overlay = 'p-cascadeselect-overlay',\n    /**\n     * Class name of the list container element\n     */\n    listContainer = 'p-cascadeselect-list-container',\n    /**\n     * Class name of the list element\n     */\n    list = 'p-cascadeselect-list',\n    /**\n     * Class name of the item element\n     */\n    item = 'p-cascadeselect-item',\n    /**\n     * Class name of the item content element\n     */\n    itemContent = 'p-cascadeselect-item-content',\n    /**\n     * Class name of the item text element\n     */\n    itemText = 'p-cascadeselect-item-text',\n    /**\n     * Class name of the group icon element\n     */\n    groupIcon = 'p-cascadeselect-group-icon',\n    /**\n     * Class name of the item list element\n     */\n    itemList = 'p-cascadeselect-item-list'\n}\n\nexport interface CascadeSelectStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ContentChild,\n    ContentChildren,\n    effect,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    inject,\n    input,\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 { calculateScrollbarWidth, equals, findLastIndex, findSingle, focus, getHiddenElementOuterWidth, getOffset, getOuterWidth, getViewport, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData, uuid } from '@primeuix/utils';\nimport { OverlayOptions, OverlayService, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { BaseEditableHolder } from 'primeng/baseeditableholder';\nimport { Fluid } from 'primeng/fluid';\nimport { AngleRightIcon, ChevronDownIcon, TimesIcon } from 'primeng/icons';\nimport { Overlay } from 'primeng/overlay';\nimport { Ripple } from 'primeng/ripple';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { CascadeSelectBeforeHideEvent, CascadeSelectBeforeShowEvent, CascadeSelectChangeEvent, CascadeSelectHideEvent, CascadeSelectShowEvent } from './cascadeselect.interface';\nimport { CascadeSelectStyle } from './style/cascadeselectstyle';\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, p-cascadeselect-sub',\n    standalone: true,\n    imports: [CommonModule, Ripple, AngleRightIcon, SharedModule],\n    template: `\n        <ul [class]=\"cx('list')\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\n            <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n                <li\n                    [class]=\"cx('option', { 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\n                        [class]=\"cx('optionContent')\"\n                        (click)=\"onOptionClick($event, processedOption)\"\n                        (mouseenter)=\"onOptionMouseEnter($event, processedOption)\"\n                        (mousemove)=\"onOptionMouseMove($event, processedOption)\"\n                        pRipple\n                        [attr.data-pc-section]=\"'content'\"\n                    >\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]=\"cx('optionText')\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\n                        </ng-template>\n                        <span [class]=\"cx('groupIcon')\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                            <svg data-p-icon=\"angle-right\" *ngIf=\"!groupicon\" />\n                            <ng-template *ngTemplateOutlet=\"groupicon\"></ng-template>\n                        </span>\n                    </div>\n                    <p-cascadeselect-sub\n                        *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                        [role]=\"'group'\"\n                        [class]=\"cx('optionList')\"\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)=\"onChange.emit($event)\"\n                        (onFocusChange)=\"onFocusChange.emit($event)\"\n                        (onFocusEnterChange)=\"onFocusEnterChange.emit($event)\"\n                        [optionGroupLabel]=\"optionGroupLabel\"\n                        [optionGroupChildren]=\"optionGroupChildren\"\n                        [dirty]=\"dirty\"\n                        [optionTemplate]=\"optionTemplate\"\n                    >\n                    </p-cascadeselect-sub>\n                </li>\n            </ng-template>\n        </ul>\n    `,\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [CascadeSelectStyle]\n})\nexport class CascadeSelectSub extends BaseComponent 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: any[] | string[] | string | undefined | null;\n\n    @Input() optionGroupChildren: string[] | string | undefined | null;\n\n    @Input() optionTemplate: Nullable<TemplateRef<any>>;\n\n    @Input() groupicon: 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    @Output() onFocusChange: EventEmitter<any> = new EventEmitter();\n\n    @Output() onFocusEnterChange: EventEmitter<any> = new EventEmitter();\n\n    _componentStyle = inject(CascadeSelectStyle);\n\n    get listLabel(): string {\n        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];\n    }\n\n    constructor(public cascadeselect: CascadeSelect) {\n        super();\n    }\n\n    ngOnInit() {\n        super.ngOnInit();\n        if (!this.root) {\n            this.position();\n        }\n    }\n\n    onOptionClick(event, processedOption: any) {\n        this.onChange.emit({\n            originalEvent: event,\n            processedOption,\n            isFocus: true\n        });\n    }\n\n    onOptionMouseEnter(event, processedOption) {\n        this.onFocusEnterChange.emit({ originalEvent: event, processedOption });\n    }\n\n    onOptionMouseMove(event, processedOption) {\n        this.onFocusChange.emit({ originalEvent: event, processedOption });\n    }\n\n    getOptionId(processedOption) {\n        return `${this.selectId}_${processedOption.key}`;\n    }\n\n    getOptionLabel(processedOption) {\n        return this.optionLabel ? resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option;\n    }\n\n    getOptionValue(processedOption) {\n        return this.optionValue ? 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 ? resolveFieldData(processedOption.option, this.optionDisabled) : false;\n    }\n\n    getOptionGroupLabel(processedOption) {\n        return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null;\n    }\n\n    getOptionGroupChildren(processedOption) {\n        return processedOption.children;\n    }\n\n    isOptionGroup(processedOption) {\n        return isNotEmpty(processedOption.children);\n    }\n\n    isOptionSelected(processedOption) {\n        return equals(this.cascadeselect?.modelValue(), processedOption?.option);\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    position() {\n        const parentItem = this.el.nativeElement.parentElement;\n        const containerOffset = <any>getOffset(parentItem);\n        const viewport = <any>getViewport();\n        const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : getHiddenElementOuterWidth(this.el.nativeElement.children[0]);\n        const itemOuterWidth = <any>getOuterWidth(parentItem.children[0]);\n        if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - 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, p-cascadeselect, p-cascade-select',\n    standalone: true,\n    imports: [CommonModule, Overlay, AutoFocus, CascadeSelectSub, ChevronDownIcon, TimesIcon, SharedModule],\n    template: `\n        <div class=\"p-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n            <input\n                #focusInput\n                readonly\n                type=\"text\"\n                role=\"combobox\"\n                [attr.name]=\"name()\"\n                [attr.required]=\"required() ? '' : undefined\"\n                [attr.disabled]=\"$disabled() ? '' : undefined\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.tabindex]=\"!$disabled() ? tabindex : -1\"\n                [attr.id]=\"inputId\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.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]=\"autofocus\"\n            />\n        </div>\n        <span [class]=\"cx('label')\" [attr.data-pc-section]=\"'label'\">\n            <ng-container *ngIf=\"valueTemplate || _valueTemplate; else defaultValueTemplate\">\n                <ng-container *ngTemplateOutlet=\"valueTemplate || _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            <svg data-p-icon=\"times\" *ngIf=\"!clearIconTemplate && !_clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate || _clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate || _clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div [class]=\"cx('dropdown')\" 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 || _loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate || _loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate && !_loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [class]=\"cn(cx('loadingIcon'), loadingIcon + 'pi-spin')\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"cn(cx('loadingIcon'), loadingIcon + ' pi pi-spinner pi-spin')\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <svg data-p-icon=\"chevron-down\" *ngIf=\"!triggerIconTemplate && !_triggerIconTemplate\" [class]=\"cx('dropdownIcon')\" />\n                <span *ngIf=\"triggerIconTemplate || _triggerIconTemplate\" [class]=\"cx('dropdownIcon')\">\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate || _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            [hostAttrSelector]=\"attrSelector\"\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"$appendTo()\"\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 #content>\n                <div #panel [class]=\"cn(cx('overlay'), panelStyleClass)\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                    <ng-template *ngTemplateOutlet=\"headerTemplate || _headerTemplate\"></ng-template>\n                    <div [class]=\"cx('listContainer')\" [attr.data-pc-section]=\"'wrapper'\">\n                        <p-cascadeselect-sub\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 || _optionTemplate\"\n                            [groupicon]=\"groupIconTemplate || groupIconTemplate\"\n                            [optionGroupLabel]=\"optionGroupLabel\"\n                            [optionGroupChildren]=\"optionGroupChildren\"\n                            [optionDisabled]=\"optionDisabled\"\n                            [root]=\"true\"\n                            (onChange)=\"onOptionClick($event)\"\n                            (onFocusChange)=\"onOptionMouseMove($event)\"\n                            (onFocusEnterChange)=\"onOptionMouseEnter($event)\"\n                            [dirty]=\"dirty\"\n                            [role]=\"'tree'\"\n                        >\n                        </p-cascadeselect-sub>\n                    </div>\n                    <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n                        {{ selectedMessageText }}\n                    </span>\n                    <ng-template *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-template>\n                </div>\n            </ng-template>\n        </p-overlay>\n    `,\n    providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[style]': \"sx('root')\",\n        '[attr.data-pc-name]': \"'cascadeselect'\",\n        '[attr.data-pc-section]': \"'root'\"\n    }\n})\nexport class CascadeSelect extends BaseEditableHolder implements OnInit, AfterContentInit {\n    /**\n     * Unique identifier of the component\n     * @group Props\n     */\n    @Input() id: string | undefined;\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     * Fields used when filtering the options, defaults to optionLabel.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusOnHover: boolean = true;\n    /**\n     * Determines if the option will be selected on focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false;\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 = false;\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | 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 | 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 | null;\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     * 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     * 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     * The breakpoint to define the maximum width boundary.\n     * @group Props\n     */\n    @Input() breakpoint: string = '960px';\n    /**\n     * Specifies the size of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    size = input<'large' | 'small' | undefined>();\n    /**\n     * Specifies the input variant of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    variant = input<'filled' | 'outlined' | undefined>();\n    /**\n     * Spans 100% width of the container when enabled.\n     * @defaultValue undefined\n     * @group Props\n     */\n    fluid = input(undefined, { transform: booleanAttribute });\n    /**\n     * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n     * @defaultValue 'self'\n     * @group Props\n     */\n    appendTo = input<HTMLElement | ElementRef | TemplateRef<any> | 'self' | 'body' | null | undefined | any>(undefined);\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('panel') panelViewChild: Nullable<ElementRef>;\n\n    @ViewChild('overlay') overlayViewChild: Nullable<Overlay>;\n    /**\n     * Content template for displaying the selected value.\n     * @group Templates\n     */\n    @ContentChild('value', { descendants: false }) valueTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the option display.\n     * @group Templates\n     */\n    @ContentChild('option', { descendants: false }) optionTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the header.\n     * @group Templates\n     */\n    @ContentChild('header', { descendants: false }) headerTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the footer.\n     * @group Templates\n     */\n    @ContentChild('footer', { descendants: false }) footerTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the trigger icon.\n     * @group Templates\n     */\n    @ContentChild('triggericon', { descendants: false }) triggerIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the loading icon.\n     * @group Templates\n     */\n    @ContentChild('loadingicon', { descendants: false }) loadingIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the group icon.\n     * @group Templates\n     */\n    @ContentChild('optiongroupicon', { descendants: false }) groupIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Content template for customizing the clear icon.\n     * @group Templates\n     */\n    @ContentChild('clearicon', { descendants: false }) clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    _valueTemplate: TemplateRef<any> | undefined;\n\n    _optionTemplate: TemplateRef<any> | undefined;\n\n    _headerTemplate: TemplateRef<any> | undefined;\n\n    _footerTemplate: TemplateRef<any> | undefined;\n\n    _triggerIconTemplate: TemplateRef<any> | undefined;\n\n    _loadingIconTemplate: TemplateRef<any> | undefined;\n\n    _groupIconTemplate: TemplateRef<any> | undefined;\n\n    _clearIconTemplate: TemplateRef<any> | undefined;\n\n    selectionPath: any = null;\n\n    focused: boolean = false;\n\n    overlayVisible: boolean = false;\n\n    clicked: boolean = false;\n\n    dirty: boolean = false;\n\n    searchValue: string | undefined;\n\n    searchTimeout: any;\n\n    focusedOptionInfo = signal<any>({ index: -1, level: 0, parentKey: '' });\n\n    activeOptionPath = signal<any>([]);\n\n    processedOptions: string[] | string | undefined = [];\n\n    _componentStyle = inject(CascadeSelectStyle);\n\n    initialized: boolean = false;\n\n    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());\n\n    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());\n\n    pcFluid: Fluid = inject(Fluid, { optional: true, host: true, skipSelf: true });\n\n    get hasFluid() {\n        return this.fluid() ?? !!this.pcFluid;\n    }\n\n    @HostListener('click', ['$event'])\n    onHostClick(event: MouseEvent) {\n        this.onContainerClick(event);\n    }\n\n    get focusedOptionId() {\n        return this.focusedOptionInfo().index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null;\n    }\n\n    get searchResultMessageText() {\n        return 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 = 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 = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;\n\n            return processedOption ? this.getOptionLabel(processedOption.option) : label;\n        }\n        return label;\n    }\n\n    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'value':\n                    this._valueTemplate = item.template;\n                    break;\n\n                case 'option':\n                    this._optionTemplate = item.template;\n                    break;\n\n                case 'triggericon':\n                    this._triggerIconTemplate = item.template;\n                    break;\n\n                case 'loadingicon':\n                    this._loadingIconTemplate = item.template;\n                    break;\n\n                case 'clearicon':\n                    this._clearIconTemplate = item.template;\n                    break;\n\n                case 'optiongroupicon':\n                    this._groupIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        super.ngOnChanges(changes);\n        if (changes.options) {\n            this.processedOptions = this.createProcessedOptions(changes.options.currentValue || []);\n            this.updateModel(null);\n        }\n    }\n\n    hasSelectedOption() {\n        return 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 && isPrintableCharacter(event.key)) {\n                    !this.overlayVisible && this.show();\n                    this.searchOptions(event, event.key);\n                }\n\n                break;\n        }\n\n        this.clicked = false;\n    }\n\n    onArrowDownKey(event) {\n        if (!this.overlayVisible) {\n            this.show();\n        } else {\n            const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo().index) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();\n\n            this.changeFocusedOptionIndex(event, optionIndex, true);\n        }\n\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, 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.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();\n\n            this.changeFocusedOptionIndex(event, optionIndex, true);\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 = 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, 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.focusedOptionInfo.set({ ...this.focusedOptionInfo(), index: -1 }); // reset\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.onOptionClick({ originalEvent: event, 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(event, 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, processedOption });\n        }\n\n        this.overlayVisible && this.hide();\n    }\n\n    onBackspaceKey(event) {\n        if (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.writeModelValue(value);\n\n        if (this.initialized) {\n            this.onChange.emit({\n                originalEvent: event,\n                value: value\n            });\n        }\n    }\n\n    autoUpdateModel() {\n        if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {\n            this.focusedOptionInfo().index = this.findFirstFocusedOptionIndex();\n            this.onOptionChange({\n                originalEvent: null,\n                processedOption: this.visibleOptions()[this.focusedOptionInfo().index],\n                isHide: false\n            });\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 = 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, preventSelection?: boolean) {\n        const focusedOptionInfo = this.focusedOptionInfo();\n\n        if (focusedOptionInfo.index !== index) {\n            this.focusedOptionInfo.set({ ...focusedOptionInfo, index });\n            this.scrollInView();\n\n            if (this.focusOnHover) {\n                this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false, preventSelection });\n            }\n\n            if (this.selectOnFocus) {\n                this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false });\n            }\n        }\n    }\n    matchMediaListener: VoidListener;\n\n    onOptionSelect(event) {\n        const { originalEvent, value, isHide } = event;\n        const newValue = this.getOptionValue(value);\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        isHide && this.hide(event, 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        this.clicked = true;\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 ? resolveFieldData(option,