import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { when } from 'lit/directives/when.js';
import { msg } from '@lit/localize';
import { $ } from '@mdui/jq/$.js';
import '@mdui/jq/methods/css.js';
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
import { FormController, formResets } from '@mdui/shared/controllers/form.js';
import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
import { defaultValue } from '@mdui/shared/decorators/default-value.js';
import { watch } from '@mdui/shared/decorators/watch.js';
import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
import { observeResize } from '@mdui/shared/helpers/observeResize.js';
import { nothingTemplate } from '@mdui/shared/helpers/template.js';
import '@mdui/shared/icons/cancel--outlined.js';
import '@mdui/shared/icons/error.js';
import '@mdui/shared/icons/visibility-off.js';
import '@mdui/shared/icons/visibility.js';
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
import { onLocaleReady, offLocaleReady } from '../../internal/localize.js';
import '../button-icon.js';
import '../icon.js';
import { style } from './style.js';
/**
 * @summary 文本框组件
 *
 * ```html
 * <mdui-text-field label="Text Field"></mdui-text-field>
 * ```
 *
 * @event focus - 获得焦点时触发
 * @event blur - 失去焦点时触发
 * @event change - 在文本框的值变更，且失去焦点时触发
 * @event input - 在文本框的值变更时触发
 * @event invalid - 表单字段验证不通过时触发
 * @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空文本框
 *
 * @slot icon - 左侧图标
 * @slot end-icon - 右侧图标
 * @slot error-icon - 验证失败状态的右侧图标
 * @slot prefix - 左侧文本
 * @slot suffix - 右侧文本
 * @slot clear-button - 清空按钮
 * @slot clear-icon - 清空按钮中的图标
 * @slot toggle-password-button - 密码显示状态切换按钮
 * @slot show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
 * @slot hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
 * @slot helper - 底部的帮助文本
 *
 * @csspart container - 文本框容器
 * @csspart icon - 左侧图标
 * @csspart end-icon - 右侧图标
 * @csspart error-icon - 验证失败状态的右侧图标
 * @csspart prefix - 左侧文本
 * @csspart suffix - 右侧文本
 * @csspart label - 上方的标签文本
 * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
 * @csspart clear-button - 清空按钮
 * @csspart clear-icon - 清空按钮中的图标
 * @csspart toggle-password-button - 密码显示状态切换按钮
 * @csspart show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
 * @csspart hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
 * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
 * @csspart helper - 底部的帮助文本
 * @csspart error - 底部的错误描述文本
 * @csspart counter - 底部右侧的字数统计
 */
