import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { l as logger } from './p-e3d2e899.js';
import { d as detectClickOutside } from './p-430607cb.js';
import { d as detectFocusOutside } from './p-ee33960b.js';
import { _ as _t } from './p-08cf2c0e.js';
import { d as defineCustomElement$4 } from './p-e8fc33ed.js';
import { d as defineCustomElement$3 } from './p-49c80f22.js';
import { d as defineCustomElement$2 } from './p-34685ea4.js';

const formFilterCss = ".sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--primary);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
const DigiFormFilterStyle0 = formFilterCss;

const FormFilter = /*@__PURE__*/ proxyCustomElement(class FormFilter extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afBlurFilter = createEvent(this, "afBlurFilter", 7);
        this.afSubmitFilter = createEvent(this, "afSubmitFilter", 7);
        this.afCloseFilter = createEvent(this, "afCloseFilter", 7);
        this.afResetFilter = createEvent(this, "afResetFilter", 7);
        this.afChangeFilter = createEvent(this, "afChangeFilter", 7);
        this.refs = {};
        this.listItems = [];
        this.checkedItems = [];
        this.tabItems = [];
        this.isActive = false;
        this.activeListItemIndex = 0;
        this.afId = randomIdGenerator('digi-form-filter');
        this.afFilterButtonText = undefined;
        this.afSubmitButtonText = undefined;
        this.afSubmitButtonTextAriaLabel = undefined;
        this.afResetButtonText = _t.clear;
        this.afResetButtonTextAriaLabel = undefined;
        this.afHideResetButton = false;
        this.afAlignRight = undefined;
        this.afName = undefined;
        this.afFilterButtonAriaLabel = undefined;
        this.afFilterButtonAriaDescribedby = undefined;
        this.afAutofocus = undefined;
        this.afListItems = undefined;
        this.afCheckItems = [];
    }
    syncCheckItems() {
        this.checkedItems = this.afCheckItems;
    }
    handleListItems() {
        if (this.afListItems) {
            // via props
            this.setupListProps(this.afListItems);
        }
        else {
            // child elements
            this.setupListElements(this.slotRef.children);
        }
    }
    setupAccessibility() {
        // set default tabIndex to first filter
        if (this.tabItems.length === 0 && this.listItems.length > 0) {
            this.tabItems = [this.listItems.at(0).id];
        }
    }
    setupListProps(userItems) {
        try {
            if (Array.isArray(userItems)) {
                this.listItems = userItems;
            }
            else if (typeof userItems === 'string') {
                this.listItems = JSON.parse(userItems);
            }
            else {
                throw `Invalid type in "af-list-items" attribute`;
            }
        }
        catch (e) {
            logger.warn(`Invalid JSON in "af-list-items" attribute`, this.hostElement, e);
            return;
        }
    }
    clickHandler(e) {
        var _a;
        const target = e.target;
        const rootId = (_a = this.refs.root) === null || _a === void 0 ? void 0 : _a.id;
        if (rootId) {
            if (detectClickOutside(target, `#${rootId}`) && this.isActive) {
                this.hideMenu();
            }
        }
    }
    focusoutHandler(e) {
        var _a;
        const target = e.target;
        const rootId = (_a = this.refs.root) === null || _a === void 0 ? void 0 : _a.id;
        const focusOutsideFilter = detectFocusOutside(target, `#${rootId}`);
        if (focusOutsideFilter && this.isActive) {
            this.hideMenu();
        }
        else {
            this.afBlurFilter.emit({
                filterName: this.afName
            });
        }
    }
    setupListElements(collection) {
        if (!collection || collection.length <= 0) {
            logger.warn(`The slot contains no filter elements.`, this.slotRef);
            return;
        }
        this.listItems = [...collection].map((element, i) => ({
            id: element.afId || i.toString(),
            label: element.afLabel
        }));
    }
    componentWillLoad() {
        this.syncCheckItems();
    }
    componentDidLoad() {
        this.handleListItems();
        this.setupSlot();
    }
    setupSlot() {
        if (!window.MutationObserver) {
            return;
        } // for tests
        const observer = new window.MutationObserver(() => {
            this.setupListElements(this.slotRef.children);
        });
        observer.observe(this.slotRef, { childList: true });
    }
    incrementFocus() {
        if (this.activeListItemIndex < this.listItems.length - 1) {
            this.focusItem(this.activeListItemIndex + 1);
        }
    }
    decrementFocus() {
        if (this.activeListItemIndex > 0) {
            this.focusItem(this.activeListItemIndex - 1);
        }
    }
    handleKey(e) {
        switch (e.key) {
            case 'ArrowDown':
                return this.incrementFocus();
            case 'ArrowUp':
                return this.decrementFocus();
            case 'Home':
                return this.focusItem(0);
            case 'End':
                return this.focusItem(this.listItems.length - 1);
            case 'Enter':
                e.target.click();
                break;
            case 'Escape':
                return this.hideMenu();
        }
    }
    focusItem(idx) {
        var _a;
        this.activeListItemIndex = idx;
        const currentItem = this.listItems.at(idx);
        if (currentItem && this.refs.filter) {
            (_a = this.refs.filter[currentItem.id]) === null || _a === void 0 ? void 0 : _a.focus();
        }
        this.tabItems = [currentItem === null || currentItem === void 0 ? void 0 : currentItem.id];
    }
    hideMenu() {
        var _a;
        this.isActive = false;
        (_a = this.refs.toggle) === null || _a === void 0 ? void 0 : _a.focus();
        this.afCloseFilter.emit({
            filterName: this.afName,
            listItems: this.listItems,
            checked: this.checkedItems
        });
    }
    showMenu() {
        this.isActive = true;
        setTimeout(() => this.focusItem(0), 10);
    }
    handleToggle() {
        if (this.isActive) {
            this.hideMenu();
        }
        else {
            this.showMenu();
        }
    }
    handleCheckItem(item) {
        const isCurrentlyChecked = this.checkedItems.includes(item.id);
        if (isCurrentlyChecked) {
            this.checkedItems = this.checkedItems.filter((id) => id !== item.id);
        }
        else {
            this.checkedItems = [...this.checkedItems, item.id];
        }
        const idx = this.listItems.findIndex(({ id }) => id === item.id);
        this.focusItem(idx);
        this.afChangeFilter.emit({
            filterName: this.afName,
            id: item.id,
            isChecked: !isCurrentlyChecked
        });
    }
    handleSubmit() {
        this.hideMenu();
        this.afSubmitFilter.emit({
            filterName: this.afName,
            listItems: this.listItems,
            checked: this.checkedItems
        });
    }
    handleReset() {
        this.checkedItems = [];
        this.afResetFilter.emit({
            filterName: this.afName
        });
    }
    render() {
        return (h(Host, { key: '629ed6c227116a5fa43e0e2e4c90da6f15310b46' }, h("div", { key: '60e8979ca12ea06f48dac9103fed77a25a895b64', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                'digi-form-filter': true,
                'digi-form-filter--open': this.isActive
            } }, h("digi-button", { key: 'f91142adf06d5320b5bd18f7e057ba3db67982a4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: '06b3942b320859323c70bef9a48b0170e62494b1', class: {
                'digi-form-filter__toggle-button-indicator': true,
                'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
            } }), h("span", { key: '72654121dd476fde27a6dfc8dac7e0fa308da60a', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'a1d0c0155b0c5017cc85315134130b41697a6d54', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '930be23958d57a8ec6b40e027f9729cb3297bc6c', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
                'digi-form-filter__dropdown': true,
                'digi-form-filter__dropdown--right': this.afAlignRight,
                'digi-form-filter__dropdown--hidden': !this.isActive
            } }, h("div", { key: 'be2ff919debc13ccae9b55443b6ede7b20584a62', class: "digi-form-filter__scroll" }, h("fieldset", { key: 'e8e95989e36cefe37dc8d9ea35f733b721ba0925' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'ad8e66517cee5fe0c6ed26c016e23a00e62ee9ff', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
            const isChecked = this.checkedItems.includes(item.id);
            const isTabbable = this.tabItems.includes(item.id);
            return (h("li", { class: "digi-form-filter__item", key: item.id }, h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
                    e.preventDefault();
                    this.handleCheckItem(item);
                } })));
        })))), h("div", { key: '79448216684afafd5746362f923ca6cda0b3a136', class: "digi-form-filter__footer" }, h("digi-button", { key: '891b9ba1f286b1c9fc11c42855c41612fb3b84f4', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: '11fa710bab35b7709c8063f143da9af0da6daaef', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '29f9d7299f89d564a616c302d9965e8431cbc3f8', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'a4b103b33602a14617884e95a28db8b958fcbbcd' }))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afCheckItems": ["syncCheckItems"],
        "afListItems": ["handleListItems"],
        "listItems": ["setupAccessibility"]
    }; }
    static get style() { return DigiFormFilterStyle0; }
}, [6, "digi-form-filter", {
        "afId": [1, "af-id"],
        "afFilterButtonText": [1, "af-filter-button-text"],
        "afSubmitButtonText": [1, "af-submit-button-text"],
        "afSubmitButtonTextAriaLabel": [1, "af-submit-button-text-aria-label"],
        "afResetButtonText": [1, "af-reset-button-text"],
        "afResetButtonTextAriaLabel": [1, "af-reset-button-text-aria-label"],
        "afHideResetButton": [4, "af-hide-reset-button"],
        "afAlignRight": [4, "af-align-right"],
        "afName": [1, "af-name"],
        "afFilterButtonAriaLabel": [1, "af-filter-button-aria-label"],
        "afFilterButtonAriaDescribedby": [1, "af-filter-button-aria-describedby"],
        "afAutofocus": [4, "af-autofocus"],
        "afListItems": [1, "af-list-items"],
        "afCheckItems": [16],
        "listItems": [32],
        "checkedItems": [32],
        "tabItems": [32],
        "isActive": [32],
        "activeListItemIndex": [32]
    }, [[8, "click", "clickHandler"], [4, "focusin", "focusoutHandler"], [0, "keydown", "handleKey"]], {
        "afCheckItems": ["syncCheckItems"],
        "afListItems": ["handleListItems"],
        "listItems": ["setupAccessibility"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-form-filter", "digi-button", "digi-form-checkbox", "digi-icon-chevron-down"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-form-filter":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormFilter);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-form-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-chevron-down":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiFormFilter = FormFilter;
const defineCustomElement = defineCustomElement$1;

export { DigiFormFilter, defineCustomElement };
