import { g as getElement, r as registerInstance, c as createEvent, h } from './index-smGPjoDX.js';
import { c as classNames } from './index-Bt32KzDW.js';
import { a as componentOnReady } from './component-B3JVFwO1.js';
import { R as ReactiveControllerHost, A as AriaValidationController } from './aria-validation-controller-C7nQzCCq.js';
import './_commonjsHelpers-B85MJLTf.js';
import './Effect-D9S7OTyY.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); } .helper-text.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;  } .error-message.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 {
    get el() { return getElement(this); }
    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;
        this.value = input.value = newValue ?? '';
        this.internals.setFormValue?.(newValue);
        this.lmvzInput.emit(newValue);
    }
    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 => componentOnReady(this.el, resolve));
        }
        return Promise.resolve(this.nativeInputElement);
    }
    constructor(hostRef) {
        super();
        registerInstance(this, hostRef);
        this.lmvzInput = 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 AriaValidationController(this, {
            reValidateOnPropChanges: true,
        }));
    }
    componentWillLoad() {
        this.initialValue = this.value;
    }
    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 (h("div", { key: '402189a211eec970a9f5b8fcc551c6c3508bec05', class: classNames('input-container', {
                'interaction-filled': hasValue,
            }) }, h("div", { key: '1cbe6011f14774e1226406ef4fe301fd94338444', class: "input-wrapper" }, h("slot", { key: 'ea0f30124315c88e9721bb4457126bd6cf18110a', name: "before-input" }), h("div", { key: 'f630b5f3a33a961f94b5a782b0ce6b4d49d1958c', class: "label-input-group" }, h("label", { key: 'dbb3fe066ebf93f7fcbe6973a1e37685d7206888', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '7c1a2458b66becb45c730bfe3ff0c570293f702f', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '14b14457e200d20faf9053848662743dfe1cf417', 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 })), h("slot", { key: '4b530738ff7404eb1bcecc10a0388570e2243cf3', name: "after-input" })), this.helperText && (h("div", { key: 'f1a287047e9b4d58aa90af157d50b3d564555e9b', id: this.helperId, class: "helper-text" }, this.helperText)), this.showErrorMessage && (h("div", { key: '2a25c4a88a63363cdd814f1d4fead5e8a238621b', id: this.errorId, class: "error-message", role: "alert" }, this.errorMessage))));
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "value": [{
                "handleValueChange": 0
            }],
        "disabled": [{
                "handleDisabledChange": 0
            }]
    }; }
};
LmvzInput.style = lmvzInputCss();

export { LmvzInput as lmvz_input };
