import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, queryAssignedElements, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { isDisabled, setDisabled } from '../../lib/disabled.js';
import { UiElement } from '../UiElement.js';
import '../icon-button/ui-icon-button.js';
import '../icons/ui-icon.js';
const floatTypes = ['date', 'color', 'datetime-local', 'file', 'month', 'time', 'week'];
let Input = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    let _set_disabled_decorators;
    let _name_decorators;
    let _name_initializers = [];
    let _name_extraInitializers = [];
    let _value_decorators;
    let _value_initializers = [];
    let _value_extraInitializers = [];
    let _required_decorators;
    let _required_initializers = [];
    let _required_extraInitializers = [];
    let _invalid_decorators;
    let _invalid_initializers = [];
    let _invalid_extraInitializers = [];
    let _invalidText_decorators;
    let _invalidText_initializers = [];
    let _invalidText_extraInitializers = [];
    let _label_decorators;
    let _label_initializers = [];
    let _label_extraInitializers = [];
    let _hasPrefix_decorators;
    let _hasPrefix_initializers = [];
    let _hasPrefix_extraInitializers = [];
    let _hasSuffix_decorators;
    let _hasSuffix_initializers = [];
    let _hasSuffix_extraInitializers = [];
    let _supportingText_decorators;
    let _supportingText_initializers = [];
    let _supportingText_extraInitializers = [];
    let _textDirection_decorators;
    let _textDirection_initializers = [];
    let _textDirection_extraInitializers = [];
    let _noFloating_decorators;
    let _noFloating_initializers = [];
    let _noFloating_extraInitializers = [];
    let _max_decorators;
    let _max_initializers = [];
    let _max_extraInitializers = [];
    let _maxLength_decorators;
    let _maxLength_initializers = [];
    let _maxLength_extraInitializers = [];
    let _min_decorators;
    let _min_initializers = [];
    let _min_extraInitializers = [];
    let _minLength_decorators;
    let _minLength_initializers = [];
    let _minLength_extraInitializers = [];
    let _pattern_decorators;
    let _pattern_initializers = [];
    let _pattern_extraInitializers = [];
    let _placeholder_decorators;
    let _placeholder_initializers = [];
    let _placeholder_extraInitializers = [];
    let _readOnly_decorators;
    let _readOnly_initializers = [];
    let _readOnly_extraInitializers = [];
    let _autocomplete_decorators;
    let _autocomplete_initializers = [];
    let _autocomplete_extraInitializers = [];
    let _inputMode_decorators;
    let _inputMode_initializers = [];
    let _inputMode_extraInitializers = [];
    let _accept_decorators;
    let _accept_initializers = [];
    let _accept_extraInitializers = [];
    let _multiple_decorators;
    let _multiple_initializers = [];
    let _multiple_extraInitializers = [];
    let _size_decorators;
    let _size_initializers = [];
    let _size_extraInitializers = [];
    let _step_decorators;
    let _step_initializers = [];
    let _step_extraInitializers = [];
    let _dirty_decorators;
    let _dirty_initializers = [];
    let _dirty_extraInitializers = [];
    let _focused_decorators;
    let _focused_initializers = [];
    let _focused_extraInitializers = [];
    let _prefixes_decorators;
    let _prefixes_initializers = [];
    let _prefixes_extraInitializers = [];
    let _suffixes_decorators;
    let _suffixes_initializers = [];
    let _suffixes_extraInitializers = [];
    let _nativeErrorText_decorators;
    let _nativeErrorText_initializers = [];
    let _nativeErrorText_extraInitializers = [];
    let _nativeError_decorators;
    let _nativeError_initializers = [];
    let _nativeError_extraInitializers = [];
    let _ariaAutoComplete_decorators;
    let _ariaAutoComplete_initializers = [];
    let _ariaAutoComplete_extraInitializers = [];
    let _ariaControls_decorators;
    let _ariaControls_initializers = [];
    let _ariaControls_extraInitializers = [];
    let _ariaActiveDescendant_decorators;
    let _ariaActiveDescendant_initializers = [];
    let _ariaActiveDescendant_extraInitializers = [];
    let _ariaExpanded_decorators;
    let _ariaExpanded_initializers = [];
    let _ariaExpanded_extraInitializers = [];
    let _ariaLabel_decorators;
    let _ariaLabel_initializers = [];
    let _ariaLabel_extraInitializers = [];
    let _ariaLabelledBy_decorators;
    let _ariaLabelledBy_initializers = [];
    let _ariaLabelledBy_extraInitializers = [];
    let _dataRole_decorators;
    let _dataRole_initializers = [];
    let _dataRole_extraInitializers = [];
    let _refreshErrorAlert_decorators;
    let _refreshErrorAlert_initializers = [];
    let _refreshErrorAlert_extraInitializers = [];
    let _list_decorators;
    let _list_initializers = [];
    let _list_extraInitializers = [];
    return class Input extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _type_decorators = [property({ type: String, reflect: true })];
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            _name_decorators = [property({ type: String })];
            _value_decorators = [property({ type: String })];
            _required_decorators = [property({ reflect: true, type: Boolean })];
            _invalid_decorators = [property({ type: Boolean, reflect: true })];
            _invalidText_decorators = [property({ type: String })];
            _label_decorators = [property({ type: String })];
            _hasPrefix_decorators = [property({ type: Boolean })];
            _hasSuffix_decorators = [property({ type: Boolean })];
            _supportingText_decorators = [property({ type: String })];
            _textDirection_decorators = [property({ type: String })];
            _noFloating_decorators = [property({ type: Boolean })];
            _max_decorators = [property({ type: String })];
            _maxLength_decorators = [property({ type: Number })];
            _min_decorators = [property({ type: String })];
            _minLength_decorators = [property({ type: Number })];
            _pattern_decorators = [property({ type: String })];
            _placeholder_decorators = [property({ type: String })];
            _readOnly_decorators = [property({ type: Boolean, reflect: true })];
            _autocomplete_decorators = [property({ type: String })];
            _inputMode_decorators = [property({ type: String })];
            _accept_decorators = [property({ type: String })];
            _multiple_decorators = [property({ type: Boolean })];
            _size_decorators = [property({ type: Number })];
            _step_decorators = [property({ type: String })];
            _dirty_decorators = [state()];
            _focused_decorators = [state()];
            _prefixes_decorators = [queryAssignedElements({ slot: 'prefix' })];
            _suffixes_decorators = [queryAssignedElements({ slot: 'suffix' })];
            _nativeErrorText_decorators = [state()];
            _nativeError_decorators = [state()];
            _ariaAutoComplete_decorators = [property({ type: String, attribute: 'data-aria-autocomplete', noAccessor: true })];
            _ariaControls_decorators = [property({ type: String, attribute: 'data-aria-controls', noAccessor: true })];
            _ariaActiveDescendant_decorators = [property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true })];
            _ariaExpanded_decorators = [property({ type: String, attribute: 'data-aria-expanded', noAccessor: true })];
            _ariaLabel_decorators = [property({ type: String, attribute: 'data-aria-label', noAccessor: true })];
            _ariaLabelledBy_decorators = [property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true })];
            _dataRole_decorators = [property({ type: String, attribute: 'data-role', noAccessor: true })];
            _refreshErrorAlert_decorators = [state()];
            _list_decorators = [property({ type: Array })];
            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
            __esDecorate(this, null, _invalid_decorators, { kind: "accessor", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
            __esDecorate(this, null, _invalidText_decorators, { kind: "accessor", name: "invalidText", static: false, private: false, access: { has: obj => "invalidText" in obj, get: obj => obj.invalidText, set: (obj, value) => { obj.invalidText = value; } }, metadata: _metadata }, _invalidText_initializers, _invalidText_extraInitializers);
            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
            __esDecorate(this, null, _hasPrefix_decorators, { kind: "accessor", name: "hasPrefix", static: false, private: false, access: { has: obj => "hasPrefix" in obj, get: obj => obj.hasPrefix, set: (obj, value) => { obj.hasPrefix = value; } }, metadata: _metadata }, _hasPrefix_initializers, _hasPrefix_extraInitializers);
            __esDecorate(this, null, _hasSuffix_decorators, { kind: "accessor", name: "hasSuffix", static: false, private: false, access: { has: obj => "hasSuffix" in obj, get: obj => obj.hasSuffix, set: (obj, value) => { obj.hasSuffix = value; } }, metadata: _metadata }, _hasSuffix_initializers, _hasSuffix_extraInitializers);
            __esDecorate(this, null, _supportingText_decorators, { kind: "accessor", name: "supportingText", static: false, private: false, access: { has: obj => "supportingText" in obj, get: obj => obj.supportingText, set: (obj, value) => { obj.supportingText = value; } }, metadata: _metadata }, _supportingText_initializers, _supportingText_extraInitializers);
            __esDecorate(this, null, _textDirection_decorators, { kind: "accessor", name: "textDirection", static: false, private: false, access: { has: obj => "textDirection" in obj, get: obj => obj.textDirection, set: (obj, value) => { obj.textDirection = value; } }, metadata: _metadata }, _textDirection_initializers, _textDirection_extraInitializers);
            __esDecorate(this, null, _noFloating_decorators, { kind: "accessor", name: "noFloating", static: false, private: false, access: { has: obj => "noFloating" in obj, get: obj => obj.noFloating, set: (obj, value) => { obj.noFloating = value; } }, metadata: _metadata }, _noFloating_initializers, _noFloating_extraInitializers);
            __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
            __esDecorate(this, null, _maxLength_decorators, { kind: "accessor", name: "maxLength", static: false, private: false, access: { has: obj => "maxLength" in obj, get: obj => obj.maxLength, set: (obj, value) => { obj.maxLength = value; } }, metadata: _metadata }, _maxLength_initializers, _maxLength_extraInitializers);
            __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
            __esDecorate(this, null, _minLength_decorators, { kind: "accessor", name: "minLength", static: false, private: false, access: { has: obj => "minLength" in obj, get: obj => obj.minLength, set: (obj, value) => { obj.minLength = value; } }, metadata: _metadata }, _minLength_initializers, _minLength_extraInitializers);
            __esDecorate(this, null, _pattern_decorators, { kind: "accessor", name: "pattern", static: false, private: false, access: { has: obj => "pattern" in obj, get: obj => obj.pattern, set: (obj, value) => { obj.pattern = value; } }, metadata: _metadata }, _pattern_initializers, _pattern_extraInitializers);
            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
            __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
            __esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
            __esDecorate(this, null, _inputMode_decorators, { kind: "accessor", name: "inputMode", static: false, private: false, access: { has: obj => "inputMode" in obj, get: obj => obj.inputMode, set: (obj, value) => { obj.inputMode = value; } }, metadata: _metadata }, _inputMode_initializers, _inputMode_extraInitializers);
            __esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
            __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
            __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
            __esDecorate(this, null, _dirty_decorators, { kind: "accessor", name: "dirty", static: false, private: false, access: { has: obj => "dirty" in obj, get: obj => obj.dirty, set: (obj, value) => { obj.dirty = value; } }, metadata: _metadata }, _dirty_initializers, _dirty_extraInitializers);
            __esDecorate(this, null, _focused_decorators, { kind: "accessor", name: "focused", static: false, private: false, access: { has: obj => "focused" in obj, get: obj => obj.focused, set: (obj, value) => { obj.focused = value; } }, metadata: _metadata }, _focused_initializers, _focused_extraInitializers);
            __esDecorate(this, null, _prefixes_decorators, { kind: "accessor", name: "prefixes", static: false, private: false, access: { has: obj => "prefixes" in obj, get: obj => obj.prefixes, set: (obj, value) => { obj.prefixes = value; } }, metadata: _metadata }, _prefixes_initializers, _prefixes_extraInitializers);
            __esDecorate(this, null, _suffixes_decorators, { kind: "accessor", name: "suffixes", static: false, private: false, access: { has: obj => "suffixes" in obj, get: obj => obj.suffixes, set: (obj, value) => { obj.suffixes = value; } }, metadata: _metadata }, _suffixes_initializers, _suffixes_extraInitializers);
            __esDecorate(this, null, _nativeErrorText_decorators, { kind: "accessor", name: "nativeErrorText", static: false, private: false, access: { has: obj => "nativeErrorText" in obj, get: obj => obj.nativeErrorText, set: (obj, value) => { obj.nativeErrorText = value; } }, metadata: _metadata }, _nativeErrorText_initializers, _nativeErrorText_extraInitializers);
            __esDecorate(this, null, _nativeError_decorators, { kind: "accessor", name: "nativeError", static: false, private: false, access: { has: obj => "nativeError" in obj, get: obj => obj.nativeError, set: (obj, value) => { obj.nativeError = value; } }, metadata: _metadata }, _nativeError_initializers, _nativeError_extraInitializers);
            __esDecorate(this, null, _ariaAutoComplete_decorators, { kind: "accessor", name: "ariaAutoComplete", static: false, private: false, access: { has: obj => "ariaAutoComplete" in obj, get: obj => obj.ariaAutoComplete, set: (obj, value) => { obj.ariaAutoComplete = value; } }, metadata: _metadata }, _ariaAutoComplete_initializers, _ariaAutoComplete_extraInitializers);
            __esDecorate(this, null, _ariaControls_decorators, { kind: "accessor", name: "ariaControls", static: false, private: false, access: { has: obj => "ariaControls" in obj, get: obj => obj.ariaControls, set: (obj, value) => { obj.ariaControls = value; } }, metadata: _metadata }, _ariaControls_initializers, _ariaControls_extraInitializers);
            __esDecorate(this, null, _ariaActiveDescendant_decorators, { kind: "accessor", name: "ariaActiveDescendant", static: false, private: false, access: { has: obj => "ariaActiveDescendant" in obj, get: obj => obj.ariaActiveDescendant, set: (obj, value) => { obj.ariaActiveDescendant = value; } }, metadata: _metadata }, _ariaActiveDescendant_initializers, _ariaActiveDescendant_extraInitializers);
            __esDecorate(this, null, _ariaExpanded_decorators, { kind: "accessor", name: "ariaExpanded", static: false, private: false, access: { has: obj => "ariaExpanded" in obj, get: obj => obj.ariaExpanded, set: (obj, value) => { obj.ariaExpanded = value; } }, metadata: _metadata }, _ariaExpanded_initializers, _ariaExpanded_extraInitializers);
            __esDecorate(this, null, _ariaLabel_decorators, { kind: "accessor", name: "ariaLabel", static: false, private: false, access: { has: obj => "ariaLabel" in obj, get: obj => obj.ariaLabel, set: (obj, value) => { obj.ariaLabel = value; } }, metadata: _metadata }, _ariaLabel_initializers, _ariaLabel_extraInitializers);
            __esDecorate(this, null, _ariaLabelledBy_decorators, { kind: "accessor", name: "ariaLabelledBy", static: false, private: false, access: { has: obj => "ariaLabelledBy" in obj, get: obj => obj.ariaLabelledBy, set: (obj, value) => { obj.ariaLabelledBy = value; } }, metadata: _metadata }, _ariaLabelledBy_initializers, _ariaLabelledBy_extraInitializers);
            __esDecorate(this, null, _dataRole_decorators, { kind: "accessor", name: "dataRole", static: false, private: false, access: { has: obj => "dataRole" in obj, get: obj => obj.dataRole, set: (obj, value) => { obj.dataRole = value; } }, metadata: _metadata }, _dataRole_initializers, _dataRole_extraInitializers);
            __esDecorate(this, null, _refreshErrorAlert_decorators, { kind: "accessor", name: "refreshErrorAlert", static: false, private: false, access: { has: obj => "refreshErrorAlert" in obj, get: obj => obj.refreshErrorAlert, set: (obj, value) => { obj.refreshErrorAlert = value; } }, metadata: _metadata }, _refreshErrorAlert_initializers, _refreshErrorAlert_extraInitializers);
            __esDecorate(this, null, _list_decorators, { kind: "accessor", name: "list", static: false, private: false, access: { has: obj => "list" in obj, get: obj => obj.list, set: (obj, value) => { obj.list = value; } }, metadata: _metadata }, _list_initializers, _list_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #_userInteracted = __runInitializers(this, _instanceExtraInitializers);
        // static override shadowRootOptions: ShadowRootInit = {mode: 'open', delegatesFocus: true};
        static formAssociated = true;
        #_internals = this.attachInternals();
        get form() {
            return this.#_internals && this.#_internals.form;
        }
        #type_accessor_storage = __runInitializers(this, _type_initializers, void 0);
        /**
         * @attribute
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        /**
         * Disables the input.
         * @attribute
         */
        get disabled() {
            return isDisabled(this);
        }
        set disabled(value) {
            const old = isDisabled(this);
            setDisabled(this, value);
            this.requestUpdate('disabled', old);
            this._updateFormValue();
            if (value) {
                this.dataset.tabindex = this.getAttribute('tabindex') || '0';
                this.removeAttribute('tabindex');
            }
            else {
                const index = this.dataset.tabindex || '0';
                this.setAttribute('tabindex', index);
                this.blur();
            }
        }
        #name_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _name_initializers, void 0));
        /**
         * The name of the form control, submitted as a pair with the control's value as part of the form data.
         * @attribute
         */
        get name() { return this.#name_accessor_storage; }
        set name(value) { this.#name_accessor_storage = value; }
        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''
        /**
         * Set to true to mark the input element as required.
         * @attribute
         */
        ));
        /**
         * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
         * and the reported value is the `value` of the value attribute.
         * If the `value` is not otherwise specified, it is the string `on` by default.
         * @attribute
         */
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        #required_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _required_initializers, void 0));
        /**
         * Set to true to mark the input element as required.
         * @attribute
         */
        get required() { return this.#required_accessor_storage; }
        set required(value) { this.#required_accessor_storage = value; }
        #invalid_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, void 0));
        /**
         * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes
         * it also exposes an attribute to style the element as invalid. This attribute changes
         * when the element validation is performed.
         *
         * Calling `reportValidity()` will automatically update `invalid`.
         * @attribute
         */
        get invalid() { return this.#invalid_accessor_storage; }
        set invalid(value) { this.#invalid_accessor_storage = value; }
        #invalidText_accessor_storage = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _invalidText_initializers, ''
        /**
         * The label to be rendered with the input.
         * @attribute
         */
        ));
        /**
         * The error message that replaces supporting text when `error` is true. If
         * `errorText` is an empty string, then the supporting text will continue to
         * show.
         *
         * Calling `reportValidity()` will automatically update `errorText` to the
         * native `validationMessage`.
         * @attribute
         */
        get invalidText() { return this.#invalidText_accessor_storage; }
        set invalidText(value) { this.#invalidText_accessor_storage = value; }
        #label_accessor_storage = (__runInitializers(this, _invalidText_extraInitializers), __runInitializers(this, _label_initializers, void 0));
        /**
         * The label to be rendered with the input.
         * @attribute
         */
        get label() { return this.#label_accessor_storage; }
        set label(value) { this.#label_accessor_storage = value; }
        #hasPrefix_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _hasPrefix_initializers, false
        /**
         * Whether or not the text field has a trailing icon. Used for SSR.
         * @attribute
         */
        ));
        /**
         * Whether or not the text field has a leading icon. Used for SSR.
         * @attribute
         */
        get hasPrefix() { return this.#hasPrefix_accessor_storage; }
        set hasPrefix(value) { this.#hasPrefix_accessor_storage = value; }
        #hasSuffix_accessor_storage = (__runInitializers(this, _hasPrefix_extraInitializers), __runInitializers(this, _hasSuffix_initializers, false
        /**
         * Conveys additional information below the text field, such as how it should
         * be used.
         * @attribute
         */
        ));
        /**
         * Whether or not the text field has a trailing icon. Used for SSR.
         * @attribute
         */
        get hasSuffix() { return this.#hasSuffix_accessor_storage; }
        set hasSuffix(value) { this.#hasSuffix_accessor_storage = value; }
        #supportingText_accessor_storage = (__runInitializers(this, _hasSuffix_extraInitializers), __runInitializers(this, _supportingText_initializers, ''
        /**
         * Override the input text CSS `direction`. Useful for RTL languages that use
         * LTR notation for fractions.
         * @attribute
         */
        ));
        /**
         * Conveys additional information below the text field, such as how it should
         * be used.
         * @attribute
         */
        get supportingText() { return this.#supportingText_accessor_storage; }
        set supportingText(value) { this.#supportingText_accessor_storage = value; }
        #textDirection_accessor_storage = (__runInitializers(this, _supportingText_extraInitializers), __runInitializers(this, _textDirection_initializers, ''
        /**
         * When set the label of the input disappears after input rather than float over the input.
         * @attribute
         */
        ));
        /**
         * Override the input text CSS `direction`. Useful for RTL languages that use
         * LTR notation for fractions.
         * @attribute
         */
        get textDirection() { return this.#textDirection_accessor_storage; }
        set textDirection(value) { this.#textDirection_accessor_storage = value; }
        #noFloating_accessor_storage = (__runInitializers(this, _textDirection_extraInitializers), __runInitializers(this, _noFloating_initializers, void 0));
        /**
         * When set the label of the input disappears after input rather than float over the input.
         * @attribute
         */
        get noFloating() { return this.#noFloating_accessor_storage; }
        set noFloating(value) { this.#noFloating_accessor_storage = value; }
        #max_accessor_storage = (__runInitializers(this, _noFloating_extraInitializers), __runInitializers(this, _max_initializers, ''
        /**
         * The maximum number of characters a user can enter into the text field. Set
         * to -1 for none.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
         * @attribute
         */
        ));
        /**
         * Defines the greatest value in the range of permitted values.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
         * @attribute
         */
        get max() { return this.#max_accessor_storage; }
        set max(value) { this.#max_accessor_storage = value; }
        #maxLength_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _maxLength_initializers, -1
        /**
         * Defines the most negative value in the range of permitted values.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
         * @attribute
         */
        ));
        /**
         * The maximum number of characters a user can enter into the text field. Set
         * to -1 for none.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
         * @attribute
         */
        get maxLength() { return this.#maxLength_accessor_storage; }
        set maxLength(value) { this.#maxLength_accessor_storage = value; }
        #min_accessor_storage = (__runInitializers(this, _maxLength_extraInitializers), __runInitializers(this, _min_initializers, ''
        /**
         * The minimum number of characters a user can enter into the text field. Set
         * to -1 for none.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
         * @attribute
         */
        ));
        /**
         * Defines the most negative value in the range of permitted values.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
         * @attribute
         */
        get min() { return this.#min_accessor_storage; }
        set min(value) { this.#min_accessor_storage = value; }
        #minLength_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _minLength_initializers, -1
        /**
         * A regular expression that the text field's value must match to pass
         * constraint validation.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
         * @attribute
         */
        ));
        /**
         * The minimum number of characters a user can enter into the text field. Set
         * to -1 for none.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
         * @attribute
         */
        get minLength() { return this.#minLength_accessor_storage; }
        set minLength(value) { this.#minLength_accessor_storage = value; }
        #pattern_accessor_storage = (__runInitializers(this, _minLength_extraInitializers), __runInitializers(this, _pattern_initializers, ''
        /**
         * @attribute
         */
        ));
        /**
         * A regular expression that the text field's value must match to pass
         * constraint validation.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
         * @attribute
         */
        get pattern() { return this.#pattern_accessor_storage; }
        set pattern(value) { this.#pattern_accessor_storage = value; }
        #placeholder_accessor_storage = (__runInitializers(this, _pattern_extraInitializers), __runInitializers(this, _placeholder_initializers, ''
        /**
         * Indicates whether or not a user should be able to edit the text field's
         * value.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
         *
         * @attribute
         */
        ));
        /**
         * @attribute
         */
        get placeholder() { return this.#placeholder_accessor_storage; }
        set placeholder(value) { this.#placeholder_accessor_storage = value; }
        #readOnly_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readOnly_initializers, false
        /**
         * Bind the `<input>`'s `autocomplete` property.
         * @default off
         * @attribute
         */
        ));
        /**
         * Indicates whether or not a user should be able to edit the text field's
         * value.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
         *
         * @attribute
         */
        get readOnly() { return this.#readOnly_accessor_storage; }
        set readOnly(value) { this.#readOnly_accessor_storage = value; }
        #autocomplete_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _autocomplete_initializers, 'off'
        /**
         * Binds this to the `<input>`'s `inputMode` property.
         * @attribute
         */
        ));
        /**
         * Bind the `<input>`'s `autocomplete` property.
         * @default off
         * @attribute
         */
        get autocomplete() { return this.#autocomplete_accessor_storage; }
        set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
        #inputMode_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _inputMode_initializers, ''
        /**
         * Binds this to the `<input>`'s `autocapitalize` property.
         *
         * Possible values are:
         *
         * - `off` or `none`: No auto-capitalization is applied (all letters default to lowercase)
         * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
         *  all other letters default to lowercase
         * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
         * - `characters`: All letters should default to uppercase
         *
         * @default off
         * @attr
         */
        ));
        /**
         * Binds this to the `<input>`'s `inputMode` property.
         * @attribute
         */
        get inputMode() { return this.#inputMode_accessor_storage; }
        set inputMode(value) { this.#inputMode_accessor_storage = value; }
        /**
         * Binds this to the `<input>`'s `autocapitalize` property.
         *
         * Possible values are:
         *
         * - `off` or `none`: No auto-capitalization is applied (all letters default to lowercase)
         * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
         *  all other letters default to lowercase
         * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
         * - `characters`: All letters should default to uppercase
         *
         * @default off
         * @attr
         */
        autocapitalize = (__runInitializers(this, _inputMode_extraInitializers), 'off');
        #accept_accessor_storage = __runInitializers(this, _accept_initializers, void 0);
        /**
         * Binds this to the `<input>`'s `accept` property,
         * used with type=file.
         * @attribute
         */
        get accept() { return this.#accept_accessor_storage; }
        set accept(value) { this.#accept_accessor_storage = value; }
        #multiple_accessor_storage = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _multiple_initializers, void 0));
        /**
         * Binds this to the`<input>`'s `multiple` property,
         * used with type=file.
         * @attribute
         */
        get multiple() { return this.#multiple_accessor_storage; }
        set multiple(value) { this.#multiple_accessor_storage = value; }
        #size_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _size_initializers, void 0));
        /**
         * Binds this to the `<input>`'s `size` property.
         * @attribute
         */
        get size() { return this.#size_accessor_storage; }
        set size(value) { this.#size_accessor_storage = value; }
        pendingSetters = (__runInitializers(this, _size_extraInitializers), new Map());
        setNativeValue(key, value) {
            const { input } = this;
            if (input) {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                ;
                input[key] = value;
            }
            else {
                this.pendingSetters.set(key, value);
            }
        }
        getNativeValue(key) {
            const { input } = this;
            if (input) {
                return input[key];
            }
            return this.pendingSetters.get(key) || null;
        }
        /**
         * Gets or sets the direction in which selection occurred.
         */
        get selectionDirection() {
            return this.getNativeValue('selectionDirection');
        }
        set selectionDirection(value) {
            this.setNativeValue('selectionDirection', value);
        }
        /**
         * Gets or sets the end position or offset of a text selection.
         */
        get selectionEnd() {
            return this.getNativeValue('selectionEnd');
        }
        set selectionEnd(value) {
            this.setNativeValue('selectionEnd', value);
        }
        /**
         * Gets or sets the starting position or offset of a text selection.
         */
        get selectionStart() {
            return this.getNativeValue('selectionStart');
        }
        set selectionStart(value) {
            this.setNativeValue('selectionStart', value);
        }
        #step_accessor_storage = __runInitializers(this, _step_initializers, ''
        /**
         * Returns the native validation error message that would be displayed upon
         * calling `reportValidity()`.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
         */
        );
        /**
         * Returns or sets the element's step attribute, which works with min and max
         * to limit the increments at which a numeric or date-time value can be set.
         *
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
         * @attribute
         */
        get step() { return this.#step_accessor_storage; }
        set step(value) { this.#step_accessor_storage = value; }
        /**
         * Returns the native validation error message that would be displayed upon
         * calling `reportValidity()`.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
         */
        get validationMessage() {
            return this.getNativeValue('validationMessage') ?? '';
        }
        /**
         * Returns a ValidityState object that represents the validity states of the
         * text field.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
         */
        get validity() {
            return this.getNativeValue('validity') ?? this.#_internals.validity;
        }
        /**
         * The text field's value as a number.
         */
        get valueAsNumber() {
            return this.getNativeValue('valueAsNumber') ?? 0;
        }
        set valueAsNumber(value) {
            this.setNativeValue('valueAsNumber', value);
        }
        /**
         * The text field's value as a Date.
         */
        get valueAsDate() {
            return this.getNativeValue('valueAsDate');
        }
        set valueAsDate(value) {
            this.setNativeValue('valueAsDate', value);
        }
        /**
         * Returns whether an element will successfully validate based on forms
         * validation rules and constraints.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate
         */
        get willValidate() {
            return this.getNativeValue('willValidate') ?? false;
        }
        #dirty_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _dirty_initializers, false));
        /**
         * Returns true when the text field has been interacted with. Native
         * validation errors only display in response to user interactions.
         */
        get dirty() { return this.#dirty_accessor_storage; }
        set dirty(value) { this.#dirty_accessor_storage = value; }
        #focused_accessor_storage = (__runInitializers(this, _dirty_extraInitializers), __runInitializers(this, _focused_initializers, false));
        get focused() { return this.#focused_accessor_storage; }
        set focused(value) { this.#focused_accessor_storage = value; }
        get input() {
            return this.shadowRoot?.querySelector('.input') ?? null;
        }
        #prefixes_accessor_storage = (__runInitializers(this, _focused_extraInitializers), __runInitializers(this, _prefixes_initializers, void 0));
        get prefixes() { return this.#prefixes_accessor_storage; }
        set prefixes(value) { this.#prefixes_accessor_storage = value; }
        #suffixes_accessor_storage = (__runInitializers(this, _prefixes_extraInitializers), __runInitializers(this, _suffixes_initializers, void 0));
        get suffixes() { return this.#suffixes_accessor_storage; }
        set suffixes(value) { this.#suffixes_accessor_storage = value; }
        #nativeErrorText_accessor_storage = (__runInitializers(this, _suffixes_extraInitializers), __runInitializers(this, _nativeErrorText_initializers, ''
        /**
         * Whether or not a native error has been reported via `reportValidity()`.
         */
        ));
        /**
         * The validation message displayed from a native error via
         * `reportValidity()`.
         */
        get nativeErrorText() { return this.#nativeErrorText_accessor_storage; }
        set nativeErrorText(value) { this.#nativeErrorText_accessor_storage = value; }
        #nativeError_accessor_storage = (__runInitializers(this, _nativeErrorText_extraInitializers), __runInitializers(this, _nativeError_initializers, false));
        /**
         * Whether or not a native error has been reported via `reportValidity()`.
         */
        get nativeError() { return this.#nativeError_accessor_storage; }
        set nativeError(value) { this.#nativeError_accessor_storage = value; }
        counterId = (__runInitializers(this, _nativeError_extraInitializers), 'counter');
        supportingTextId = 'support';
        labelId = 'support';
        #ariaAutoComplete_accessor_storage = __runInitializers(this, _ariaAutoComplete_initializers, null);
        get ariaAutoComplete() { return this.#ariaAutoComplete_accessor_storage; }
        set ariaAutoComplete(value) { this.#ariaAutoComplete_accessor_storage = value; }
        #ariaControls_accessor_storage = (__runInitializers(this, _ariaAutoComplete_extraInitializers), __runInitializers(this, _ariaControls_initializers, null));
        get ariaControls() { return this.#ariaControls_accessor_storage; }
        set ariaControls(value) { this.#ariaControls_accessor_storage = value; }
        #ariaActiveDescendant_accessor_storage = (__runInitializers(this, _ariaControls_extraInitializers), __runInitializers(this, _ariaActiveDescendant_initializers, null));
        get ariaActiveDescendant() { return this.#ariaActiveDescendant_accessor_storage; }
        set ariaActiveDescendant(value) { this.#ariaActiveDescendant_accessor_storage = value; }
        #ariaExpanded_accessor_storage = (__runInitializers(this, _ariaActiveDescendant_extraInitializers), __runInitializers(this, _ariaExpanded_initializers, null
        /**
         * The `aria-label` of the text field's input.
         */
        ));
        get ariaExpanded() { return this.#ariaExpanded_accessor_storage; }
        set ariaExpanded(value) { this.#ariaExpanded_accessor_storage = value; }
        #ariaLabel_accessor_storage = (__runInitializers(this, _ariaExpanded_extraInitializers), __runInitializers(this, _ariaLabel_initializers, void 0));
        /**
         * The `aria-label` of the text field's input.
         */
        get ariaLabel() { return this.#ariaLabel_accessor_storage; }
        set ariaLabel(value) { this.#ariaLabel_accessor_storage = value; }
        #ariaLabelledBy_accessor_storage = (__runInitializers(this, _ariaLabel_extraInitializers), __runInitializers(this, _ariaLabelledBy_initializers, void 0));
        /**
         * The `aria-labelledby` of the text field's input.
         *
         * Note: currently only usable in SSR light DOM.
         */
        get ariaLabelledBy() { return this.#ariaLabelledBy_accessor_storage; }
        set ariaLabelledBy(value) { this.#ariaLabelledBy_accessor_storage = value; }
        #dataRole_accessor_storage = (__runInitializers(this, _ariaLabelledBy_extraInitializers), __runInitializers(this, _dataRole_initializers, null
        /**
         * When set to true, the error text's `role="alert"` will be removed, then
         * re-added after an animation frame. This will re-announce an error message
         * to screen readers.
         */
        ));
        get dataRole() { return this.#dataRole_accessor_storage; }
        set dataRole(value) { this.#dataRole_accessor_storage = value; }
        #refreshErrorAlert_accessor_storage = (__runInitializers(this, _dataRole_extraInitializers), __runInitializers(this, _refreshErrorAlert_initializers, false
        /**
         * When set is shows password in the `password` input.
         * This is private so the password can be viewed only through user interaction.
         */
        ));
        /**
         * When set to true, the error text's `role="alert"` will be removed, then
         * re-added after an animation frame. This will re-announce an error message
         * to screen readers.
         */
        get refreshErrorAlert() { return this.#refreshErrorAlert_accessor_storage; }
        set refreshErrorAlert(value) { this.#refreshErrorAlert_accessor_storage = value; }
        /**
         * When set is shows password in the `password` input.
         * This is private so the password can be viewed only through user interaction.
         */
        #showPassword = (__runInitializers(this, _refreshErrorAlert_extraInitializers), false);
        removingTabindex = false;
        get files() {
            return this.getNativeValue('files');
        }
        #list_accessor_storage = __runInitializers(this, _list_initializers, void 0);
        /**
         * When set it adds a `<datalist>` element to the input.
         */
        get list() { return this.#list_accessor_storage; }
        set list(value) { this.#list_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _list_extraInitializers);
            this.type = 'text';
            this.#_userInteracted = false;
            this.actionController.cancelKeyboardEvents = false;
            this.addEventListener('click', this.handleClick.bind(this));
            this.addEventListener('focus', this.handleFocus.bind(this));
            this.addEventListener('blur', this.handleBlur.bind(this));
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('tabindex') && !this.disabled) {
                this.setAttribute('tabindex', '0');
            }
            this.handleSlotChange();
        }
        /**
         * When form-associated custom elements are supported in the browser it
         * is called when the form has been reset
         */
        formResetCallback() {
            this.value = '';
        }
        /**
         * When form-associated custom elements are supported in the browser it
         * is called when the form state has been restored
         *
         * @param formState Restored value
         */
        formStateRestoreCallback(formState) {
            this.value = formState ?? '';
        }
        willUpdate(cp) {
            if (cp.has('required')) {
                this._updateFormValue();
            }
        }
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('value')) {
                this._updateFormValue();
            }
            if (this.refreshErrorAlert) {
                // The past render cycle removed the role="alert" from the error message.
                // Re-add it after an animation frame to re-announce the error.
                requestAnimationFrame(() => {
                    this.refreshErrorAlert = false;
                });
            }
        }
        _updateFormValue() {
            const { value = '', disabled } = this;
            if (!value || disabled) {
                this.#_internals.setFormValue(null);
            }
            else {
                this.#_internals.setFormValue(value);
            }
            this._updateValidationState();
        }
        _updateValidationState() {
            const { input } = this;
            if (!input) {
                return;
            }
            const { validationMessage, validity } = input;
            if (!validity.valid) {
                this.#_internals.setValidity({
                    valueMissing: validity.valueMissing,
                    badInput: validity.badInput,
                    patternMismatch: validity.patternMismatch,
                    rangeOverflow: validity.rangeOverflow,
                    rangeUnderflow: validity.rangeUnderflow,
                    stepMismatch: validity.stepMismatch,
                    tooLong: validity.tooLong,
                    tooShort: validity.tooShort,
                    typeMismatch: validity.typeMismatch,
                    customError: validity.customError,
                }, validationMessage);
                return;
            }
            this.#_internals.setValidity({});
        }
        invalidHandler(e) {
            this.retargetEvent(e);
            if (!this.#_userInteracted) {
                return;
            }
            this.invalid = true;
        }
        handleSlotChange() {
            this.hasPrefix = this.prefixes.length > 0;
            this.hasSuffix = this.suffixes.length > 0;
        }
        getInputValue() {
            if (this.type === 'color') {
                return this.value || '#000000';
            }
            return this.value || '';
        }
        /**
         * Checks the text field's native validation and returns whether or not the
         * element is valid.
         *
         * If invalid, this method will dispatch the `invalid` event.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
         *
         * @return true if the text field is valid, or false if not.
         */
        checkValidity() {
            this.#_userInteracted = true;
            const { valid } = this.checkValidityAndDispatch();
            this.invalid = !valid;
            return valid;
        }
        /**
         * Focuses the text field's input text.
         */
        focus() {
            if (this.disabled || this.matches(':focus-within')) {
                return;
            }
            this.input?.focus();
        }
        /**
         * Un-focuses the text field.
         */
        blur() {
            this.input?.blur();
        }
        /**
         * Checks the text field's native validation and returns whether or not the
         * element is valid.
         *
         * If invalid, this method will dispatch the `invalid` event.
         *
         * This method will display or clear an error text message equal to the text
         * field's `validationMessage`, unless the invalid event is canceled.
         *
         * Use `setCustomValidity()` to customize the `validationMessage`.
         *
         * This method can also be used to re-announce error messages to screen
         * readers.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
         *
         * @return true if the text field is valid, or false if not.
         */
        reportValidity() {
            this.#_userInteracted = true;
            const { valid, canceled } = this.checkValidityAndDispatch();
            this._updateValidationState();
            if (!canceled) {
                this.invalid = !valid;
                const prevMessage = this.getErrorText();
                this.nativeError = !valid;
                this.nativeErrorText = this.validationMessage;
                const needsRefresh = this.shouldErrorAnnounce() && prevMessage === this.getErrorText();
                if (needsRefresh) {
                    this.refreshErrorAlert = true;
                }
            }
            return valid;
        }
        shouldErrorAnnounce() {
            // Announce if there is an error and error text visible.
            // If refreshErrorAlert is true, do not announce. This will remove the
            // role="alert" attribute. Another render cycle will happen after an
            // animation frame to re-add the role.
            return this.getError() && !!this.getErrorText() && !this.refreshErrorAlert;
        }
        getErrorText() {
            return this.invalidText || this.nativeErrorText;
        }
        /**
         * Selects all the text in the text field.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
         */
        select() {
            this.input?.select();
        }
        /**
         * Sets the text field's native validation error message. This is used to
         * customize `validationMessage`.
         *
         * When the error is not an empty string, the text field is considered invalid
         * and `validity.customError` will be true.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
         *
         * @param error The error message to display.
         */
        setCustomValidity(error) {
            this.input?.setCustomValidity(error);
        }
        setRangeText(...args) {
            const { input } = this;
            if (!input) {
                return;
            }
            // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
            // Use spread syntax and type casting to ensure correct usage.
            input.setRangeText(...args);
            this.value = input.value;
        }
        /**
         * Sets the start and end positions of a selection in the text field.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
         *
         * @param start The offset into the text field for the start of the selection.
         * @param end The offset into the text field for the end of the selection.
         * @param direction The direction in which the selection is performed.
         */
        setSelectionRange(start, end, direction) {
            this.input?.setSelectionRange(start, end, direction);
        }
        /**
         * Decrements the value of a numeric type text field by `step` or `n` `step`
         * number of times.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
         *
         * @param stepDecrement The number of steps to decrement, defaults to 1.
         */
        stepDown(stepDecrement) {
            const { input } = this;
            if (!input) {
                return;
            }
            input.stepDown(stepDecrement);
            this.value = input.value;
        }
        /**
         * Increments the value of a numeric type text field by `step` or `n` `step`
         * number of times.
         *
         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
         *
         * @param stepIncrement The number of steps to increment, defaults to 1.
         */
        stepUp(stepIncrement) {
            const { input } = this;
            if (!input) {
                return;
            }
            input.stepUp(stepIncrement);
            this.value = input.value;
        }
        /**
         * Reset the text field to its default value.
         */
        reset() {
            this.dirty = false;
            this.value = '';
        }
        handleClick() {
            this.focus();
        }
        handleFocus() {
            const { input } = this;
            if (this.disabled || !input) {
                return;
            }
            this.focused = true;
            this.removingTabindex = true;
            // Note, the input is automatically focused when form is being submitted and
            // it won't pass validation. In this case the form will throw an error
            // as the input is not focusable. In overall, this still works with forms and validation.
            if (this.checkNativeValidity()) {
                this.dataset.tabindex = this.getAttribute('tabindex') || '0';
                this.removeAttribute('tabindex');
            }
            input.focus();
            this.#_userInteracted = true;
            setTimeout(() => {
                this.removingTabindex = false;
            }, 1);
        }
        handleBlur() {
            if (this.matches(':focus-within') || this.removingTabindex) {
                // Changing focus to another child within the text field, like a button
                return;
            }
            this.focused = false;
            const index = this.dataset.tabindex || '0';
            delete this.dataset.tabindex;
            this.setAttribute('tabindex', index);
        }
        checkNativeValidity() {
            return this.input?.validity.valid ?? true;
        }
        checkValidityAndDispatch() {
            const valid = this.input?.checkValidity() ?? true;
            let canceled = false;
            if (!valid) {
                canceled = !this.dispatchEvent(new Event('invalid', { cancelable: true }));
            }
            return { valid, canceled };
        }
        /**
         * @returns `true` when the label is in resting state.
         */
        labelResting() {
            const { value } = this;
            if (!!value || String(value) === '0') {
                return false;
            }
            if (floatTypes.includes(this.type || '')) {
                return false;
            }
            return !this.placeholder && !this.focused;
        }
        /**
         * @returns `true` when the label should be hidden
         */
        labelHidden() {
            const { noFloating } = this;
            return !this.labelResting() && !!noFloating;
        }
        renderLabelText() {
            const labelText = this.label ?? '';
            const optionalAsterisk = this.required && labelText ? '*' : '';
            return labelText + optionalAsterisk;
        }
        getSupportingText() {
            const errorText = this.getErrorText();
            return this.getError() && errorText ? errorText : this.supportingText;
        }
        getError() {
            return this.invalid || this.nativeError;
        }
        retargetEvent(event) {
            if (event.bubbles && (!this.shadowRoot || event.composed)) {
                event.stopPropagation();
            }
            const copy = Reflect.construct(event.constructor, [event.type, event]);
            const dispatched = this.dispatchEvent(copy);
            if (!dispatched) {
                event.preventDefault();
            }
            return dispatched;
        }
        handleInput(event) {
            this.dirty = true;
            this.value = event.target.value;
            this.retargetEvent(event);
            this.reportValidity();
        }
        hasCounter() {
            return this.maxLength > -1;
        }
        getCounterText() {
            const { length } = this.value || '';
            return `${length} / ${this.maxLength || 0}`;
        }
        getAriaDescribedBy() {
            const hasSupport = !!this.getSupportingText();
            if (hasSupport) {
                return this.supportingTextId;
            }
            const hasCounter = this.hasCounter();
            if (hasCounter) {
                return this.counterId;
            }
            return '';
        }
        #handlePasswordToggle() {
            this.#showPassword = !this.#showPassword;
            this.requestUpdate();
        }
        get effectiveType() {
            const { type } = this;
            if (type !== 'password') {
                return type;
            }
            const visible = this.#showPassword;
            return visible ? 'text' : 'password';
        }
        render() {
            const { pressed = false } = this;
            const labelResting = this.labelResting();
            const containerClasses = classMap({
                surface: true,
                pressed,
                labelResting,
                labelActive: !labelResting,
                labelHidden: this.labelHidden(),
            });
            return html `
      <div class="${containerClasses}">
        <div class="container"></div>
        <div class="content">
          ${this.renderPrefix()} ${this.renderBody()} ${this.renderPasswordControl()} ${this.renderSuffix()}
          ${this.renderHighlight()}
        </div>
      </div>
      ${this.renderSupportingText()} ${this.renderDataList()}
    `;
        }
        renderPrefix() {
            const classes = classMap({
                start: true,
                prefixed: this.hasPrefix,
            });
            return html ` <div class="${classes}">
      <slot name="prefix" @slotchange=${this.handleSlotChange}></slot>
    </div>`;
        }
        renderSuffix() {
            const classes = classMap({
                end: true,
                suffixed: this.hasSuffix,
            });
            return html ` <div class="${classes}">
      <slot name="suffix" @slotchange=${this.handleSlotChange}></slot>
    </div>`;
        }
        renderBody() {
            return html ` <div class="body">${this.renderLabel()} ${this.renderInput()}</div> `;
        }
        renderLabel() {
            const label = this.renderLabelText();
            if (!label) {
                return html ``;
            }
            return html ` <span class="label" id="${this.labelId}" title="label">${label}</span> `;
        }
        renderHighlight() {
            return html ` <span class="highlight"></span> `;
        }
        renderSupportingText() {
            return html ` <span class="supporting-text"> ${this.renderSupportingTextValue()} ${this.renderCounter()} </span> `;
        }
        renderSupportingTextValue() {
            const text = this.getSupportingText();
            if (!text) {
                return nothing;
            }
            const shouldAlert = this.shouldErrorAnnounce();
            return html `
      <span
        class="supporting-text-start"
        id="${this.supportingTextId}"
        role=${ifDefined(shouldAlert ? 'alert' : undefined)}
      >
        ${text}
      </span>
    `;
        }
        renderCounter() {
            if (!this.hasCounter()) {
                return html ``;
            }
            // TODO: add aria-label and announcements
            return html `<span id=${this.counterId} class="supporting-text-end">${this.getCounterText()}</span>`;
        }
        renderPasswordControl() {
            const { type } = this;
            if (type !== 'password') {
                return nothing;
            }
            const visible = this.#showPassword;
            const icon = visible ? 'visibilityOff' : 'visibility';
            return html `
      <ui-icon-button
        aria-label="Toggle password visibility"
        @click="${this.#handlePasswordToggle}"
        title="Shows or hides the password"
      >
        <ui-icon icon="${icon}"></ui-icon>
      </ui-icon-button>
    `;
        }
        renderDataList() {
            const { list } = this;
            if (!Array.isArray(list) || !list.length) {
                return nothing;
            }
            return html ` <datalist id="input-list">${list.map((i) => html `<option value="${i}"></option>`)}</datalist> `;
        }
    };
})();
/**
 * @slot prefix - A slot in which to render prefixes of the input
 * @slot suffix - A slot in which to render suffixes of the input
 */
export default Input;
//# sourceMappingURL=Input.js.map