'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
const logger_util = require('./logger.util-fdafc086.js');
const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
const text = require('./text-3157012b.js');
require('./detectClosest.util-85b3507b.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afBlurFilter = index.createEvent(this, "afBlurFilter", 7);
        this.afSubmitFilter = index.createEvent(this, "afSubmitFilter", 7);
        this.afCloseFilter = index.createEvent(this, "afCloseFilter", 7);
        this.afResetFilter = index.createEvent(this, "afResetFilter", 7);
        this.afChangeFilter = index.createEvent(this, "afChangeFilter", 7);
        this.refs = {};
        this.listItems = [];
        this.checkedItems = [];
        this.tabItems = [];
        this.isActive = false;
        this.activeListItemIndex = 0;
        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-filter');
        this.afFilterButtonText = undefined;
        this.afSubmitButtonText = undefined;
        this.afSubmitButtonTextAriaLabel = undefined;
        this.afResetButtonText = text._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_util.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_util.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_util.detectFocusOutside(target, `#${rootId}`);
        if (focusOutsideFilter && this.isActive) {
            this.hideMenu();
        }
        else {
            this.afBlurFilter.emit({
                filterName: this.afName
            });
        }
    }
    setupListElements(collection) {
        if (!collection || collection.length <= 0) {
            logger_util.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 (index.h(index.Host, { key: 'dfd9336afc099665b35c08b47467d68320279469' }, index.h("div", { key: 'a329b82ecd5905e1792021a16dd1c12b3b7b00a0', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                'digi-form-filter': true,
                'digi-form-filter--open': this.isActive
            } }, index.h("digi-button", { key: 'b5a6b2aca44be78743d9f0df213b801395f09ae4', 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 }, index.h("i", { key: '38753316b8e1cdc24a977c835da398ff344b3d68', class: {
                'digi-form-filter__toggle-button-indicator': true,
                'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
            } }), index.h("span", { key: 'bef6dc84b8439cb5bd45229f5e77b0a2bd6a97ad', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), index.h("digi-icon-chevron-down", { key: '9572d1ec8bc6f8ac50252be491131544fbb2c151', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: 'f2071068664d89a5510f2840a7d8912b654c56f4', 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
            } }, index.h("div", { key: '3574702676988b2a0777564b343fdf6dc271177c', class: "digi-form-filter__scroll" }, index.h("fieldset", { key: '03098521d312f77170041c7240c1bfd1f9831107' }, this.afName ? (index.h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (index.h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), index.h("ul", { key: '532094b7579a8c7f60e87e4ee973f66b16cb7487', 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 (index.h("li", { class: "digi-form-filter__item", key: item.id }, index.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);
                } })));
        })))), index.h("div", { key: 'c7985ef9aec4f29899fc4ff829867fd43fa85c08', class: "digi-form-filter__footer" }, index.h("digi-button", { key: '06dca89dd7498a070c1046a97cdda36986bebded', 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 && (index.h("digi-button", { key: '863114cc93fd93a5fea02d114d60c64c86d29d8f', "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))))), index.h("div", { key: 'ac372d9c7e3a82886b6b692493bfcb536b52b5be', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, index.h("slot", { key: '5c1fc764d95c7928a84a13cfb57f9299e620e510' }))));
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "afCheckItems": ["syncCheckItems"],
        "afListItems": ["handleListItems"],
        "listItems": ["setupAccessibility"]
    }; }
};
FormFilter.style = DigiFormFilterStyle0;

exports.digi_form_filter = FormFilter;
