import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { F as FormInputSearchVariation } from './p-bc3d2778.js';
import { b as FormInputType, F as FormInputButtonVariation } from './p-c8429245.js';
import { a as ButtonType } from './p-f518a4cf.js';
import { d as detectClickOutside } from './p-430607cb.js';
import { d as detectFocusOutside } from './p-ee33960b.js';
import { d as defineCustomElement$9 } from './p-e8fc33ed.js';
import { d as defineCustomElement$8 } from './p-d0884709.js';
import { d as defineCustomElement$7 } from './p-d1fc55fd.js';
import { d as defineCustomElement$6 } from './p-f630b5d3.js';
import { d as defineCustomElement$5 } from './p-23755c77.js';
import { d as defineCustomElement$4 } from './p-e6a40b0a.js';
import { d as defineCustomElement$3 } from './p-013b272d.js';
import { d as defineCustomElement$2 } from './p-5bbb5a67.js';

const formInputSearchCss = ".sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}";
const DigiFormInputSearchStyle0 = formInputSearchCss;

const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnFocusOutside = createEvent(this, "afOnFocusOutside", 7);
        this.afOnFocusInside = createEvent(this, "afOnFocusInside", 7);
        this.afOnClickOutside = createEvent(this, "afOnClickOutside", 7);
        this.afOnClickInside = createEvent(this, "afOnClickInside", 7);
        this.afOnChange = createEvent(this, "afOnChange", 7);
        this.afOnBlur = createEvent(this, "afOnBlur", 7);
        this.afOnKeyup = createEvent(this, "afOnKeyup", 7);
        this.afOnFocus = createEvent(this, "afOnFocus", 7);
        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
        this.afOnInput = createEvent(this, "afOnInput", 7);
        this.afOnClick = createEvent(this, "afOnClick", 7);
        this.afOnSubmitSearch = createEvent(this, "afOnSubmitSearch", 7);
        this.afOnReady = createEvent(this, "afOnReady", 3);
        this.afLabel = undefined;
        this.afLabelDescription = undefined;
        this.afType = FormInputType.SEARCH;
        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
        this.afName = undefined;
        this.afId = randomIdGenerator('digi-form-input-search');
        this.value = undefined;
        this.afValue = undefined;
        this.afAutocomplete = undefined;
        this.afAriaAutocomplete = undefined;
        this.afAriaActivedescendant = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaDescribedby = undefined;
        this.afVariation = FormInputSearchVariation.MEDIUM;
        this.afHideButton = undefined;
        this.afButtonType = ButtonType.SUBMIT;
        this.afButtonText = undefined;
        this.afButtonAriaLabel = undefined;
        this.afButtonAriaLabelledby = undefined;
        this.afAutofocus = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    /**
     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the input element. Handy for setting focus programmatically.
     */
    async afMGetFormControlElement() {
        const formControlElement = await this._input.afMGetFormControlElement();
        return formControlElement;
    }
    blurHandler(e) {
        this.afOnBlur.emit(e);
    }
    changeHandler(e) {
        const element = e.target;
        this.afValue = this.value = element.value;
        this.afOnChange.emit(e);
    }
    focusHandler(e) {
        e.stopPropagation();
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    keyupHandler(e) {
        this.afOnKeyup.emit(e);
        if (e.detail.key === 'Enter') {
            this.afOnSubmitSearch.emit(this.afValue);
        }
    }
    inputHandler(e) {
        this.afOnInput.emit(e);
    }
    clickHandler(e) {
        e.stopPropagation();
        this.afOnClick.emit(e);
        this.afOnSubmitSearch.emit(this.afValue);
    }
    clickOutsideListener(e) {
        const target = e.target;
        const selector = `[data-af-identifier="${this.afId}"]`;
        if (detectClickOutside(target, selector)) {
            this.afOnClickOutside.emit(e);
        }
        else {
            this.afOnClickInside.emit(e);
        }
    }
    focusOutsideListener(e) {
        const target = e.target;
        const selector = `[data-af-identifier="${this.afId}"]`;
        if (detectFocusOutside(target, selector)) {
            this.afOnFocusOutside.emit(e);
        }
        else {
            this.afOnFocusInside.emit(e);
        }
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    get cssModifiers() {
        return {
            'digi-form-input-search--small': this.afVariation === FormInputSearchVariation.SMALL,
            'digi-form-input-search--medium': this.afVariation === FormInputSearchVariation.MEDIUM,
            'digi-form-input-search--large': this.afVariation === FormInputSearchVariation.LARGE
        };
    }
    render() {
        return (h("div", { key: '02144410d52e85e6b842b4f5693352be6872b7d2', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'de20a664c882c34266c644090efa32559f8789c0', class: {
                'digi-form-input-search__input': true,
                'digi-form-input-search__input--no-button': this.afHideButton
            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: 'eac2cba2d101b332bb84b659d204f30f904f4cb4', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '1960574fac896c296c1bed536e4d4fc68752861c', slot: "icon" }), this.afButtonText)))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"]
    }; }
    static get style() { return DigiFormInputSearchStyle0; }
}, [2, "digi-form-input-search", {
        "afLabel": [1, "af-label"],
        "afLabelDescription": [1, "af-label-description"],
        "afType": [1, "af-type"],
        "afButtonVariation": [1, "af-button-variation"],
        "afName": [1, "af-name"],
        "afId": [1, "af-id"],
        "value": [1],
        "afValue": [1, "af-value"],
        "afAutocomplete": [1, "af-autocomplete"],
        "afAriaAutocomplete": [1, "af-aria-autocomplete"],
        "afAriaActivedescendant": [1, "af-aria-activedescendant"],
        "afAriaLabelledby": [1, "af-aria-labelledby"],
        "afAriaDescribedby": [1, "af-aria-describedby"],
        "afVariation": [1, "af-variation"],
        "afHideButton": [4, "af-hide-button"],
        "afButtonType": [1, "af-button-type"],
        "afButtonText": [1, "af-button-text"],
        "afButtonAriaLabel": [1, "af-button-aria-label"],
        "afButtonAriaLabelledby": [1, "af-button-aria-labelledby"],
        "afAutofocus": [4, "af-autofocus"],
        "afMGetFormControlElement": [64]
    }, [[8, "click", "clickOutsideListener"], [4, "focusin", "focusOutsideListener"]], {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-form-input-search", "digi-button", "digi-form-input", "digi-form-label", "digi-form-validation-message", "digi-icon-search", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-form-input-search":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormInputSearch);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "digi-form-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "digi-form-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "digi-form-validation-message":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "digi-icon-search":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-icon-validation-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-validation-success":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-validation-warning":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiFormInputSearch = FormInputSearch;
const defineCustomElement = defineCustomElement$1;

export { DigiFormInputSearch, defineCustomElement };
