import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
import { d as defineCustomElement$4 } from './p-e8fc33ed.js';
import { d as defineCustomElement$3 } from './p-006daf6c.js';
import { d as defineCustomElement$2 } from './p-02eaef05.js';

const formCategoryFilterCss = ".sc-digi-form-category-filter-h{--digi--form-category-filter--gap:var(--digi--padding--small)}.sc-digi-form-category-filter-h .digi-form-category-filter.sc-digi-form-category-filter{display:flex;flex-wrap:wrap;gap:var(--digi--form-category-filter--gap)}.sc-digi-form-category-filter-h .digi-form-category-filter--category.sc-digi-form-category-filter{--digi--button--icon--spacing:0px}.sc-digi-form-category-filter-h .digi-form-category-filter--category--not-selected.sc-digi-form-category-filter{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--quaternary);--digi--button--color--text--primary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--quaternary)}.sc-digi-form-category-filter-h .digi-form-category-filter--category--thin-text.sc-digi-form-category-filter{font-weight:400}";
const DigiFormCategoryFilterStyle0 = formCategoryFilterCss;

const FormCategoryFilter = /*@__PURE__*/ proxyCustomElement(class FormCategoryFilter extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnSelectedCategoryChange = createEvent(this, "afOnSelectedCategoryChange", 7);
        this.afCategories = [];
        this.afAllCategories = true;
        this.afAllCategoriesSelected = true;
        this.afAllCategoriesText = 'Alla kategorier';
        this.afVisibleCollapsed = 0;
        this.afStartCollapsed = false;
        this.afMultiselect = true;
        this.afHideToggle = false;
        this.selectedCategories = [];
        this.collapsed = false;
    }
    afCategoriesChangeHandler() {
        this.selectedCategories = this.afCategories
            .filter((category) => category.selected)
            .map((category) => category.name);
        if (this.selectedCategories.length === 0 &&
            this.afAllCategories &&
            this.afAllCategoriesSelected)
            this.selectedCategories = [this.afAllCategoriesText];
    }
    componentDidLoad() {
        this.afCategoriesChangeHandler();
        this.collapsed = this.afStartCollapsed;
    }
    displayCategories() {
        if (this.afHideToggle) {
            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
        }
        if (this.afAllCategories) {
            if (this.collapsed &&
                this.afCategories.length + 1 > this.afVisibleCollapsed)
                return [
                    { name: this.afAllCategoriesText },
                    ...this.afCategories.slice(0, this.afVisibleCollapsed - 1)
                ];
            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
        }
        if (this.collapsed && this.afCategories.length > this.afVisibleCollapsed)
            return this.afCategories.slice(0, this.afVisibleCollapsed);
        return this.afCategories;
    }
    toggleCategory(category) {
        if (!this.afMultiselect) {
            if (this.afAllCategories && category.name === this.afAllCategoriesText) {
                if (this.selectedCategories.includes(this.afAllCategoriesText)) {
                    this.selectedCategories = [];
                    this.afOnSelectedCategoryChange.emit([]);
                }
                else {
                    this.selectedCategories = [this.afAllCategoriesText];
                    this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
                }
            }
            // Not allCategories
            this.selectedCategories = [category.name];
            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
            return;
        }
        if (this.afAllCategories && category.name === this.afAllCategoriesText) {
            if (this.selectedCategories.includes(this.afAllCategoriesText)) {
                this.selectedCategories = [];
                this.afOnSelectedCategoryChange.emit([]);
            }
            else {
                this.selectedCategories = [this.afAllCategoriesText];
                this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
            }
        }
        else {
            if (this.selectedCategories.findIndex((name) => name === category.name) >= 0)
                this.selectedCategories = this.selectedCategories.filter((name) => name !== category.name);
            else if (this.afAllCategories)
                this.selectedCategories = [
                    ...this.selectedCategories.filter((name) => name !== this.afAllCategoriesText),
                    category.name
                ];
            else
                this.selectedCategories = [...this.selectedCategories, category.name];
            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
        }
    }
    toggleCollapsed() {
        this.collapsed = !this.collapsed;
    }
    toggleHidden() {
        this.afHideToggle = !this.toggleHidden;
    }
    render() {
        return (h(Host, { key: 'a9bf071c9972f6ae732f8dfa7b5f3481548dd77b' }, h("div", { key: 'c7fa2dbbe1305e65989c31e7450ead6e4122f8df', class: {
                'digi-form-category-filter': true
            } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                'digi-form-category-filter--category': true,
                'digi-form-category-filter--category--not-selected': !this.selectedCategories.includes(category.name)
            }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                this.toggleCategory(category);
            } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '2549c0fe3b8c9364be6614bdc965f039bb0aadcb' }, h("digi-button", { key: '3a4bb85891ff201ab27495dba557e0e5de884cbf', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                this.toggleCollapsed();
            } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afCategories": ["afCategoriesChangeHandler"]
    }; }
    static get style() { return DigiFormCategoryFilterStyle0; }
}, [2, "digi-form-category-filter", {
        "afCategories": [16],
        "afAllCategories": [4, "af-all-categories"],
        "afAllCategoriesSelected": [4, "af-all-categories-selected"],
        "afAllCategoriesText": [1, "af-all-categories-text"],
        "afVisibleCollapsed": [2, "af-visible-collapsed"],
        "afStartCollapsed": [4, "af-start-collapsed"],
        "afMultiselect": [4, "af-multiselect"],
        "afHideToggle": [4, "af-hide-toggle"],
        "selectedCategories": [32],
        "collapsed": [32]
    }, undefined, {
        "afCategories": ["afCategoriesChangeHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-form-category-filter", "digi-button", "digi-icon-minus", "digi-icon-plus"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-form-category-filter":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormCategoryFilter);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-minus":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-plus":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiFormCategoryFilter = FormCategoryFilter;
const defineCustomElement = defineCustomElement$1;

export { DigiFormCategoryFilter, defineCustomElement };
