import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { b as FormInputType, a as FormInputMode, F as FormInputButtonVariation, d as FormInputVariation, c as FormInputValidation } from './p-c8429245.js';
import { d as defineCustomElement$5 } from './p-d1fc55fd.js';
import { d as defineCustomElement$4 } from './p-f630b5d3.js';
import { d as defineCustomElement$3 } from './p-e6a40b0a.js';
import { d as defineCustomElement$2 } from './p-013b272d.js';
import { d as defineCustomElement$1 } from './p-5bbb5a67.js';

const formInputCss = ".sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}";
const DigiFormInputStyle0 = formInputCss;

const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
    constructor() {
        super();
        this.__registerHost();
        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.afOnDirty = createEvent(this, "afOnDirty", 7);
        this.afOnTouched = createEvent(this, "afOnTouched", 7);
        this.afOnReady = createEvent(this, "afOnReady", 3);
        this.hasActiveValidationMessage = false;
        this.hasButton = undefined;
        this.dirty = false;
        this.touched = false;
        this.afLabel = undefined;
        this.afLabelDescription = undefined;
        this.afType = FormInputType.TEXT;
        this.afInputmode = FormInputMode.DEFAULT;
        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
        this.afAutofocus = undefined;
        this.afVariation = FormInputVariation.MEDIUM;
        this.afName = undefined;
        this.afId = randomIdGenerator('digi-form-input');
        this.afMaxlength = undefined;
        this.afMinlength = undefined;
        this.afRequired = undefined;
        this.afRequiredText = undefined;
        this.afAnnounceIfOptional = false;
        this.afAnnounceIfOptionalText = undefined;
        this.value = undefined;
        this.afValue = undefined;
        this.afValidation = FormInputValidation.NEUTRAL;
        this.afValidationText = undefined;
        this.afRole = undefined;
        this.afAutocomplete = undefined;
        this.afMin = undefined;
        this.afMax = undefined;
        this.afList = undefined;
        this.afStep = undefined;
        this.afDirname = undefined;
        this.afAriaAutocomplete = undefined;
        this.afAriaActivedescendant = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaDescribedby = undefined;
        this.afAriaControls = undefined;
        this.afTrimValue = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    afValidationTextWatch() {
        this.setActiveValidationMessage();
    }
    /**
     * 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() {
        return this._input;
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
        this.setActiveValidationMessage();
        this.setHasButton();
    }
    componentWillUpdate() {
        this.setHasButton();
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    setActiveValidationMessage() {
        this.hasActiveValidationMessage = !!this.afValidationText;
    }
    get cssModifiers() {
        return {
            'digi-form-input--small': this.afVariation === FormInputVariation.SMALL,
            'digi-form-input--medium': this.afVariation === FormInputVariation.MEDIUM,
            'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
            'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
            'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
            'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
            'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
            [`digi-form-input--has-button-${this.hasButton}`]: true,
            'digi-form-input--empty': !this.afValue &&
                (!this.afValidation ||
                    this.afValidation === FormInputValidation.NEUTRAL)
        };
    }
    blurHandler(e) {
        const trimableTypes = [
            FormInputType.TEXT,
            FormInputType.EMAIL,
            FormInputType.SEARCH,
            FormInputType.TEL,
            FormInputType.URL
        ];
        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
        if (shouldTrim && typeof e.target.value === 'string') {
            const trimmedValue = e.target.value.trim();
            if (trimmedValue !== e.target.value) {
                this.afValue = this.value = trimmedValue;
                if (this._input) {
                    this._input.value = trimmedValue;
                }
                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
                this.afOnInput.emit(e);
            }
        }
        if (!this.touched) {
            this.afOnTouched.emit(e);
            this.touched = true;
        }
        this.afOnBlur.emit(e);
    }
    changeHandler(e) {
        this.setActiveValidationMessage();
        this.afOnChange.emit(e);
    }
    focusHandler(e) {
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    keyupHandler(e) {
        this.afOnKeyup.emit(e);
    }
    inputHandler(e) {
        this.afValue = this.value =
            this.afType === FormInputType.NUMBER
                ? parseFloat(e.target.value)
                : e.target.value;
        if (!this.dirty) {
            this.afOnDirty.emit(e);
            this.dirty = true;
        }
        this.setActiveValidationMessage();
        this.afOnInput.emit(e);
    }
    setHasButton() {
        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
    }
    render() {
        return (h("div", { key: 'c144067dc98520574af894358a93e1ef2c2dd30d', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '0c94fd4af85ce581b6a00d7fdc0175f0e712a900', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'a68f4616a4d29db42a91fce5001c41914d53cebf', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'de8e95035fd38d1fe070bc5a2147ca33f6cc7209', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR ? 'true' : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
            ? {}
            : { inputmode: this.afInputmode }))), h("slot", { key: 'a2145c6435f1b5f881fd10b96b5f616e51dad2b1', name: "button" })), h("div", { key: '2fb74cafcb99ba64d9c9bce3afbb8723f71f0966', class: "digi-form-input__footer" }, h("div", { key: '7023496623fdf351b5b2cea0b053f5ffdfb190b2', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '07b6ec22bfeba9d27591de01003fd7c1bd2bda3a', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"],
        "afValidationText": ["afValidationTextWatch"]
    }; }
    static get style() { return DigiFormInputStyle0; }
}, [6, "digi-form-input", {
        "afLabel": [1, "af-label"],
        "afLabelDescription": [1, "af-label-description"],
        "afType": [1, "af-type"],
        "afInputmode": [1, "af-inputmode"],
        "afButtonVariation": [1, "af-button-variation"],
        "afAutofocus": [4, "af-autofocus"],
        "afVariation": [1, "af-variation"],
        "afName": [1, "af-name"],
        "afId": [1, "af-id"],
        "afMaxlength": [2, "af-maxlength"],
        "afMinlength": [2, "af-minlength"],
        "afRequired": [4, "af-required"],
        "afRequiredText": [1, "af-required-text"],
        "afAnnounceIfOptional": [4, "af-announce-if-optional"],
        "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
        "value": [8],
        "afValue": [8, "af-value"],
        "afValidation": [1, "af-validation"],
        "afValidationText": [1, "af-validation-text"],
        "afRole": [1, "af-role"],
        "afAutocomplete": [1, "af-autocomplete"],
        "afMin": [1, "af-min"],
        "afMax": [1, "af-max"],
        "afList": [1, "af-list"],
        "afStep": [1, "af-step"],
        "afDirname": [1, "af-dirname"],
        "afAriaAutocomplete": [1, "af-aria-autocomplete"],
        "afAriaActivedescendant": [1, "af-aria-activedescendant"],
        "afAriaLabelledby": [1, "af-aria-labelledby"],
        "afAriaDescribedby": [1, "af-aria-describedby"],
        "afAriaControls": [1, "af-aria-controls"],
        "afTrimValue": [4, "af-trim-value"],
        "hasActiveValidationMessage": [32],
        "hasButton": [32],
        "dirty": [32],
        "touched": [32],
        "afMGetFormControlElement": [64]
    }, undefined, {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"],
        "afValidationText": ["afValidationTextWatch"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-form-input", "digi-form-label", "digi-form-validation-message", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-form-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormInput);
            }
            break;
        case "digi-form-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-form-validation-message":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-validation-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-validation-success":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "digi-icon-validation-warning":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { FormInput as F, defineCustomElement as d };
