import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { l as logger } from './p-e3d2e899.js';
import { a as FormSelectVariation, F as FormSelectValidation } from './p-f447b984.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-11278347.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';
import { d as defineCustomElement$1 } from './p-2f619b66.js';

const formSelectCss = ".sc-digi-form-select-h{--digi--form-select--background--empty:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--neutral:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-select--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-select--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-select--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-select--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-select--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-select--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-select--select-wrapper--position:relative;--digi--form-select--select--height--small:var(--digi--input-height--small);--digi--form-select--select--height--medium:var(--digi--input-height--medium);--digi--form-select--select--height--large:var(--digi--input-height--large);--digi--form-select--select--border-radius:var(--digi--border-radius--input);--digi--form-select--select--padding:0 var(--digi--gutter--medium);--digi--form-select--select--padding--inline-end:var(--digi--padding--large);--digi--form-select--select--border-width--neutral:var(--digi--border-width--input-regular);--digi--form-select--select--border-width--success:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--error:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--warning:var(--digi--border-width--input-validation);--digi--form-select--select--width:100%;--digi--form-select--select--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--select-option--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--label--margin-bottom:var(--digi--gutter--medium);--digi--form-select--icon--inline-end:0.75rem;--digi--form-select--icon--top:50%;--digi--form-select--icon--transform:translateY(-50%);--digi--form-select--icon--color:var(--digi--color--icon--primary);--digi--form-select--footer--margin-top:var(--digi--gutter--medium)}.sc-digi-form-select-h .digi-form-select.sc-digi-form-select{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-select-h .digi-form-select--neutral.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--neutral);--BORDER-COLOR:var(--digi--form-select--border-color--neutral);--BACKGROUND:var(--digi--form-select--background--neutral)}.sc-digi-form-select-h .digi-form-select--success.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--success);--BORDER-COLOR:var(--digi--form-select--border-color--success);--BACKGROUND:var(--digi--form-select--background--success)}.sc-digi-form-select-h .digi-form-select--warning.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--warning);--BORDER-COLOR:var(--digi--form-select--border-color--warning);--BACKGROUND:var(--digi--form-select--background--warning)}.sc-digi-form-select-h .digi-form-select--error.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--error);--BORDER-COLOR:var(--digi--form-select--border-color--error);--BACKGROUND:var(--digi--form-select--background--error)}.sc-digi-form-select-h .digi-form-select--small.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--small)}.sc-digi-form-select-h .digi-form-select--medium.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--medium)}.sc-digi-form-select-h .digi-form-select--large.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--large)}.sc-digi-form-select-h .digi-form-select--empty.sc-digi-form-select:not(:focus-within){--BACKGROUND:var(--digi--form-select--background--empty)}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select{appearance:none;width:var(--digi--form-select--select--width);padding:var(--digi--form-select--select--padding);padding-inline-end:var(--digi--form-select--select--padding--inline-end);height:var(--HEIGHT);border:var(--BORDER-WIDTH) solid;border-radius:var(--digi--form-select--select--border-radius);border-color:var(--BORDER-COLOR);cursor:pointer;font-size:var(--digi--form-select--select--font-size);color:var(--digi--color--text--primary);background:var(--BACKGROUND);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-select-h .digi-form-select__select-wrapper.sc-digi-form-select{position:var(--digi--form-select--select-wrapper--position)}.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{font-size:var(--digi--form-select--select-option--font-size)}@media (min-width: 48rem){.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{--digi--form-select--select-option--font-size:var(--digi--typography--font-size--l)}}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select::-ms-expand{display:none}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-form-select-h .digi-form-select__icon.sc-digi-form-select{position:absolute;inset-inline-end:var(--digi--form-select--icon--inline-end);inset-block-start:var(--digi--form-select--icon--top);transform:var(--digi--form-select--icon--transform);pointer-events:none;color:var(--digi--form-select--icon--color)}.digi-form-select--neutral.sc-digi-form-select .digi-form-select__footer.sc-digi-form-select{position:absolute}";
const DigiFormSelectStyle0 = formSelectCss;

const FormSelect = /*@__PURE__*/ proxyCustomElement(class FormSelect extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnChange = createEvent(this, "afOnChange", 7);
        this.afOnSelect = createEvent(this, "afOnSelect", 7);
        this.afOnFocus = createEvent(this, "afOnFocus", 7);
        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
        this.afOnBlur = createEvent(this, "afOnBlur", 7);
        this.afOnDirty = createEvent(this, "afOnDirty", 7);
        this.afOnReady = createEvent(this, "afOnReady", 3);
        this.optionItems = [];
        this.dirty = false;
        this.touched = false;
        this.hasPlaceholder = false;
        this.afLabel = undefined;
        this.afAriaLabel = undefined;
        this.afRequired = undefined;
        this.afRequiredText = undefined;
        this.afPlaceholder = undefined;
        this.afAnnounceIfOptional = false;
        this.afAnnounceIfOptionalText = undefined;
        this.afId = randomIdGenerator('digi-form-select');
        this.afName = undefined;
        this.afDescription = undefined;
        this.value = undefined;
        this.afValue = undefined;
        this.afDisableValidation = undefined;
        this.afVariation = FormSelectVariation.MEDIUM;
        this.afValidation = FormSelectValidation.NEUTRAL;
        this.afValidationText = undefined;
        this.afStartSelected = undefined;
        this.afAutofocus = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    getOptions() {
        this.checkIfPlaceholder();
        const options = this._observer.children;
        if (!options || options.length <= 0) {
            logger.warn(`The slot contains no option elements.`, this.hostElement);
            return;
        }
        this.optionItems = [...Array.from(options)]
            .filter((el) => el.tagName.toLowerCase() === 'option')
            .map((el) => {
            return {
                value: el['value'],
                text: el['text']
            };
        });
    }
    checkIfPlaceholder() {
        this.hasPlaceholder = !!this.afPlaceholder;
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
    }
    componentDidLoad() {
        this.getOptions();
        this.afStartSelected &&
            (this.afValue = this.optionItems[this.afStartSelected].value);
        this.afOnReady.emit();
    }
    /**
     * Returnerar en referens till formulärkontrollelementet.
     * @en Returns a reference to the form control element.
     */
    async afMGetFormControlElement() {
        return this._select;
    }
    get cssModifiers() {
        return {
            'digi-form-select--small': this.afVariation === FormSelectVariation.SMALL,
            'digi-form-select--medium': this.afVariation === FormSelectVariation.MEDIUM,
            'digi-form-select--large': this.afVariation === FormSelectVariation.LARGE,
            'digi-form-select--neutral': this.afValidation === FormSelectValidation.NEUTRAL,
            'digi-form-select--success': this.afValidation === FormSelectValidation.SUCCESS,
            'digi-form-select--warning': this.afValidation === FormSelectValidation.WARNING,
            'digi-form-select--error': this.afValidation === FormSelectValidation.ERROR,
            'digi-form-select--empty': !this.afValue &&
                (!this.afValidation ||
                    this.afValidation === FormSelectValidation.NEUTRAL)
        };
    }
    changeHandler(e) {
        if (!this.dirty) {
            this.afOnDirty.emit(e);
            this.dirty = true;
        }
        this.value = this.afValue = e.target.value;
        this.afOnChange.emit(e);
    }
    selectHandler(e) {
        this.value = this.afValue = e.target.value;
        this.afOnSelect.emit(e);
    }
    focusHandler(e) {
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    blurHandler(e) {
        this.afOnBlur.emit(e);
    }
    getSelectedItem(option) {
        return this.afValue == option.value;
    }
    showValidation() {
        return !this.afDisableValidation &&
            this.afValidation !== FormSelectValidation.NEUTRAL &&
            this.afValidationText
            ? true
            : false;
    }
    render() {
        return (h("div", { key: '80a55bf6bd6b4af2bd9b627380b281248c588c72', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '7b4849173af16a76dd2eb26b3e1f4bbde0cf826c', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'dab265a62975bb57f2bdc737c5dff4a59fdac520', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'd02678669ea22fa207afe1747ed966afaf1b92b6', class: "digi-form-select__select-wrapper" }, h("select", { key: 'a626ce1764ce18e00dce72418e80fd5a1d7f75bf', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                ? 'true'
                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '8ccfa77da6aa2e0dbaca7b86e0a340b487bf158e', class: {
                'digi-form-select__select-option': true,
                'digi-form-select__select-option--initial-value': true
            }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
            return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
        })), h("digi-icon-input-select-marker", { key: 'a15c495ace06a9f481475298613fb837a56def0a', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '9ceec78033739588b36efe26a0f3f44ca8eaff71', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                e.stopImmediatePropagation();
                this.getOptions();
            } }, h("slot", { key: 'c986f11387f56a9cd84fa4b75acab4d464196aa3' })), h("div", { key: '004060a10582489279f19b5bcd3d7eb609b8bb68', class: "digi-form-select__footer" }, h("div", { key: 'e674cef46f813cba112998408d54a9c1c3e2bd60', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '4e1e2eb4cce1dcfa5e3bf506c84e9eaf4bde744f', "af-variation": this.afValidation }, this.afValidationText))))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"]
    }; }
    static get style() { return DigiFormSelectStyle0; }
}, [6, "digi-form-select", {
        "afLabel": [1, "af-label"],
        "afAriaLabel": [1, "af-aria-label"],
        "afRequired": [4, "af-required"],
        "afRequiredText": [1, "af-required-text"],
        "afPlaceholder": [1, "af-placeholder"],
        "afAnnounceIfOptional": [4, "af-announce-if-optional"],
        "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
        "afId": [1, "af-id"],
        "afName": [1, "af-name"],
        "afDescription": [1, "af-description"],
        "value": [1],
        "afValue": [1, "af-value"],
        "afDisableValidation": [4, "af-disable-validation"],
        "afVariation": [1, "af-variation"],
        "afValidation": [1, "af-validation"],
        "afValidationText": [1, "af-validation-text"],
        "afStartSelected": [2, "af-start-selected"],
        "afAutofocus": [4, "af-autofocus"],
        "optionItems": [32],
        "dirty": [32],
        "touched": [32],
        "hasPlaceholder": [32],
        "afMGetFormControlElement": [64]
    }, undefined, {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-form-select", "digi-form-label", "digi-form-validation-message", "digi-icon-input-select-marker", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning", "digi-util-mutation-observer"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-form-select":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormSelect);
            }
            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-input-select-marker":
            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;
        case "digi-util-mutation-observer":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { FormSelect as F, defineCustomElement as d };