let TextField = class TextField extends FocusableMixin(MduiElement) {
    constructor() {
        super(...arguments);
        /**
         * 文本框的形状。默认为 `filled`。可选值包括：
         *
         * * `filled`：带背景色的文本框，视觉效果较强
         * * `outlined`：带边框的文本框，视觉效果较弱
         */
        this.variant = 'filled';
        /**
         * 文本框输入类型。默认为 `text`。可选值包括：
         *
         * * `text`：默认值。文本字段
         * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
         * * `password`：用于输入密码，其值会被遮盖
         * * `url`：用于输入 URL，会验证 URL 格式。在支持动态键盘的设备上有相应的键盘
         * * `email`：用于输入邮箱地址，会验证邮箱格式。在支持动态键盘的设备上有相应的键盘
         * * `search`：用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标
         * * `tel`：用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘
         * * `hidden`：隐藏该控件，但其值仍会提交到服务器
         * * `date`：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
         * * `datetime-local`：输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
         * * `month`：输入年和月的控件，没有时区
         * * `time`：用于输入时间的控件，不包括时区
         * * `week`：用于输入以年和周数组成的日期，不带时区
         */
        this.type = 'text';
        /**
         * 文本框名称，将与表单数据一起提交
         */
        this.name = '';
        /**
         * 文本框的值，将与表单数据一起提交
         */
        this.value = '';
        /**
         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
         */
        this.defaultValue = '';
        /**
         * 是否仅在获得焦点时，显示底部的帮助文本
         */
        this.helperOnFocus = false;
        /**
         * 是否可清空文本框内容
         */
        this.clearable = false;
        /**
         * 是否将文本右对齐
         */
        this.endAligned = false;
        /**
         * 是否为只读模式
         */
        this.readonly = false;
        /**
         * 是否禁用输入框
         */
        this.disabled = false;
        /**
         * 提交表单时，是否必须填写该字段
         */
        this.required = false;
        /**
         * 是否根据输入内容自动调整文本框高度
         */
        this.autosize = false;
        /**
         * 是否显示字数统计，只在 `maxlength` 被指定时有效
         */
        this.counter = false;
        /**
         * `type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换
         */
        this.togglePassword = false;
        /**
         * 是否启用拼写检查
         */
        this.spellcheck = false;
        /**
         * 是否验证未通过
         *
         * 该验证为浏览器原生验证 API，基于 `type`、`required`、`minlength`、`maxlength` 及 `pattern` 等属性的验证结果
         */
        this.invalid = false;
        /**
         * 该属性设置为 true 时，则在样式上为 text-field 赋予 invalid 的状态。实际是否验证通过仍需根据 invalid 属性判断
         * 该属性仅供 mdui 内部使用，当前 select 组件使用了该属性
         */
        this.invalidStyle = false;
        /**
         * 该属性设置为 true 时，则在样式上为 text-field 赋予聚焦状态。实际是否聚焦仍然由 focusableMixin 控制
         * 该属性仅供 mdui 内部使用，当前 select 组件使用了该属性
         */
        this.focusedStyle = false;
        this.isPasswordVisible = false;
        this.hasValue = false;
        /**
         * 通过该属性传入了错误文案时，会优先显示该文案。需要配合 invalid=true 或 invalidStyle=true 使用
         * 当前仅供 select 组件使用
         */
        this.error = '';
        this.inputRef = createRef();
        this.formController = new FormController(this);
        this.hasSlotController = new HasSlotController(this, 'icon', 'end-icon', 'helper', 'input');
        /**
         * 该属性设为 true 时，即使设置了 readonly，仍可以显示 clearable
         * 当前仅供 select 组件使用
         */
        this.readonlyButClearable = false;
    }
    /**
     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
     */
    get validity() {
        return this.inputRef.value.validity;
    }
    /**
     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
     */
    get validationMessage() {
        return this.inputRef.value.validationMessage;
    }
    /**
     * 获取当前值，并转换为 `number` 类型；或设置一个 `number` 类型的值。
     * 如果值无法被转换为 `number` 类型，则会返回 `NaN`。
     */
    get valueAsNumber() {
        return (this.inputRef.value?.valueAsNumber ??
            parseFloat(this.value));
    }
    set valueAsNumber(newValue) {
        const input = document.createElement('input');
        input.type = 'number';
        input.valueAsNumber = newValue;
        this.value = input.value;
    }
    get focusElement() {
        return this.inputRef.value;
    }
    get focusDisabled() {
        return this.disabled;
    }
    /**
     * 是否显示聚焦状态样式
     */
    get isFocusedStyle() {
        // @ts-ignore
        return this.focused || this.focusedStyle;
    }
    /**
     * 是否渲染为 textarea。为 false 时渲染为 input
     */
    get isTextarea() {
        return (this.rows && this.rows > 1) || this.autosize;
    }
    onDisabledChange() {
        // 禁用状态始终为验证通过，所以 disabled 变更时需要重新校验
        this.inputRef.value.disabled = this.disabled;
        this.invalid = !this.inputRef.value.checkValidity();
    }
    async onValueChange() {
        this.hasValue = !['', null].includes(this.value);
        if (this.hasUpdated) {
            await this.updateComplete;
            this.setTextareaHeight();
            // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
            const form = this.formController.getForm();
            if (form && formResets.get(form)?.has(this)) {
                this.invalid = false;
                formResets.get(form).delete(this);
            }
            else {
                this.invalid = !this.inputRef.value.checkValidity();
            }
        }
    }
    onRowsChange() {
        this.setTextareaHeight();
    }
    async onMaxRowsChange() {
        if (!this.autosize) {
            return;
        }
        if (!this.hasUpdated) {
            await this.updateComplete;
        }
        // 设置最大高度，为 line-height * maxRows + padding-top + padding-bottom
        const $input = $(this.inputRef.value);
        $input.css('max-height', parseFloat($input.css('line-height')) * (this.maxRows ?? 1) +
            parseFloat($input.css('padding-top')) +
            parseFloat($input.css('padding-bottom')));
    }
    async onMinRowsChange() {
        if (!this.autosize) {
            return;
        }
        if (!this.hasUpdated) {
            await this.updateComplete;
        }
        // 设置最小高度，为 line-height * minRows + padding-top + padding-bottom
        const $input = $(this.inputRef.value);
        $input.css('min-height', parseFloat($input.css('line-height')) * (this.minRows ?? 1) +
            parseFloat($input.css('padding-top')) +
            parseFloat($input.css('padding-bottom')));
    }
    connectedCallback() {
        super.connectedCallback();
        this.updateComplete.then(() => {
            this.setTextareaHeight();
            this.observeResize = observeResize(this.inputRef.value, () => this.setTextareaHeight());
        });
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.observeResize?.unobserve();
        offLocaleReady(this);
    }
    /**
     * 选中文本框中的文本
     */
    select() {
        this.inputRef.value.select();
    }
    /**
     * 选中文本框中特定范围的内容
     *
     * @param start 被选中的第一个字符的位置索引，从 `0` 开始。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引
     * @param end 被选中的最后一个字符的*下一个*位置索引。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引
     * @param direction 一个表示选择方向的字符串，可能的值有：`forward`、`backward`、`none`
     */
    setSelectionRange(start, end, direction = 'none') {
        this.inputRef.value.setSelectionRange(start, end, direction);
    }
    /**
     * 将文本框中特定范围的文本替换为新的文本
     * @param replacement 要插入的字符串
     * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
     * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
     * @param selectMode 文本被替换后，选取的状态。可选值为：
     * * `select`：选择新插入的文本
     * * `start`：将光标移动到新插入的文本的起始位置
     * * `end`：将光标移动到新插入的文本的结束位置
     * * `preserve`：默认值。尝试保留选取
     */
    setRangeText(replacement, start, end, selectMode = 'preserve') {
        this.inputRef.value.setRangeText(replacement, start, end, selectMode);
        if (this.value !== this.inputRef.value.value) {
            this.value = this.inputRef.value.value;
            this.setTextareaHeight();
            this.emit('input');
            this.emit('change');
        }
    }
    /**
     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
     */
    checkValidity() {
        const valid = this.inputRef.value.checkValidity();
        if (!valid) {
            this.emit('invalid', {
                bubbles: false,
                cancelable: true,
                composed: false,
            });
        }
        return valid;
    }
    /**
     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
     *
     * 如果验证未通过，还会在组件上显示验证失败的提示。
     */
    reportValidity() {
        this.invalid = !this.inputRef.value.reportValidity();
        if (this.invalid) {
            this.emit('invalid', {
                bubbles: false,
                cancelable: true,
                composed: false,
            });
            this.focus();
        }
        return !this.invalid;
    }
    /**
     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
     *
     * @param message 自定义的错误提示文本
     */
    setCustomValidity(message) {
        this.setCustomValidityInternal(message);
        // 外部调用 setCustomValidity 时，不再使用内置的验证规则，所以需要移除监听语言变更事件
        offLocaleReady(this);
    }
    render() {
        const hasIcon = !!this.icon || this.hasSlotController.test('icon');
        const hasEndIcon = !!this.endIcon || this.hasSlotController.test('end-icon');
        const hasErrorIcon = this.invalid || this.invalidStyle;
        const hasTogglePasswordButton = this.type === 'password' && this.togglePassword && !this.disabled;
        const hasClearButton = this.clearable &&
            !this.disabled &&
            (!this.readonly || this.readonlyButClearable) &&
            (typeof this.value === 'number' || this.value.length > 0);
        const hasPrefix = !!this.prefix || this.hasSlotController.test('prefix');
        const hasSuffix = !!this.suffix || this.hasSlotController.test('suffix');
        const hasHelper = !!this.helper || this.hasSlotController.test('helper');
        const hasError = hasErrorIcon && !!(this.error || this.inputRef.value.validationMessage);
        const hasCounter = this.counter && !!this.maxlength;
        // 存在 input slot 时，隐藏组件内部的 .input 元素，使用 slot 代替
        const hasInputSlot = this.hasSlotController.test('input');
        const invalidClassNameObj = {
            invalid: this.invalid,
            'invalid-style': this.invalidStyle,
        };
        const className = classMap({
            container: true,
            'has-value': this.hasValue,
            'has-icon': hasIcon,
            'has-right-icon': hasEndIcon || hasErrorIcon,
            'has-action': hasClearButton || hasTogglePasswordButton,
            'has-prefix': hasPrefix,
            'has-suffix': hasSuffix,
            'is-firefox': navigator.userAgent.includes('Firefox'),
            ...invalidClassNameObj,
        });
        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
            ? this.renderTextArea(hasInputSlot)
            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
    }
    setCustomValidityInternal(message) {
        this.inputRef.value.setCustomValidity(message);
        this.invalid = !this.inputRef.value.checkValidity();
        this.requestUpdate();
    }
    onChange() {
        this.value = this.inputRef.value.value;
        if (this.isTextarea) {
            this.setTextareaHeight();
        }
        this.emit('change');
    }
    onClear(event) {
        this.value = '';
        this.emit('clear');
        this.emit('input');
        this.emit('change');
        this.focus();
        event.stopPropagation();
    }
    onInput(event) {
        event.stopPropagation();
        this.value = this.inputRef.value.value;
        if (this.isTextarea) {
            this.setTextareaHeight();
        }
        this.emit('input');
    }
    onInvalid(event) {
        event.preventDefault();
    }
    onKeyDown(event) {
        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
        // 聚焦状态按下回车时，提交表单。可以在 keydown 事件中使用 event.preventDefault() 来取消提交表单
        if (event.key === 'Enter' && !hasModifier) {
            setTimeout(() => {
                if (!event.defaultPrevented) {
                    this.formController.submit();
                }
            });
        }
    }
    /**
     * textarea 不支持 pattern 属性，所以在 keyup 时执行验证
     */
    onTextAreaKeyUp() {
        if (this.pattern) {
            const patternRegex = new RegExp(this.pattern);
            const hasError = this.value && !this.value.match(patternRegex);
            if (hasError) {
                this.setCustomValidityInternal(this.getPatternErrorMsg());
                onLocaleReady(this, () => {
                    this.setCustomValidityInternal(this.getPatternErrorMsg());
                });
            }
            else {
                this.setCustomValidityInternal('');
                offLocaleReady(this);
            }
        }
    }
    onTogglePassword() {
        this.isPasswordVisible = !this.isPasswordVisible;
    }
    getPatternErrorMsg() {
        return msg('Please match the requested format.', {
            id: 'components.textField.patternError',
        });
    }
    setTextareaHeight() {
        if (this.autosize) {
            this.inputRef.value.style.height = 'auto';
            this.inputRef.value.style.height = `${this.inputRef.value.scrollHeight}px`;
        }
        else {
            this.inputRef.value.style.height = undefined;
        }
    }
    renderLabel() {
        return this.label
            ? html `<label part="label" class="label">${this.label}</label>`
            : nothingTemplate;
    }
    renderPrefix() {
        return html `<slot name="icon" part="icon" class="icon">${this.icon
            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
            : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
    }
    renderSuffix() {
        return html `<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>`;
    }
    renderRightIcon(hasErrorIcon) {
        return hasErrorIcon
            ? html `<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
                ? html `<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
                : html `<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
            : html `<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
                ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
                : nothingTemplate}</slot>`;
    }
    renderClearButton(hasClearButton) {
        return when(hasClearButton, () => html `<slot name="clear-button" part="clear-button" class="action" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
            ? html `<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
            : html `<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
    }
    renderTogglePasswordButton(hasTogglePasswordButton) {
        return when(hasTogglePasswordButton, () => html `<slot name="toggle-password-button" part="toggle-password-button" class="action" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
            ? html `<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
                ? html `<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
                : html `<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
            : html `<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
                ? html `<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
                : html `<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
    }
    renderInput(hasInputSlot) {
        return html `<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
            ? 'text'
            : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
            ? this.placeholder
            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
    }
    renderTextArea(hasInputSlot) {
        return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
            ? this.placeholder
            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
    }
    /**
     * @param hasError 是否包含错误提示
     * @param hasHelper 是否含 helper 属性或 helper slot
     */
    renderHelper(hasError, hasHelper) {
        return hasError
            ? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
            : hasHelper
                ? html `<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
                : // 右边有 counter，需要占位
                    html `<span></span>`;
    }
    renderCounter(hasCounter) {
        return hasCounter
            ? html `<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
            : nothingTemplate;
    }
};
TextField.styles = [componentStyle, style];
__decorate([
    property({ reflect: true })
], TextField.prototype, "variant", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "type", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "name", void 0);
__decorate([
    property()
], TextField.prototype, "value", void 0);
__decorate([
    defaultValue()
], TextField.prototype, "defaultValue", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "label", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "placeholder", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "helper", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
        attribute: 'helper-on-focus',
    })
], TextField.prototype, "helperOnFocus", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "clearable", void 0);
__decorate([
    property({ reflect: true, attribute: 'clear-icon' })
], TextField.prototype, "clearIcon", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
        attribute: 'end-aligned',
    })
], TextField.prototype, "endAligned", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "prefix", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "suffix", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "icon", void 0);
__decorate([
    property({ reflect: true, attribute: 'end-icon' })
], TextField.prototype, "endIcon", void 0);
__decorate([
    property({ reflect: true, attribute: 'error-icon' })
], TextField.prototype, "errorIcon", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "form", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "readonly", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "disabled", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "required", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "rows", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "autosize", void 0);
__decorate([
    property({ type: Number, reflect: true, attribute: 'min-rows' })
], TextField.prototype, "minRows", void 0);
__decorate([
    property({ type: Number, reflect: true, attribute: 'max-rows' })
], TextField.prototype, "maxRows", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "minlength", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "maxlength", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
    })
], TextField.prototype, "counter", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "min", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "max", void 0);
__decorate([
    property({ type: Number, reflect: true })
], TextField.prototype, "step", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "pattern", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
        attribute: 'toggle-password',
    })
], TextField.prototype, "togglePassword", void 0);
__decorate([
    property({ reflect: true, attribute: 'show-password-icon' })
], TextField.prototype, "showPasswordIcon", void 0);
__decorate([
    property({ reflect: true, attribute: 'hide-password-icon' })
], TextField.prototype, "hidePasswordIcon", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "autocapitalize", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "autocorrect", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "autocomplete", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "enterkeyhint", void 0);
__decorate([
    property({ type: Boolean, reflect: true, converter: booleanConverter })
], TextField.prototype, "spellcheck", void 0);
__decorate([
    property({ reflect: true })
], TextField.prototype, "inputmode", void 0);
__decorate([
    state()
], TextField.prototype, "invalid", void 0);
__decorate([
    state()
], TextField.prototype, "invalidStyle", void 0);
__decorate([
    property({
        type: Boolean,
        reflect: true,
        converter: booleanConverter,
        attribute: 'focused-style',
    })
], TextField.prototype, "focusedStyle", void 0);
__decorate([
    state()
], TextField.prototype, "isPasswordVisible", void 0);
__decorate([
    state()
], TextField.prototype, "hasValue", void 0);
__decorate([
    state()
], TextField.prototype, "error", void 0);
__decorate([
    watch('disabled', true)
], TextField.prototype, "onDisabledChange", null);
__decorate([
    watch('value')
], TextField.prototype, "onValueChange", null);
__decorate([
    watch('rows', true)
], TextField.prototype, "onRowsChange", null);
__decorate([
    watch('maxRows')
], TextField.prototype, "onMaxRowsChange", null);
__decorate([
    watch('minRows')
], TextField.prototype, "onMinRowsChange", null);
TextField = __decorate([
    customElement('mdui-text-field')
], TextField);
export { TextField };