import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
import { a as FormTextareaVariation, F as FormTextareaValidation } from './form-textarea-variation.enum-05017e8e.js';

const formTextareaCss = ".sc-digi-form-textarea-h{--digi--form-textarea--height--small:4.6875rem;--digi--form-textarea--height--medium:8.4375rem;--digi--form-textarea--height--large:10.3125rem;--digi--form-textarea--height--auto:auto;--digi--form-textarea--border-radius:var(--digi--border-radius--input);--digi--form-textarea--padding:calc(var(--digi--gutter--medium) / 2) var(--digi--gutter--medium);--digi--form-textarea--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-textarea--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-textarea--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-textarea--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-textarea--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-textarea--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-textarea--border--error:var(--digi--border-width--input-validation) solid;--digi--form-textarea--border--success:var(--digi--border-width--input-validation) solid;--digi--form-textarea--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-textarea--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-textarea--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-textarea--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-textarea--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-textarea-h .digi-form-textarea.sc-digi-form-textarea{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-textarea-h .digi-form-textarea--small.sc-digi-form-textarea{--HEIGHT:var(--digi--form-textarea--height--small)}.sc-digi-form-textarea-h .digi-form-textarea--medium.sc-digi-form-textarea{--HEIGHT:var(--digi--form-textarea--height--medium)}.sc-digi-form-textarea-h .digi-form-textarea--large.sc-digi-form-textarea{--HEIGHT:var(--digi--form-textarea--height--large)}.sc-digi-form-textarea-h .digi-form-textarea--neutral.sc-digi-form-textarea{--BORDER:var(--digi--form-textarea--border--neutral);--BORDER-COLOR:var(--digi--form-textarea--border-color--neutral);--BACKGROUND:var(--digi--form-textarea--background--neutral)}.sc-digi-form-textarea-h .digi-form-textarea--empty.sc-digi-form-textarea:not(:focus-within){--BACKGROUND:var(--digi--form-textarea--background--empty)}.sc-digi-form-textarea-h .digi-form-textarea--success.sc-digi-form-textarea{--BORDER:var(--digi--form-textarea--border--success);--BORDER-COLOR:var(--digi--form-textarea--border-color--success);--BACKGROUND:var(--digi--form-textarea--background--success)}.sc-digi-form-textarea-h .digi-form-textarea--warning.sc-digi-form-textarea{--BORDER:var(--digi--form-textarea--border--warning);--BORDER-COLOR:var(--digi--form-textarea--border-color--warning);--BACKGROUND:var(--digi--form-textarea--background--warning)}.sc-digi-form-textarea-h .digi-form-textarea--error.sc-digi-form-textarea{--BORDER:var(--digi--form-textarea--border--error);--BORDER-COLOR:var(--digi--form-textarea--border-color--error);--BACKGROUND:var(--digi--form-textarea--background--error)}.sc-digi-form-textarea-h .digi-form-textarea__content.sc-digi-form-textarea{width:100%}.sc-digi-form-textarea-h .digi-form-textarea__textarea.sc-digi-form-textarea{height:var(--HEIGHT);width:inherit;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-textarea--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-textarea--border-radius);box-sizing:border-box}.sc-digi-form-textarea-h .digi-form-textarea__textarea.sc-digi-form-textarea:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}";
const DigiFormTextareaStyle0 = formTextareaCss;

const FormTextarea = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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.dirty = false;
        this.touched = false;
        this.afLabel = undefined;
        this.afLabelDescription = undefined;
        this.afVariation = FormTextareaVariation.MEDIUM;
        this.afName = undefined;
        this.afId = randomIdGenerator('digi-form-textarea');
        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 = FormTextareaValidation.NEUTRAL;
        this.afValidationText = undefined;
        this.afRole = undefined;
        this.afAriaActivedescendant = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaDescribedby = undefined;
        this.afAutofocus = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    afValidationTextWatch() {
        this.setActiveValidationMessage();
    }
    /**
     * Hämtar en referens till textareaelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the textarea element. Handy for setting focus programmatically.
     */
    async afMGetFormControlElement() {
        return this._textarea;
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
        this.setActiveValidationMessage();
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    setActiveValidationMessage() {
        this.hasActiveValidationMessage = !!this.afValidationText;
    }
    get cssModifiers() {
        return {
            'digi-form-textarea--small': this.afVariation === FormTextareaVariation.SMALL,
            'digi-form-textarea--medium': this.afVariation === FormTextareaVariation.MEDIUM,
            'digi-form-textarea--large': this.afVariation === FormTextareaVariation.LARGE,
            'digi-form-textarea--auto': this.afVariation === FormTextareaVariation.AUTO,
            'digi-form-textarea--neutral': this.afValidation === FormTextareaValidation.NEUTRAL,
            'digi-form-textarea--success': this.afValidation === FormTextareaValidation.SUCCESS,
            'digi-form-textarea--error': this.afValidation === FormTextareaValidation.ERROR,
            'digi-form-textarea--warning': this.afValidation === FormTextareaValidation.WARNING,
            'digi-form-textarea--empty': !this.afValue &&
                (!this.afValidation ||
                    this.afValidation === FormTextareaValidation.NEUTRAL)
        };
    }
    blurHandler(e) {
        if (!this.touched) {
            this.afOnTouched.emit(e);
            this.touched = true;
        }
        this.setActiveValidationMessage();
        this.afOnBlur.emit(e);
    }
    changeHandler(e) {
        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 = e.target.value;
        if (!this.dirty) {
            this.afOnDirty.emit(e);
            this.dirty = true;
        }
        this.setActiveValidationMessage();
        this.afOnInput.emit(e);
    }
    render() {
        return (h("div", { key: 'ac4ef59aadab0cd59312c3ee90af433cc8dba599', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'f79a0da7f49794a323b1d60fcfdf41ddacfbfb31', class: "digi-form-textarea__label" }, h("digi-form-label", { key: 'b87ca17e74883cdfaa5a793287849daffb61b64e', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '3d26738c8b7c5bba0804000b6cdfacb4a609291b', class: "digi-form-textarea__content" }, h("textarea", { key: 'dfa56e656d64450007e71b76ea614a56ab8d2e14', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = 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-invalid": this.afValidation === FormTextareaValidation.ERROR
                ? 'true'
                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '92fb3725c9722259135f55f20bc6ad9fcee69cc0', class: "digi-form-textarea__footer" }, h("div", { key: 'ad4da03fae8fdea6eb3a5b0583ae563d19224416', class: "digi-form-textarea__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '0b41260ef897769e291d3c71da2a45ce032807c4', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
    }
    get hostElement() { return getElement(this); }
    static get watchers() { return {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"],
        "afValidationText": ["afValidationTextWatch"]
    }; }
};
FormTextarea.style = DigiFormTextareaStyle0;

export { FormTextarea as digi_form_textarea };
