/* eslint-disable @typescript-eslint/no-explicit-any */
import { h, Fragment } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { logger } from "../../../global/utils/logger";
import { detectClickOutside } from "../../../global/utils/detectClickOutside";
import { detectFocusOutside } from "../../../global/utils/detectFocusOutside";
import { _t } from "../../../text";
import { FormInputType, FormInputValidation, FormInputVariation } from "../../../enums";
import { FormSelectFilterValidation } from "./form-select-validation.enum";
/**
 * @slot empty-search-result - Innehåll som visas om sökningen inte ger några resultat.
 * @swedishName Väljare med sök
 */
export class FormSelectFilter {
    constructor() {
        this._searchQuery = '';
        this.isOpen = false;
        this.focusListItemIndex = 0;
        this.focusInList = false;
        this._afListItems = undefined;
        this._filteredResult = [];
        this._selectedItems = [];
        this.afDescription = undefined;
        this.afDisableValidation = undefined;
        this.afValidation = FormSelectFilterValidation.NEUTRAL;
        this.afValidationText = undefined;
        this.afRequired = undefined;
        this.afRequiredText = undefined;
        this.afAnnounceIfOptional = false;
        this.afAnnounceIfOptionalText = undefined;
        this.sortAlphabetically = true;
        this.value = [];
        this.afMultipleItems = false;
        this.afListItems = undefined;
        this.afId = randomIdGenerator('digi-form-select-filter');
        this.afFilterButtonTextLabel = undefined;
        this.afFilterButtonText = undefined;
        this.afFilterButtonTextMultipleValues = undefined;
        this.afSubmitButtonText = undefined;
        this.afSubmitButtonTextAriaLabel = undefined;
        this.afResetButtonText = _t.clear;
        this.afResetButtonTextAriaLabel = undefined;
        this.afHideResetButton = false;
        this.afAlignRight = undefined;
        this.afName = undefined;
        this.afEmptySearchMessage = 'Inga sökträffar för';
        this.afFilterButtonAriaDescribedby = undefined;
    }
    onValueChanged(value) {
        const joinedArray = [...value, ...this._selectedItems];
        const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
        if (noDuplicates && noDuplicates.length > 0) {
            if (this.afMultipleItems) {
                this._selectedItems = [...noDuplicates];
            }
            else {
                this._selectedItems = [noDuplicates[0]];
            }
        }
    }
    handleListItems() {
        if (this.afListItems) {
            try {
                if (this.afListItems.constructor === Array) {
                    this._afListItems = this.afListItems;
                }
                else if (typeof this.afListItems === 'string') {
                    this._afListItems = JSON.parse(this.afListItems);
                }
                else {
                    throw `Invalid type in "af-list-items" attribute`;
                }
                this.giveItemsValueIfNoneExist();
                this.sortListAlphabetically();
                const selectedListItems = this._afListItems.filter((item) => item.selected);
                if (selectedListItems && selectedListItems.length > 0) {
                    this._selectedItems = [...selectedListItems];
                    this.afOnSelect.emit(this._selectedItems);
                    this.value = this._selectedItems;
                }
                else if (this.value && this.value.length > 0) {
                    this._selectedItems = [...this.value];
                }
                this.filterResults();
            }
            catch (e) {
                logger.warn(`Invalid JSON in "af-list-items" attribute`, this.hostElement, e);
                return;
            }
        }
    }
    /**
     * Funktion för att rensa valda värden från komponenten
     * @en Function for clearing selected values from component
     */
    async afMReset() {
        this.resetSelectItems();
    }
    /**
     * Funktion för att stänga dropdownen
     * @en Function for closing the dropdown
     */
    async afMCloseDropdown() {
        this.setClosed();
    }
    clickHandler(e) {
        const target = e.target;
        const selector = `#${this.afId}-identifier`;
        if (detectClickOutside(target, selector) && this.isOpen) {
            this.emitFilterClosedEvent();
        }
    }
    focusoutHandler(e) {
        const target = e.target;
        const selector = `#${this.afId}-identifier`;
        const focusOutsideFilter = detectFocusOutside(target, selector);
        if (focusOutsideFilter && this.isOpen) {
            this.emitFilterClosedEvent();
        }
        else {
            this.focusInList = !detectFocusOutside(target, `#${this.afId}-select-filter-list`);
        }
    }
    debounce(func, timeout = 300) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func.apply(this, args);
            }, timeout);
        };
    }
    setClosed(focusToggleButton = false) {
        this.isOpen = false;
        if (focusToggleButton) {
            document.getElementById(`${this.afId}`).focus();
        }
        this.setScroll(0);
        this._searchQuery = '';
        this.afOnQueryChanged.emit('');
        this.afOnSubmitFilters.emit(this._selectedItems);
        this.filterResults();
    }
    setScroll(scrollY) {
        document.querySelector(`#${this.afId}-dropdown-menu .digi-form-select-filter__scroll`).scrollTop = scrollY;
    }
    setOpen() {
        this.isOpen = true;
        this.focusListItemIndex = 0;
        setTimeout(() => {
            this.setFocusSearch();
        }, 50);
    }
    giveItemsValueIfNoneExist() {
        this._afListItems
            .filter((item) => {
            return item.value === undefined;
        })
            .forEach((item) => {
            item.value = item.label;
        });
    }
    sortListAlphabetically() {
        if (!this.sortAlphabetically) {
            return;
        }
        this._afListItems.sort((a, b) => {
            if (a.label < b.label) {
                return -1;
            }
            if (a.label > b.label) {
                return 1;
            }
            return 0;
        });
    }
    toggleDropdown() {
        return this.isOpen ? this.setClosed() : this.setOpen();
    }
    inputItem(identifier, index) {
        const item = this.hostElement
            .querySelectorAll(`#${identifier} .digi-form-select-filter__item`)
            .item(index);
        return item;
    }
    emitFilterClosedEvent() {
        this.setClosed(true);
        this.afOnFilterClosed.emit();
    }
    componentWillLoad() {
        this.handleListItems();
    }
    setFocusItem() {
        const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
        if (element) {
            element.focus();
        }
    }
    setFocusSearch() {
        const element = this.hostElement.querySelector('input');
        if (element) {
            element.focus();
        }
    }
    incrementFocusItem() {
        const listLength = this.showNeutralValue
            ? this._filteredResult.length
            : this._filteredResult.length - 1;
        if (this.focusListItemIndex < listLength) {
            this.focusListItemIndex = this.focusListItemIndex + 1;
            this.setFocusItem();
            return;
        }
        else {
            if (!this.afMultipleItems) {
                this.focusListItemIndex = 0;
                this.setFocusItem();
                return;
            }
        }
        this.tabHandler();
    }
    decrementFocusItem() {
        if (this.focusListItemIndex === 0) {
            this.setFocusSearch();
            return;
        }
        if (this.focusListItemIndex > 0) {
            this.focusListItemIndex = this.focusListItemIndex - 1;
        }
        this.setFocusItem();
    }
    downHandler(e) {
        e.detail.preventDefault();
        if (e.detail.code === 'ArrowDown' || e.detail.code === 'ArrowRight') {
            this.incrementFocusItem();
        }
    }
    upHandler(e) {
        e.detail.preventDefault();
        if (e.detail.code === 'ArrowUp' || e.detail.code === 'ArrowLeft') {
            this.decrementFocusItem();
        }
    }
    homeHandler(e) {
        e.detail.preventDefault();
        this.focusListItemIndex = 0;
        this.setFocusItem();
    }
    endHandler(e) {
        e.detail.preventDefault();
        this.focusListItemIndex = this.showNeutralValue
            ? this._filteredResult.length
            : this._filteredResult.length - 1;
        this.setFocusItem();
    }
    enterHandler(e) {
        e.detail.preventDefault();
        e.detail.target.click();
    }
    spaceHandler(e) {
        e.detail.preventDefault();
        e.detail.target.click();
    }
    escHandler() {
        if (this.isOpen) {
            this.setClosed(true);
        }
    }
    tabHandler() {
        if (this.isOpen && this.focusInList) {
            if (this.afMultipleItems && this._submitButton) {
                setTimeout(() => {
                    var _a;
                    if (this._submitButton) {
                        (_a = this._submitButton.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
                    }
                }, 10);
            }
            else {
                this.setClosed(true);
            }
        }
    }
    shiftHandler() {
        if (this.isOpen && this.focusInList) {
            if (this.afMultipleItems && this._toggleButton) {
                this._toggleButton.querySelector('button').focus();
            }
            else {
                this.setFocusSearch();
            }
        }
    }
    filterResults() {
        if (this._searchQuery && this._searchQuery.length > 0) {
            this._filteredResult = [
                ...this._afListItems.filter((item) => {
                    return item.label
                        .toLowerCase()
                        .includes(this._searchQuery.toLowerCase());
                })
            ];
        }
        else {
            this._filteredResult = [...this._afListItems];
        }
    }
    inputSearchKeyboardHandler(e) {
        if (e.code === 'ArrowDown') {
            e.preventDefault();
            this.setFocusItem();
        }
        if (e.code === 'Enter' && this._searchQuery !== '') {
            e.preventDefault();
            this.setFocusItem();
        }
    }
    inputSearchInputHandler(e) {
        this._searchQuery = e.target.value;
        this.afOnQueryChanged.emit(this._searchQuery);
        this.filterResults();
    }
    resetSelectItems(close = false) {
        this._selectedItems = [];
        this.value = [];
        this.afOnSelect.emit([]);
        this._searchQuery = '';
        this.filterResults();
        if (close) {
            this.emitFilterClosedEvent();
        }
        this.afOnResetFilters.emit();
    }
    selectItemHandler(item) {
        if (this.afMultipleItems) {
            item.selected = !item.selected;
            if (this._selectedItems.filter((x) => {
                return x.value === item.value;
            }).length > 0) {
                //ITEM VALUE ALREADY EXISTS IN LIST, DELETE FROM LIST
                this._selectedItems.splice(this._selectedItems.findIndex((e) => e.value === item.value), 1);
            }
            else {
                this._selectedItems = [...this._selectedItems, item];
            }
        }
        else {
            this._selectedItems.forEach((item) => {
                item.selected = false;
            });
            item.selected = true;
            this._selectedItems = [item];
            this.emitFilterClosedEvent();
        }
        this.value = this._selectedItems;
        this.afOnSelect.emit(this._selectedItems);
        this.filterResults();
    }
    isSelected(textValue) {
        if (textValue && this._selectedItems && this._selectedItems.length > 0) {
            return (this._selectedItems.filter((item) => {
                return item.value === textValue;
            }).length > 0);
        }
        return false;
    }
    get cssModifiers() {
        return {
            'digi-form-select-filter--open': this.isOpen,
            'digi-form-select-filter--neutral': this.afValidation === FormSelectFilterValidation.NEUTRAL,
            'digi-form-select-filter--success': this.afValidation === FormSelectFilterValidation.SUCCESS,
            'digi-form-select-filter--warning': this.afValidation === FormSelectFilterValidation.WARNING,
            'digi-form-select-filter--error': this.afValidation === FormSelectFilterValidation.ERROR
        };
    }
    get cssModifiersToggleButtonIndicator() {
        return {
            'digi-form-select-filter__toggle-button-indicator--active': this._selectedItems.length > 0
        };
    }
    get cssModifiersToggleButtonWrapper() {
        return {
            'digi-form-select-filter__toggle-button-wrapper--activated': this._selectedItems.length > 0
        };
    }
    buttonText(isAriaLabel) {
        const ariaLabelText = (text = '') => {
            return isAriaLabel ? text : '';
        };
        if (this._selectedItems && this._selectedItems.length === 1) {
            return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
                this._selectedItems[0].label);
        }
        else if (this._selectedItems &&
            this._selectedItems.length > 0 &&
            this.afMultipleItems) {
            if (this.afFilterButtonTextMultipleValues) {
                return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
                    this.afFilterButtonTextMultipleValues.replace('{count}', this._selectedItems.length.toString()));
            }
            else {
                return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
                    `${this._selectedItems.length} valda`);
            }
        }
        else {
            return (ariaLabelText(this.afFilterButtonTextLabel
                ? this.afFilterButtonTextLabel + ': '
                : '') + this.afFilterButtonText);
        }
    }
    get renderButtonLabel() {
        return this.buttonText(false);
    }
    get ariaLabel() {
        return this.buttonText(true);
    }
    get showNeutralValue() {
        return (!this.afMultipleItems &&
            this.afFilterButtonText &&
            this._searchQuery.length === 0);
    }
    showValidation() {
        return !this.afDisableValidation &&
            this.afValidation !== FormSelectFilterValidation.NEUTRAL &&
            this.afValidationText
            ? true
            : false;
    }
    renderEmptyStateBox() {
        let statusMessage = '';
        if (this._filteredResult && this._filteredResult.length > 0) {
            statusMessage = `${this._filteredResult.length} sökträff${this._filteredResult.length > 1 ? 'ar' : ''}`;
        }
        else if (this._filteredResult.length === 0) {
            statusMessage = `${this.afEmptySearchMessage} ${this._searchQuery}`;
        }
        return (h(Fragment, null, h("div", { role: "status", id: `${this.afId}-searchstatus`, class: {
                'digi-form-select-filter__search-status': true,
                'digi--a11y--sr-only': this._filteredResult && this._filteredResult.length > 0
            } }, h("span", null, " ", statusMessage, " "), h("div", { class: {
                hidden: this._filteredResult && this._filteredResult.length > 0
            } }, h("slot", { name: "empty-search-result" })))));
    }
    render() {
        return (h("div", { key: '59ffc1d9dfccc348911d49d4fe2d4b4e5f2aefb9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'e9ea0d81d58463dbcfca683cd26677043a49677c', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '526e485fe0664d900b280148413ec284a64270e9', onAfOnEsc: () => this.escHandler() }, h("button", { key: '521363787fe80af4c7f711526c269977c7302feb', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-labelledby": this.afFilterButtonAriaDescribedby, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '92fef929c1a37541cbae2c46d1b58066598027ba', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '57cec37118590daea519a2759b8efadba618aad1', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '65e862c658f9e67b4a8627f6f77d1be2365f611c', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '9466f4a2f4d89ee0314f440be9e144a3c87142a5', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '736e3560ccd30dc238253208dd267774482ca8a7', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                'digi-form-select-filter__dropdown': true,
                'digi-form-select-filter__dropdown--right': this.afAlignRight,
                'digi-form-select-filter__dropdown--hidden': !this.isOpen
            } }, h("fieldset", { key: '57b313bd18ead628ffe38c709121cb48fde0cbc3' }, h("div", { key: '31fb512faf76807439e1dab1537c79908dd27bba', class: "digi-form-select-filter__header" }, h("legend", { key: '08bad844f0c681d4918d6b0b79b4c7ec182d289e', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'ff06629732f2c5215b4e5a4ffda7d8632e060832', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                this.focusListItemIndex = 0;
                99;
            }, onAfOnKeyup: (e) => {
                this.inputSearchKeyboardHandler(e.detail);
            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '1cedf3e2ebbd9c0980c8a56048efcec1cc6c3437', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '10e410d90fe78d5cbc1af0eac55f4356cf37acb3', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '5d12c07fdc63d9445e35c088d793c7c202ce021a', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                ? 'false'
                : this.afValidation === FormSelectFilterValidation.ERROR
                    ? 'true'
                    : 'false', "aria-errormessage": `${this.afId}--validation-message`, "aria-required": this.afMultipleItems
                ? false
                : this.afRequired
                    ? 'true'
                    : 'false' }, this.showNeutralValue && (h("li", { key: 'dd77f313d6346d441316a53a9adf311ed341afd1', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                ? 'false'
                : this.afRequired
                    ? 'true'
                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: 'd2ad38d919541561dc9f0e87fe788d31577722a9', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
            this._filteredResult.map((item, index) => {
                return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                        ? 'false'
                        : this.afRequired
                            ? 'true'
                            : 'false', "aria-invalid": this.afMultipleItems
                        ? this.afValidation ===
                            FormSelectFilterValidation.ERROR
                            ? 'true'
                            : 'false'
                        : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue ? -1 : index === 0 ? 0 : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
            }))))), this.afMultipleItems && (h("div", { key: '8540327ec1dd929ebca8ee93107ffeb7a2a23a16', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'db997f3f23b5c8574fc641d012b46c8aeef9fab4', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '39c6d78b457f4737c50646a5e613fe06fd30c056', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '62dda11e757aa7414c0916ea75ad3b1c53baa955', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                this.setClosed(true);
            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '8ccfcd8bbed9f6915b599fe8b26d8b496e3d6b8e', class: "digi-form-select__footer" }, h("div", { key: 'f40c8541821a4d310bef6830c54a5c104cf7bb59', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'ff62bb2d5f1de9c787d3bda12445ab5365de9c22', "af-variation": this.afValidation }, this.afValidationText))))));
    }
    static get is() { return "digi-form-select-filter"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-select-filter.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-select-filter.css"]
        };
    }
    static get properties() {
        return {
            "afDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "An optional description text."
                        }],
                    "text": "En valfri beskrivningstext."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-description",
                "reflect": false
            },
            "afDisableValidation": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Disables the validation."
                        }],
                    "text": "Inaktiverar valideringen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-disable-validation",
                "reflect": false
            },
            "afValidation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormSelectFilterValidation",
                    "resolved": "FormSelectFilterValidation.ERROR | FormSelectFilterValidation.NEUTRAL | FormSelectFilterValidation.SUCCESS | FormSelectFilterValidation.WARNING",
                    "references": {
                        "FormSelectFilterValidation": {
                            "location": "import",
                            "path": "./form-select-validation.enum",
                            "id": "src/components/_form/form-select-filter/form-select-validation.enum.ts::FormSelectFilterValidation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set select validation"
                        }],
                    "text": "S\u00E4tter v\u00E4ljarens validering"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation",
                "reflect": false,
                "defaultValue": "FormSelectFilterValidation.NEUTRAL"
            },
            "afValidationText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the validation text."
                        }],
                    "text": "S\u00E4tter valideringstexten."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation-text",
                "reflect": false
            },
            "afRequired": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set it to \"true\" if field is required."
                        }],
                    "text": "S\u00E4tt attributet till \"true\" om f\u00E4ltet \u00E4r obligatoriskt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-required",
                "reflect": false
            },
            "afRequiredText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set text for afRequired."
                        }],
                    "text": "S\u00E4tter text f\u00F6r afRequired."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-required-text",
                "reflect": false
            },
            "afAnnounceIfOptional": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Normally a required field is visually and semantically emphasized.\nThis flips that and emphasizes the field if it is not required.\nSet this to true if your form contains more required fields than not."
                        }],
                    "text": "Normalt betonas ett obligatoriskt f\u00E4lt visuellt och semantiskt.\nDetta v\u00E4nder p\u00E5 det och betonar f\u00E4ltet om det inte kr\u00E4vs.\nSt\u00E4ll in detta till sant om ditt formul\u00E4r inneh\u00E5ller fler obligatoriska f\u00E4lt \u00E4n inte."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-announce-if-optional",
                "reflect": false,
                "defaultValue": "false"
            },
            "afAnnounceIfOptionalText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set text for afAnnounceIfOptional."
                        }],
                    "text": "S\u00E4tter text f\u00F6r afAnnounceIfOptional."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-announce-if-optional-text",
                "reflect": false
            },
            "sortAlphabetically": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sort the list in alphabetical order."
                        }],
                    "text": "Sorterar listan i alfabetisk ordning."
                },
                "getter": false,
                "setter": false,
                "attribute": "sort-alphabetically",
                "reflect": false,
                "defaultValue": "true"
            },
            "value": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "IListItem[]",
                    "resolved": "IListItem[]",
                    "references": {
                        "IListItem": {
                            "location": "import",
                            "path": "./form-select-filter.interface",
                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "ignore",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "afMultipleItems": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set to true if you should be able to choose multiple items from the list."
                        }],
                    "text": "S\u00E4tts till true om det ska g\u00E5 att v\u00E4lja flera val fr\u00E5n listan."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-multiple-items",
                "reflect": false,
                "defaultValue": "false"
            },
            "afListItems": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | IListItem[]",
                    "resolved": "IListItem[] | string",
                    "references": {
                        "IListItem": {
                            "location": "import",
                            "path": "./form-select-filter.interface",
                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "List with option."
                        }],
                    "text": "Lista med val."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-list-items",
                "reflect": false
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' and so on. Defaults to random string."
                        }],
                    "text": "Prefixet f\u00F6r alla komponentens olika interna 'id'-attribut p\u00E5 dropdowns, filterlistor etc. Ex. 'my-cool-id' genererar 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' och s\u00E5 vidare. Ges inget v\u00E4rde s\u00E5 genereras ett slumpm\u00E4ssigt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-form-select-filter')"
            },
            "afFilterButtonTextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the label text for filter button text"
                        }],
                    "text": "Texten till label f\u00F6r knappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-filter-button-text-label",
                "reflect": false
            },
            "afFilterButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the filter button text"
                        }],
                    "text": "Texten i filterknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-filter-button-text",
                "reflect": false
            },
            "afFilterButtonTextMultipleValues": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Text that is shown in button when user has selected multiple choices. Use {count} to display number of items."
                        }],
                    "text": "Texten som visas n\u00E4r man gjort fler \u00E4n ett val. Anv\u00E4nd {count} f\u00F6r att l\u00E4sa ut antalet val"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-filter-button-text-multiple-values",
                "reflect": false
            },
            "afSubmitButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the submit button text"
                        }],
                    "text": "Texten i submitknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-submit-button-text",
                "reflect": false
            },
            "afSubmitButtonTextAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the submit button aria-label text"
                        }],
                    "text": "Sk\u00E4rml\u00E4sartext f\u00F6r submitknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-submit-button-text-aria-label",
                "reflect": false
            },
            "afResetButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the reset button text"
                        }],
                    "text": "Texten i rensaknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-reset-button-text",
                "reflect": false,
                "defaultValue": "_t.clear"
            },
            "afResetButtonTextAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set the reset button aria-label text"
                        }],
                    "text": "Sk\u00E4rml\u00E4sartext f\u00F6r resetknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-reset-button-text-aria-label",
                "reflect": false
            },
            "afHideResetButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Hides the reset button when set to true"
                        }],
                    "text": "D\u00F6ljer rensaknappen n\u00E4r v\u00E4rdet s\u00E4tts till true"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-hide-reset-button",
                "reflect": false,
                "defaultValue": "false"
            },
            "afAlignRight": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Align dropdown from right to left"
                        }],
                    "text": "Justera dropdown fr\u00E5n h\u00F6ger till v\u00E4nster"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-align-right",
                "reflect": false
            },
            "afName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Label for the search-field in filter-list."
                        }],
                    "text": "Label till s\u00F6kf\u00E4ltet i filterlistan."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-name",
                "reflect": false
            },
            "afEmptySearchMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Text that is shown the the search gives no result."
                        }],
                    "text": "Text som visas n\u00E4r s\u00F6kningen inte ger n\u00E5gra resultat."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-empty-search-message",
                "reflect": false,
                "defaultValue": "'Inga s\u00F6ktr\u00E4ffar f\u00F6r'"
            },
            "afFilterButtonAriaDescribedby": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-describedby attribute on filter button"
                        }],
                    "text": "S\u00E4tter attributet 'aria-describedby' p\u00E5 filterknappen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-filter-button-aria-describedby",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "focusListItemIndex": {},
            "focusInList": {},
            "_afListItems": {},
            "_filteredResult": {},
            "_selectedItems": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnFocusout",
                "name": "afOnFocusout",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnSubmitFilters",
                "name": "afOnSubmitFilters",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At filter submit"
                        }],
                    "text": "Vid uppdatering av filtret"
                },
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                }
            }, {
                "method": "afOnFilterClosed",
                "name": "afOnFilterClosed",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the filter is closed without confirming the selected options"
                        }],
                    "text": "N\u00E4r filtret st\u00E4ngs utan att valda alternativ bekr\u00E4ftats"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnResetFilters",
                "name": "afOnResetFilters",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At filter reset"
                        }],
                    "text": "Vid reset av filtret"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnSelect",
                "name": "afOnSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When a filter is changed"
                        }],
                    "text": "N\u00E4r ett eller flera filter v\u00E4ljs"
                },
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                }
            }, {
                "method": "afOnQueryChanged",
                "name": "afOnQueryChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When a search query is changed."
                        }],
                    "text": "N\u00E4r en s\u00F6kstr\u00E4ng \u00E4ndras"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMReset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Funktion f\u00F6r att rensa valda v\u00E4rden fr\u00E5n komponenten",
                    "tags": [{
                            "name": "en",
                            "text": "Function for clearing selected values from component"
                        }]
                }
            },
            "afMCloseDropdown": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Funktion f\u00F6r att st\u00E4nga dropdownen",
                    "tags": [{
                            "name": "en",
                            "text": "Function for closing the dropdown"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "onValueChanged"
            }, {
                "propName": "afListItems",
                "methodName": "handleListItems"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "clickHandler",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "focusin",
                "method": "focusoutHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
