'use strict';

var index = require('./index-C2yDXRqP.js');
var index$1 = require('./index-Bp6Dd2i1.js');
var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
var component = require('./component-Csg9MtNK.js');
require('./aria-loader-CfFuAbJn.js');

const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);   --input-height: 48px;    --input-padding-x: 16px;    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --label-floating-scale: 0.85;    --label-minimized-top: -6px;   --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: 8px;  } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--input-border-color-focus);   outline: 2px solid var(--input-border-color-focus);   outline-offset: 2px; }  .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input {   box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color);   outline-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: 14px;    font-family: Router, sans-serif;   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: normal;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0;    transform: translateY(-50%) scale(0.85);    transform-origin: left top;   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 500;  } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: 14px;   outline: none;   padding: 0;   margin: 0;   font-weight: 400;  } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: 12px;    font-size: 12px;   color: var(--helper-text-color);   font-family: Router, sans-serif;   font-weight: 500;  } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: 12px;   font-size: 12px;   color: var(--error-text-color);   font-family: Router, sans-serif;   font-weight: 500; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: 4px; }`;

let inputIdCounter = 0;
const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
    get el() { return index.getElement(this); }
    get validationEl() {
        return this.el;
    }
    lmvzInput;
    internals;
    nativeInputElement;
    inputId = `lmvz-input-${inputIdCounter++}`;
    initialValue = '';
    nativeError = false;
    errorFromProp = false;
    get helperId() {
        return this.helperText ? `${this.inputId}-helper` : undefined;
    }
    get showErrorMessage() {
        return this.error && Boolean(this.errorMessage);
    }
    get errorId() {
        return `${this.inputId}-error`;
    }
    get describedBy() {
        const ids = [];
        if (this.helperId)
            ids.push(this.helperId);
        if (this.showErrorMessage)
            ids.push(this.errorId);
        return ids.length > 0 ? ids.join(' ') : undefined;
    }
    value;
    label;
    helperText;
    placeholder;
    disabled = false;
    readonly = false;
    required = false;
    name;
    type = 'text';
    errorMessage;
    autocomplete;
    inputmode;
    autocorrect;
    autocapitalize;
    spellcheck;
    autofocus = false;
    minlength;
    maxlength;
    pattern;
    min;
    max;
    step;
    form;
    get error() {
        return this.errorFromProp || this.nativeError;
    }
    set error(value) {
        this.errorFromProp = value;
    }
    async setValue(newValue) {
        const input = this.nativeInputElement;
        const val = newValue ?? '';
        if (input) {
            input.value = val;
        }
        this.value = val;
        this.internals.setFormValue?.(val);
        this.lmvzInput.emit(val);
    }
    async focusInput() {
        this.nativeInputElement?.focus();
    }
    async blurInput() {
        this.nativeInputElement?.blur();
    }
    async select() {
        this.nativeInputElement?.select();
    }
    async checkValidity() {
        return this.nativeInputElement?.checkValidity?.() ?? false;
    }
    async reportValidity() {
        return this.nativeInputElement?.reportValidity?.() ?? false;
    }
    async getInputElement() {
        if (!this.nativeInputElement) {
            await new Promise((resolve) => component.componentOnReady(this.el, resolve));
        }
        return Promise.resolve(this.nativeInputElement);
    }
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.lmvzInput = index.createEvent(this, "lmvzInput");
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        this.addController(new reactiveControllerHost.AriaValidationController(this, {
            reValidateOnPropChanges: true,
        }));
    }
    componentWillLoad() {
        this.initialValue = this.value ?? '';
        super.componentWillLoad();
    }
    formAssociatedCallback(form) {
        if (!form)
            return;
        this.internals.setFormValue?.(this.value ?? '');
    }
    formResetCallback() {
        this.internals.setValidity({});
        this.setValue(this.initialValue);
    }
    formStateRestoreCallback(state) {
        this.setValue(state);
    }
    handleValueChange(newValue) {
        if (!this.nativeInputElement)
            return;
        const isInternalChange = this.nativeInputElement.value === newValue;
        if (isInternalChange)
            return;
        this.setValue(newValue);
    }
    handleDisabledChange(disabled) {
        if (disabled && this.nativeInputElement) {
            this.nativeInputElement.blur();
        }
    }
    handleInput = (event) => {
        const input = event.target;
        this.setValue(input.value);
    };
    handleChange = (event) => {
        const input = event.target ?? this.nativeInputElement;
        this.updateNativeError(input);
    };
    handleFocus = () => { };
    handleBlur = (event) => {
        const input = event.target;
        input.reportValidity?.();
    };
    updateNativeError(fromEvent) {
        const input = fromEvent ?? this.nativeInputElement;
        if (!input)
            return;
        this.nativeError = !(input.checkValidity?.() ?? true);
    }
    render() {
        const hasValue = Boolean(this.value);
        const shouldFloatLabel = hasValue || Boolean(this.placeholder);
        return (index.h("div", { key: '3f14adbe321717cdfe305dc623940acb8be194f8', class: index$1.classNames('input-container', {
                'interaction-filled': hasValue,
            }) }, index.h("div", { key: '2cc559cc0ff4da1f8418c510188bcbb93b42da02', class: "input-wrapper" }, index.h("slot", { key: 'b41a5179b6d8651a9b60777718f92b32f80fda89', name: "before-input" }), index.h("div", { key: '4ac81c8d277d6592e1d84f4b3abfffef03843a9c', class: "label-input-group" }, index.h("label", { key: '80b272c3b069a246dcbf26812d2281e436c6cdfa', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'eb00d3be1a3eddd0661df74cfb2d4b95c75f5eea', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '6192c875976e7d21003de29badabd5a910ed0c17', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: '9a908984ecebead7f08bbd88ed57fa8f30a69b67', name: "after-input" })), index.h("div", { key: 'abe658929d955042358ff24ea2267ae5b7b3484d', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '61c689c7d8ab3bbb7c62dc7a227c35441b4bbbd8', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "value": [{
                "handleValueChange": 0
            }],
        "disabled": [{
                "handleDisabledChange": 0
            }]
    }; }
};
LmvzInput.style = lmvzInputCss();

exports.lmvz_input = LmvzInput;
