primevue/cascadeselect/index.mjs.map

PrimeVue is an open source UI library for Vue 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 PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/cascadeselect/BaseCascadeSelect.vue","../../src/cascadeselect/CascadeSelectSub.vue","../../src/cascadeselect/CascadeSelectSub.vue?vue&type=template&id=10dc3af7&lang.js","../../src/cascadeselect/CascadeSelect.vue","../../src/cascadeselect/CascadeSelect.vue?vue&type=template&id=36aa8232&lang.js"],"sourcesContent":["<script>\nimport BaseInput from '@primevue/core/baseinput';\nimport CascadeSelectStyle from 'primevue/cascadeselect/style';\n\nexport default {\n    name: 'BaseCascadeSelect',\n    extends: BaseInput,\n    props: {\n        options: Array,\n        optionLabel: null,\n        optionValue: null,\n        optionDisabled: null,\n        optionGroupLabel: null,\n        optionGroupChildren: null,\n        placeholder: String,\n        breakpoint: {\n            type: String,\n            default: '960px'\n        },\n        dataKey: null,\n        showClear: {\n            type: Boolean,\n            default: false\n        },\n        clearIcon: {\n            type: String,\n            default: undefined\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        inputProps: {\n            type: null,\n            default: null\n        },\n        panelClass: {\n            type: [String, Object],\n            default: null\n        },\n        panelStyle: {\n            type: Object,\n            default: null\n        },\n        panelProps: {\n            type: null,\n            default: null\n        },\n        overlayClass: {\n            type: [String, Object],\n            default: null\n        },\n        overlayStyle: {\n            type: Object,\n            default: null\n        },\n        overlayProps: {\n            type: null,\n            default: null\n        },\n        appendTo: {\n            type: [String, Object],\n            default: 'body'\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        dropdownIcon: {\n            type: String,\n            default: undefined\n        },\n        loadingIcon: {\n            type: String,\n            default: undefined\n        },\n        optionGroupIcon: {\n            type: String,\n            default: undefined\n        },\n        autoOptionFocus: {\n            type: Boolean,\n            default: false\n        },\n        selectOnFocus: {\n            type: Boolean,\n            default: false\n        },\n        focusOnHover: {\n            type: Boolean,\n            default: true\n        },\n        searchLocale: {\n            type: String,\n            default: undefined\n        },\n        searchMessage: {\n            type: String,\n            default: null\n        },\n        selectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySelectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySearchMessage: {\n            type: String,\n            default: null\n        },\n        emptyMessage: {\n            type: String,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: CascadeSelectStyle,\n    provide() {\n        return {\n            $pcCascadeSelect: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <ul :ref=\"containerRef\" :class=\"cx('list')\" v-bind=\"level === 0 ? ptm('list') : ptm('optionList')\">\n        <template v-for=\"(processedOption, index) of options\" :key=\"getOptionLabelToRender(processedOption)\">\n            <li\n                :id=\"getOptionId(processedOption)\"\n                :class=\"cx('option', { processedOption })\"\n                role=\"treeitem\"\n                :aria-label=\"getOptionLabelToRender(processedOption)\"\n                :aria-selected=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n                :aria-expanded=\"isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"options.length\"\n                :aria-posinset=\"index + 1\"\n                v-bind=\"getPTOptions(processedOption, index, 'option')\"\n                :data-p-option-group=\"isOptionGroup(processedOption)\"\n                :data-p-active=\"isOptionActive(processedOption)\"\n                :data-p-focus=\"isOptionFocused(processedOption)\"\n                :data-p-disabled=\"isOptionDisabled(processedOption)\"\n            >\n                <div\n                    v-ripple\n                    :class=\"cx('optionContent')\"\n                    @click=\"onOptionClick($event, processedOption)\"\n                    @mouseenter=\"onOptionMouseEnter($event, processedOption)\"\n                    @mousemove=\"onOptionMouseMove($event, processedOption)\"\n                    v-bind=\"getPTOptions(processedOption, index, 'optionContent')\"\n                >\n                    <component v-if=\"templates['option']\" :is=\"templates['option']\" :option=\"processedOption.option\" :selected=\"isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)\" />\n                    <span v-else :class=\"cx('optionText')\" v-bind=\"getPTOptions(processedOption, index, 'optionText')\">{{ getOptionLabelToRender(processedOption) }}</span>\n                    <template v-if=\"isOptionGroup(processedOption)\">\n                        <span :class=\"cx('groupIconContainer')\">\n                            <component v-if=\"templates['optiongroupicon']\" :is=\"templates['optiongroupicon']\" :class=\"cx('groupIcon')\" />\n                            <span v-else-if=\"optionGroupIcon\" :class=\"[cx('groupIcon'), optionGroupIcon]\" aria-hidden=\"true\" v-bind=\"getPTOptions(processedOption, index, 'groupIcon')\" />\n                            <AngleRightIcon v-else :class=\"cx('groupIcon')\" aria-hidden=\"true\" v-bind=\"getPTOptions(processedOption, index, 'groupIcon')\" />\n                        </span>\n                    </template>\n                </div>\n                <CascadeSelectSub\n                    v-if=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                    role=\"group\"\n                    :class=\"cx('optionList')\"\n                    :selectId=\"selectId\"\n                    :focusedOptionId=\"focusedOptionId\"\n                    :options=\"getOptionGroupChildren(processedOption)\"\n                    :activeOptionPath=\"activeOptionPath\"\n                    :level=\"level + 1\"\n                    :templates=\"templates\"\n                    :optionLabel=\"optionLabel\"\n                    :optionValue=\"optionValue\"\n                    :optionDisabled=\"optionDisabled\"\n                    :optionGroupIcon=\"optionGroupIcon\"\n                    :optionGroupLabel=\"optionGroupLabel\"\n                    :optionGroupChildren=\"optionGroupChildren\"\n                    :value=\"value\"\n                    @option-change=\"$emit('option-change', $event)\"\n                    @option-focus-change=\"$emit('option-focus-change', $event)\"\n                    @option-focus-enter-change=\"$emit('option-focus-enter-change', $event)\"\n                    :pt=\"pt\"\n                    :unstyled=\"unstyled\"\n                />\n            </li>\n        </template>\n    </ul>\n</template>\n\n<script>\nimport { equals, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\nexport default {\n    name: 'CascadeSelectSub',\n    hostName: 'CascadeSelect',\n    extends: BaseComponent,\n    emits: ['option-change', 'option-focus-change', 'option-focus-enter-change'],\n    container: null,\n    props: {\n        selectId: String,\n        focusedOptionId: String,\n        options: Array,\n        optionLabel: String,\n        optionValue: String,\n        optionDisabled: null,\n        optionGroupIcon: String,\n        optionGroupLabel: String,\n        optionGroupChildren: {\n            type: [String, Array],\n            default: null\n        },\n        activeOptionPath: Array,\n        level: Number,\n        templates: null,\n        value: null\n    },\n    methods: {\n        getOptionId(processedOption) {\n            return `${this.selectId}_${processedOption.key}`;\n        },\n        getOptionLabel(processedOption) {\n            return this.optionLabel ? resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option;\n        },\n        getOptionValue(processedOption) {\n            return this.optionValue ? resolveFieldData(processedOption.option, this.optionValue) : processedOption.option;\n        },\n        getPTOptions(processedOption, index, key) {\n            return this.ptm(key, {\n                context: {\n                    option: processedOption,\n                    index,\n                    level: this.level,\n                    optionGroup: this.isOptionGroup(processedOption),\n                    active: this.isOptionActive(processedOption),\n                    focused: this.isOptionFocused(processedOption),\n                    disabled: this.isOptionDisabled(processedOption)\n                }\n            });\n        },\n        isOptionDisabled(processedOption) {\n            return this.optionDisabled ? resolveFieldData(processedOption.option, this.optionDisabled) : false;\n        },\n        getOptionGroupLabel(processedOption) {\n            return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null;\n        },\n        getOptionGroupChildren(processedOption) {\n            return processedOption.children;\n        },\n        isOptionGroup(processedOption) {\n            return isNotEmpty(processedOption.children);\n        },\n        isOptionSelected(processedOption) {\n            return equals(this.value, processedOption?.option);\n        },\n        isOptionActive(processedOption) {\n            return this.activeOptionPath && this.activeOptionPath.some((path) => path.key === processedOption.key);\n        },\n        isOptionFocused(processedOption) {\n            return this.focusedOptionId === this.getOptionId(processedOption);\n        },\n        getOptionLabelToRender(processedOption) {\n            return this.isOptionGroup(processedOption) ? this.getOptionGroupLabel(processedOption) : this.getOptionLabel(processedOption);\n        },\n        onOptionClick(event, processedOption) {\n            this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });\n        },\n        onOptionMouseEnter(event, processedOption) {\n            this.$emit('option-focus-enter-change', { originalEvent: event, processedOption });\n        },\n        onOptionMouseMove(event, processedOption) {\n            this.$emit('option-focus-change', { originalEvent: event, processedOption });\n        },\n        containerRef(el) {\n            this.container = el;\n        },\n        listAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon\n    }\n};\n</script>\n","<template>\n    <ul :ref=\"containerRef\" :class=\"cx('list')\" v-bind=\"level === 0 ? ptm('list') : ptm('optionList')\">\n        <template v-for=\"(processedOption, index) of options\" :key=\"getOptionLabelToRender(processedOption)\">\n            <li\n                :id=\"getOptionId(processedOption)\"\n                :class=\"cx('option', { processedOption })\"\n                role=\"treeitem\"\n                :aria-label=\"getOptionLabelToRender(processedOption)\"\n                :aria-selected=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n                :aria-expanded=\"isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"options.length\"\n                :aria-posinset=\"index + 1\"\n                v-bind=\"getPTOptions(processedOption, index, 'option')\"\n                :data-p-option-group=\"isOptionGroup(processedOption)\"\n                :data-p-active=\"isOptionActive(processedOption)\"\n                :data-p-focus=\"isOptionFocused(processedOption)\"\n                :data-p-disabled=\"isOptionDisabled(processedOption)\"\n            >\n                <div\n                    v-ripple\n                    :class=\"cx('optionContent')\"\n                    @click=\"onOptionClick($event, processedOption)\"\n                    @mouseenter=\"onOptionMouseEnter($event, processedOption)\"\n                    @mousemove=\"onOptionMouseMove($event, processedOption)\"\n                    v-bind=\"getPTOptions(processedOption, index, 'optionContent')\"\n                >\n                    <component v-if=\"templates['option']\" :is=\"templates['option']\" :option=\"processedOption.option\" :selected=\"isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)\" />\n                    <span v-else :class=\"cx('optionText')\" v-bind=\"getPTOptions(processedOption, index, 'optionText')\">{{ getOptionLabelToRender(processedOption) }}</span>\n                    <template v-if=\"isOptionGroup(processedOption)\">\n                        <span :class=\"cx('groupIconContainer')\">\n                            <component v-if=\"templates['optiongroupicon']\" :is=\"templates['optiongroupicon']\" :class=\"cx('groupIcon')\" />\n                            <span v-else-if=\"optionGroupIcon\" :class=\"[cx('groupIcon'), optionGroupIcon]\" aria-hidden=\"true\" v-bind=\"getPTOptions(processedOption, index, 'groupIcon')\" />\n                            <AngleRightIcon v-else :class=\"cx('groupIcon')\" aria-hidden=\"true\" v-bind=\"getPTOptions(processedOption, index, 'groupIcon')\" />\n                        </span>\n                    </template>\n                </div>\n                <CascadeSelectSub\n                    v-if=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                    role=\"group\"\n                    :class=\"cx('optionList')\"\n                    :selectId=\"selectId\"\n                    :focusedOptionId=\"focusedOptionId\"\n                    :options=\"getOptionGroupChildren(processedOption)\"\n                    :activeOptionPath=\"activeOptionPath\"\n                    :level=\"level + 1\"\n                    :templates=\"templates\"\n                    :optionLabel=\"optionLabel\"\n                    :optionValue=\"optionValue\"\n                    :optionDisabled=\"optionDisabled\"\n                    :optionGroupIcon=\"optionGroupIcon\"\n                    :optionGroupLabel=\"optionGroupLabel\"\n                    :optionGroupChildren=\"optionGroupChildren\"\n                    :value=\"value\"\n                    @option-change=\"$emit('option-change', $event)\"\n                    @option-focus-change=\"$emit('option-focus-change', $event)\"\n                    @option-focus-enter-change=\"$emit('option-focus-enter-change', $event)\"\n                    :pt=\"pt\"\n                    :unstyled=\"unstyled\"\n                />\n            </li>\n        </template>\n    </ul>\n</template>\n\n<script>\nimport { equals, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\nexport default {\n    name: 'CascadeSelectSub',\n    hostName: 'CascadeSelect',\n    extends: BaseComponent,\n    emits: ['option-change', 'option-focus-change', 'option-focus-enter-change'],\n    container: null,\n    props: {\n        selectId: String,\n        focusedOptionId: String,\n        options: Array,\n        optionLabel: String,\n        optionValue: String,\n        optionDisabled: null,\n        optionGroupIcon: String,\n        optionGroupLabel: String,\n        optionGroupChildren: {\n            type: [String, Array],\n            default: null\n        },\n        activeOptionPath: Array,\n        level: Number,\n        templates: null,\n        value: null\n    },\n    methods: {\n        getOptionId(processedOption) {\n            return `${this.selectId}_${processedOption.key}`;\n        },\n        getOptionLabel(processedOption) {\n            return this.optionLabel ? resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option;\n        },\n        getOptionValue(processedOption) {\n            return this.optionValue ? resolveFieldData(processedOption.option, this.optionValue) : processedOption.option;\n        },\n        getPTOptions(processedOption, index, key) {\n            return this.ptm(key, {\n                context: {\n                    option: processedOption,\n                    index,\n                    level: this.level,\n                    optionGroup: this.isOptionGroup(processedOption),\n                    active: this.isOptionActive(processedOption),\n                    focused: this.isOptionFocused(processedOption),\n                    disabled: this.isOptionDisabled(processedOption)\n                }\n            });\n        },\n        isOptionDisabled(processedOption) {\n            return this.optionDisabled ? resolveFieldData(processedOption.option, this.optionDisabled) : false;\n        },\n        getOptionGroupLabel(processedOption) {\n            return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null;\n        },\n        getOptionGroupChildren(processedOption) {\n            return processedOption.children;\n        },\n        isOptionGroup(processedOption) {\n            return isNotEmpty(processedOption.children);\n        },\n        isOptionSelected(processedOption) {\n            return equals(this.value, processedOption?.option);\n        },\n        isOptionActive(processedOption) {\n            return this.activeOptionPath && this.activeOptionPath.some((path) => path.key === processedOption.key);\n        },\n        isOptionFocused(processedOption) {\n            return this.focusedOptionId === this.getOptionId(processedOption);\n        },\n        getOptionLabelToRender(processedOption) {\n            return this.isOptionGroup(processedOption) ? this.getOptionGroupLabel(processedOption) : this.getOptionLabel(processedOption);\n        },\n        onOptionClick(event, processedOption) {\n            this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });\n        },\n        onOptionMouseEnter(event, processedOption) {\n            this.$emit('option-focus-enter-change', { originalEvent: event, processedOption });\n        },\n        onOptionMouseMove(event, processedOption) {\n            this.$emit('option-focus-change', { originalEvent: event, processedOption });\n        },\n        containerRef(el) {\n            this.container = el;\n        },\n        listAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon\n    }\n};\n</script>\n","<template>\n    <div ref=\"container\" :class=\"cx('root')\" :style=\"sx('root')\" @click=\"onContainerClick($event)\" v-bind=\"ptmi('root')\">\n        <div class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenInputContainer')\" :data-p-hidden-accessible=\"true\">\n            <input\n                ref=\"focusInput\"\n                :id=\"inputId\"\n                type=\"text\"\n                :class=\"inputClass\"\n                :style=\"inputStyle\"\n                readonly\n                :disabled=\"disabled\"\n                :placeholder=\"placeholder\"\n                :tabindex=\"!disabled ? tabindex : -1\"\n                role=\"combobox\"\n                :aria-label=\"ariaLabel\"\n                :aria-labelledby=\"ariaLabelledby\"\n                aria-haspopup=\"tree\"\n                :aria-expanded=\"overlayVisible\"\n                :aria-controls=\"$id + '_tree'\"\n                :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n                :aria-invalid=\"invalid || undefined\"\n                @focus=\"onFocus\"\n                @blur=\"onBlur\"\n                @keydown=\"onKeyDown\"\n                v-bind=\"{ ...inputProps, ...ptm('hiddenInput') }\"\n            />\n        </div>\n        <span :class=\"cx('label')\" v-bind=\"ptm('label')\">\n            <slot name=\"value\" :value=\"d_value\" :placeholder=\"placeholder\">\n                {{ label }}\n            </slot>\n        </span>\n        <slot v-if=\"isClearIconVisible\" name=\"clearicon\" :class=\"cx('clearIcon')\" :clearCallback=\"onClearClick\">\n            <component :is=\"clearIcon ? 'i' : 'TimesIcon'\" ref=\"clearIcon\" :class=\"[cx('clearIcon'), clearIcon]\" @click=\"onClearClick\" v-bind=\"ptm('clearIcon')\" data-pc-section=\"clearicon\" />\n        </slot>\n        <div :class=\"cx('dropdown')\" role=\"button\" tabindex=\"-1\" v-bind=\"ptm('dropdown')\">\n            <slot v-if=\"loading\" name=\"loadingicon\" :class=\"cx('loadingIcon')\">\n                <span v-if=\"loadingIcon\" :class=\"[cx('loadingIcon'), 'pi-spin', loadingIcon]\" aria-hidden=\"true\" v-bind=\"ptm('loadingIcon')\" />\n                <SpinnerIcon v-else :class=\"cx('loadingIcon')\" spin aria-hidden=\"true\" v-bind=\"ptm('loadingIcon')\" />\n            </slot>\n            <slot v-else name=\"dropdownicon\" :class=\"cx('dropdownIcon')\">\n                <component :is=\"dropdownIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[cx('dropdownIcon'), dropdownIcon]\" aria-hidden=\"true\" v-bind=\"ptm('dropdownIcon')\" />\n            </slot>\n        </div>\n        <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSearchResult')\" :data-p-hidden-accessible=\"true\">\n            {{ searchResultMessageText }}\n        </span>\n        <Portal :appendTo=\"appendTo\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter\" @after-enter=\"onOverlayAfterEnter\" @leave=\"onOverlayLeave\" @after-leave=\"onOverlayAfterLeave\" v-bind=\"ptm('transition')\">\n                <div\n                    v-if=\"overlayVisible\"\n                    :ref=\"overlayRef\"\n                    :class=\"[cx('overlay'), panelClass, overlayClass]\"\n                    :style=\"[panelStyle, overlayStyle]\"\n                    @click=\"onOverlayClick\"\n                    @keydown=\"onOverlayKeyDown\"\n                    v-bind=\"{ ...panelProps, ...overlayProps, ...ptm('overlay') }\"\n                >\n                    <slot name=\"header\" :value=\"d_value\" :options=\"options\" />\n                    <div :class=\"cx('listContainer')\" v-bind=\"ptm('listContainer')\">\n                        <CascadeSelectSub\n                            :id=\"$id + '_tree'\"\n                            role=\"tree\"\n                            aria-orientation=\"horizontal\"\n                            :selectId=\"$id\"\n                            :focusedOptionId=\"focused ? focusedOptionId : undefined\"\n                            :options=\"processedOptions\"\n                            :activeOptionPath=\"activeOptionPath\"\n                            :level=\"0\"\n                            :templates=\"$slots\"\n                            :optionLabel=\"optionLabel\"\n                            :optionValue=\"optionValue\"\n                            :optionDisabled=\"optionDisabled\"\n                            :optionGroupIcon=\"optionGroupIcon\"\n                            :optionGroupLabel=\"optionGroupLabel\"\n                            :optionGroupChildren=\"optionGroupChildren\"\n                            :value=\"d_value\"\n                            @option-change=\"onOptionClick\"\n                            @option-focus-change=\"onOptionMouseMove\"\n                            @option-focus-enter-change=\"onOptionMouseEnter\"\n                            :pt=\"pt\"\n                            :unstyled=\"unstyled\"\n                        />\n                    </div>\n                    <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSelectedMessage')\" :data-p-hidden-accessible=\"true\">\n                        {{ selectedMessageText }}\n                    </span>\n                    <slot name=\"footer\" :value=\"d_value\" :options=\"options\" />\n                </div>\n            </transition>\n        </Portal>\n    </div>\n</template>\n\n<script>\nimport { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';\nimport { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, isString, resolveFieldData } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport TimesIcon from '@primevue/icons/times';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport BaseCascadeSelect from './BaseCascadeSelect.vue';\nimport CascadeSelectSub from './CascadeSelectSub.vue';\n\nexport default {\n    name: 'CascadeSelect',\n    extends: BaseCascadeSelect,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],\n    outsideClickListener: null,\n    matchMediaListener: null,\n    scrollHandler: null,\n    resizeListener: null,\n    overlay: null,\n    searchTimeout: null,\n    searchValue: null,\n    data() {\n        return {\n            clicked: false,\n            focused: false,\n            focusedOptionInfo: { index: -1, level: 0, parentKey: '' },\n            activeOptionPath: [],\n            overlayVisible: false,\n            dirty: false,\n            mobileActive: false,\n            query: null,\n            queryMatches: false\n        };\n    },\n    watch: {\n        options() {\n            this.autoUpdateModel();\n        }\n    },\n    mounted() {\n        this.autoUpdateModel();\n        this.bindMatchMediaListener();\n    },\n    beforeUnmount() {\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n        this.unbindMatchMediaListener();\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        if (this.overlay) {\n            ZIndex.clear(this.overlay);\n            this.overlay = null;\n        }\n\n        if (this.mobileActive) {\n            this.mobileActive = false;\n        }\n    },\n    methods: {\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        getOptionGroupLabel(optionGroup) {\n            return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : null;\n        },\n        getOptionGroupChildren(optionGroup, level) {\n            return isString(this.optionGroupChildren) ? resolveFieldData(optionGroup, this.optionGroupChildren) : resolveFieldData(optionGroup, this.optionGroupChildren[level]);\n        },\n        isOptionGroup(option, level) {\n            return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);\n        },\n        getProccessedOptionLabel(processedOption = {}) {\n            const grouped = this.isProccessedOptionGroup(processedOption);\n\n            return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);\n        },\n        isProccessedOptionGroup(processedOption) {\n            return isNotEmpty(processedOption?.children);\n        },\n        show(isFocus) {\n            this.$emit('before-show');\n            this.overlayVisible = true;\n            this.activeOptionPath = this.$filled ? this.findOptionPathByValue(this.d_value) : this.activeOptionPath;\n\n            if (this.$filled && isNotEmpty(this.activeOptionPath)) {\n                const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];\n\n                this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey };\n            } else {\n                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };\n            }\n\n            isFocus && focus(this.$refs.focusInput);\n        },\n        hide(isFocus) {\n            const _hide = () => {\n                this.$emit('before-hide');\n                this.overlayVisible = false;\n                this.clicked = false;\n                this.activeOptionPath = [];\n                this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };\n\n                isFocus && focus(this.$refs.focusInput);\n            };\n\n            setTimeout(() => {\n                _hide();\n            }, 0); // For ScreenReaders\n        },\n        onFocus(event) {\n            if (this.disabled) {\n                // For ScreenReaders\n                return;\n            }\n\n            this.focused = true;\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focused = false;\n            this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };\n            this.searchValue = '';\n            this.$emit('blur', event);\n            this.formField.onBlur?.();\n        },\n        onKeyDown(event) {\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 'PageDown':\n                case 'PageUp':\n                case 'Backspace':\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        onOptionChange(event) {\n            const { processedOption, type } = event;\n\n            if (isEmpty(processedOption)) return;\n\n            const { index, key, level, parentKey, children } = processedOption;\n            const grouped = isNotEmpty(children);\n            const activeOptionPath = this.activeOptionPath ? this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key) : [];\n\n            this.focusedOptionInfo = { index, level, parentKey };\n\n            if (type == 'hover' && this.queryMatches) {\n                return;\n            }\n\n            if (grouped) {\n                activeOptionPath.push(processedOption);\n            }\n\n            this.activeOptionPath = activeOptionPath;\n        },\n        onOptionClick(event) {\n            const { originalEvent, processedOption, isFocus, isHide, preventSelection } = event;\n            const { index, key, level, parentKey } = processedOption;\n            const grouped = this.isProccessedOptionGroup(processedOption);\n            const selected = this.isSelected(processedOption);\n\n            if (selected) {\n                this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));\n                this.focusedOptionInfo = { index, level, parentKey };\n            } else {\n                if (grouped) {\n                    this.onOptionChange(event);\n                    this.onOptionGroupSelect(originalEvent, processedOption);\n                } else {\n                    const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);\n\n                    activeOptionPath.push(processedOption);\n\n                    this.focusedOptionInfo = { index, level, parentKey };\n\n                    if (!preventSelection || processedOption?.children.length !== 0) {\n                        this.activeOptionPath = activeOptionPath;\n                        this.onOptionSelect(originalEvent, processedOption, isHide);\n                    }\n                }\n            }\n\n            isFocus && focus(this.$refs.focusInput);\n        },\n        onOptionMouseEnter(event) {\n            if (this.focusOnHover) {\n                if (event.processedOption.level === 0) {\n                    this.dirty = true;\n                }\n\n                if (this.dirty || (!this.dirty && isNotEmpty(this.d_value))) {\n                    this.onOptionChange({ ...event, type: 'hover' });\n                } else if (!this.dirty && event.processedOption.level === 0) {\n                    this.onOptionClick({ ...event, type: 'hover' });\n                }\n            }\n        },\n        onOptionMouseMove(event) {\n            if (this.focused && this.focusOnHover) {\n                this.changeFocusedOptionIndex(event, event.processedOption.index);\n            }\n        },\n        onOptionSelect(event, processedOption, isHide = true) {\n            const value = this.getOptionValue(processedOption?.option);\n\n            this.activeOptionPath.forEach((p) => (p.selected = true));\n            this.updateModel(event, value);\n            isHide && this.hide(true);\n        },\n        onOptionGroupSelect(event, processedOption) {\n            this.dirty = true;\n            this.$emit('group-change', { originalEvent: event, value: processedOption.option });\n        },\n        onContainerClick(event) {\n            if (this.disabled || this.loading) {\n                return;\n            }\n\n            if (event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section=\"clearicon\"]')) {\n                return;\n            } else if (!this.overlay || !this.overlay.contains(event.target)) {\n                this.overlayVisible ? this.hide() : this.show();\n                focus(this.$refs.focusInput);\n            }\n\n            this.clicked = true;\n            this.$emit('click', event);\n        },\n        onClearClick(event) {\n            this.updateModel(event, null);\n        },\n        onOverlayClick(event) {\n            OverlayEventBus.emit('overlay-click', {\n                originalEvent: event,\n                target: this.$el\n            });\n        },\n        onOverlayKeyDown(event) {\n            switch (event.code) {\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                default:\n                    break;\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        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        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                    this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);\n                }\n\n                if (!root) {\n                    this.focusedOptionInfo = { index: -1, parentKey: parentOption ? parentOption.parentKey : '' };\n                    this.searchValue = '';\n                    this.onArrowDownKey(event);\n                }\n\n                event.preventDefault();\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 = { 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        onHomeKey(event) {\n            this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());\n\n            !this.overlayVisible && this.show();\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            this.changeFocusedOptionIndex(event, this.findLastOptionIndex());\n\n            !this.overlayVisible && this.show();\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (!this.overlayVisible) {\n                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, preventSelection: false });\n                    !grouped && this.hide();\n                }\n            }\n\n            event.preventDefault();\n        },\n        onSpaceKey(event) {\n            this.onEnterKey(event);\n        },\n        onEscapeKey(event) {\n            this.overlayVisible && this.hide(true);\n            event.preventDefault();\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        onOverlayEnter(el) {\n            ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);\n\n            addStyle(el, { position: 'absolute', top: '0' });\n            this.alignOverlay();\n            this.scrollInView();\n        },\n        onOverlayAfterEnter() {\n            this.bindOutsideClickListener();\n            this.bindScrollListener();\n            this.bindResizeListener();\n\n            this.$emit('show');\n        },\n        onOverlayLeave() {\n            this.unbindOutsideClickListener();\n            this.unbindScrollListener();\n            this.unbindResizeListener();\n\n            this.$emit('hide');\n            this.overlay = null;\n            this.dirty = false;\n        },\n        onOverlayAfterLeave(el) {\n            ZIndex.clear(el);\n        },\n        alignOverlay() {\n            if (this.appendTo === 'self') {\n                relativePosition(this.overlay, this.$el);\n            } else {\n                this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';\n                absolutePosition(this.overlay, this.$el);\n            }\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    if (this.overlayVisible && this.overlay && !this.$el.contains(event.target) && !this.overlay.contains(event.target)) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindScrollListener() {\n            if (!this.scrollHandler) {\n                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {\n                    if (this.overlayVisible) {\n                        this.hide();\n                    }\n                });\n            }\n\n            this.scrollHandler.bindScrollListener();\n        },\n        unbindScrollListener() {\n            if (this.scrollHandler) {\n                this.scrollHandler.unbindScrollListener();\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = () => {\n                    if (this.overlayVisible && !isTouchDevice()) {\n                        this.hide();\n                    }\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        bindMatchMediaListener() {\n            if (!this.matchMediaListener) {\n                const query = matchMedia(`(max-width: ${this.breakpoint})`);\n\n                this.query = query;\n                this.queryMatches = query.matches;\n\n                this.matchMediaListener = () => {\n                    this.queryMatches = query.matches;\n                    this.mobileActive = false;\n                };\n\n                this.query.addEventListener('change', this.matchMediaListener);\n            }\n        },\n        unbindMatchMediaListener() {\n            if (this.matchMediaListener) {\n                this.query.removeEventListener('change', this.matchMediaListener);\n                this.matchMediaListener = null;\n            }\n        },\n        isOptionMatched(processedOption) {\n            return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));\n        },\n        isValidOption(processedOption) {\n            return isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);\n        },\n        isValidSelectedOption(processedOption) {\n            return this.isValidOption(processedOption) && this.isSelected(processedOption);\n        },\n        isSelected(processedOption) {\n            return this.activeOptionPath && this.activeOptionPath.some((p) => p.key === processedOption.key);\n        },\n        findFirstOptionIndex() {\n            return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));\n        },\n        findLastOptionIndex() {\n            return findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));\n        },\n        findNextOptionIndex(index) {\n            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n        },\n        findPrevOptionIndex(index) {\n            const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        },\n        findSelectedOptionIndex() {\n            return this.visibleOptions.findIndex((processedOption) => this.isValidSelectedOption(processedOption));\n        },\n        findFirstFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n        },\n        findLastFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n        },\n        findOptionPathByValue(value, processedOptions, level = 0) {\n            processedOptions = processedOptions || (level === 0 && this.processedOptions);\n\n            if (!processedOptions) return null;\n            if (isEmpty(value)) return [];\n\n            for (let i = 0; i < processedOptions.length; i++) {\n                const processedOption = processedOptions[i];\n\n                if (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        searchOptions(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let optionIndex = -1;\n            let matched = false;\n\n            if (isNotEmpty(this.searchValue)) {\n                if (this.focusedOptionInfo.index !== -1) {\n                    optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));\n                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOpti