import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
import { d as defineCustomElement$3 } from './p-R79iWjuc.js';
import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';

const filterBarCss = ":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";

const FilterBar = /*@__PURE__*/ proxyCustomElement(class FilterBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxTopbarFilterChange = createEvent(this, "ifxTopbarFilterChange", 7);
        this.selectedOptions = [];
        this.showAllFilters = false;
        this.maxShownFilters = 4; // Default to 4, can be overridden by parent component
        this.showMoreFiltersButton = true;
        this.handleMoreFiltersClick = () => {
            this.showAllFilters = true;
            this.updateVisibleSlots(); // Recalculate visible slots based on the new state
        };
        this.handleResetEvent = () => {
            var _a;
            const filterSearchSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="filter-search"]');
            if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement
                const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });
                filterSearchSlottedElements.forEach((filterSearchWrapper) => {
                    const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');
                    const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field');
                    if (searchField.length > 0) {
                        searchField.forEach((searchFieldElement) => {
                            searchFieldElement.value = '';
                        });
                    }
                });
            }
            this.selectedOptions = [];
            // Emit the change to inform any parent components that the filters have been reset
            this.ifxTopbarFilterChange.emit(this.selectedOptions);
        };
        this.handleSearchChange = (event) => {
            this.handleTopbarFilterChange(event);
        };
        this.handleFilterSelect = (event) => {
            this.handleTopbarFilterChange(event);
        };
        this.handleTopbarFilterChange = (event) => {
            const newSelectedOptions = [...this.selectedOptions];
            if (event.type === 'ifxFilterSearchChange') {
                const { filterName, filterValue } = event.detail;
                const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);
                if (existingOptionIndex !== -1) {
                    // If an existing filter is found, update its value
                    newSelectedOptions[existingOptionIndex].filterValues = [filterValue];
                }
                else {
                    newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });
                }
            }
            else if (event.type === 'ifxFilterSelect') {
                const { filterName, filterValues, type } = event.detail;
                const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);
                if (existingOptionIndex !== -1) {
                    newSelectedOptions[existingOptionIndex].filterValues = filterValues;
                    newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items
                }
                else {
                    newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });
                }
            }
            this.selectedOptions = newSelectedOptions;
            this.ifxTopbarFilterChange.emit(this.selectedOptions);
        };
    }
    /* If the component is ever removed and then reattached to the DOM,
  connectedCallback ensures that the event listeners are properly set up again */
    connectedCallback() {
        this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);
        this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);
        window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);
    }
    componentWillUnload() {
        this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);
        this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);
        window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
    }
    componentWillLoad() {
        this.updateVisibleSlots();
    }
    // Modify updateVisibleSlots to use showAllFilters to determine the number of slots
    updateVisibleSlots() {
        this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;
    }
    render() {
        const safeVisibleSlots = Math.max(0, this.visibleSlots);
        const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length;
        // Calculate slotsToShow safely
        const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
        const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
        return (h(Host, { key: '91806ec3053192b0d29e8af30ac276b496e19c8d' }, h("div", { key: 'b1a6fe7e875962fab99b329778ea2b45688b4368', class: "search-container" }, h("slot", { key: 'b17e991036999fe827f37ca6716db836c187c9bb', name: "filter-search" }), " "), h("div", { key: 'dc14e0b6f02f0bab27dc8548b8f7066d190be8c5', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '9a34b9077612476b7e8ca45e56e65b78d877cbec', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '5350c02d1c7ddd2c53cfb38d6f3f01afce04b7bb', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '4767e5dec3f4fcd6927b5fbafadc1db12695fc39', icon: "filter-16" }), "More filters"))))));
    }
    get el() { return this; }
    static get style() { return filterBarCss; }
}, [257, "ifx-filter-bar", {
        "maxShownFilters": [2, "max-shown-filters"],
        "showMoreFiltersButton": [4, "show-more-filters-button"],
        "selectedOptions": [32],
        "showAllFilters": [32],
        "visibleSlots": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-filter-bar", "ifx-button", "ifx-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-filter-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FilterBar);
            }
            break;
        case "ifx-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IfxFilterBar = FilterBar;
const defineCustomElement = defineCustomElement$1;

export { IfxFilterBar, defineCustomElement };
//# sourceMappingURL=ifx-filter-bar.js.map

//# sourceMappingURL=ifx-filter-bar.js.map