@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/textfield/lib/text-field.js

@@ -1,24 +1,121 @@
 /**
- * @requirecss {textfield.lib.shared_styles}
- *
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+var _a;
+import { __decorate } from "tslib";
+import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements, 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 { styleMap } from 'lit/directives/style-map.js';
 import { html as staticHtml } from 'lit/static-html.js';
-import { redispatchEvent } from '../../controller/events.js';
-import { FormController, getFormValue } from '../../controller/form-controller.js';
-import { stringConverter } from '../../controller/string-converter.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-/** @soyCompatible */
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../internal/controller/events.js';
+import { stringConverter } from '../../internal/controller/string-converter.js';
+/**
+ * A text field component.
+ */
 export class TextField extends LitElement {
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.internals.form;
+    }
+    /**
+     * The labels this element is associated with.
+     */
+    get labels() {
+        return this.internals.labels;
+    }
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * Gets or sets the direction in which selection occurred.
+     */
+    get selectionDirection() {
+        return this.getInput().selectionDirection;
+    }
+    set selectionDirection(value) {
+        this.getInput().selectionDirection = value;
+    }
+    /**
+     * Gets or sets the end position or offset of a text selection.
+     */
+    get selectionEnd() {
+        return this.getInput().selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.getInput().selectionEnd = value;
+    }
+    /**
+     * Gets or sets the starting position or offset of a text selection.
+     */
+    get selectionStart() {
+        return this.getInput().selectionStart;
+    }
+    set selectionStart(value) {
+        this.getInput().selectionStart = 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.getInput().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.getInput().validity;
+    }
+    /**
+     * The text field's value as a number.
+     */
+    get valueAsNumber() {
+        return this.getInput().valueAsNumber;
+    }
+    set valueAsNumber(value) {
+        this.getInput().valueAsNumber = value;
+        this.value = this.getInput().value;
+    }
+    /**
+     * The text field's value as a Date.
+     */
+    get valueAsDate() {
+        return this.getInput().valueAsDate;
+    }
+    set valueAsDate(value) {
+        this.getInput().valueAsDate = value;
+        this.value = this.getInput().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.getInput().willValidate;
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
     constructor() {
         super();
         this.disabled = false;
@@ -40,18 +137,8 @@ export class TextField extends LitElement {
         this.required = false;
         /**
          * The current value of the text field. It is always a string.
-         *
-         * This is equal to `defaultValue` before user input.
          */
         this.value = '';
-        /**
-         * The default value of the text field. Before user input, changing the
-         * default value will update `value` as well.
-         *
-         * When the text field is reset, its `value` will be set to this default
-         * value.
-         */
-        this.defaultValue = '';
         /**
          * An optional prefix to display before the input value.
          */
@@ -78,16 +165,6 @@ export class TextField extends LitElement {
          * LTR notation for fractions.
          */
         this.textDirection = '';
-        // ARIA
-        // TODO(b/210730484): replace with @soyParam annotation
-        this.ariaAutoComplete = null;
-        this.ariaControls = null;
-        this.ariaActiveDescendant = null;
-        this.ariaExpanded = null;
-        // tslint:disable:decorator-placement
-        // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-        this.role = null;
-        this.name = '';
         // <input> properties
         /**
          * Defines the greatest value in the range of permitted values.
@@ -137,7 +214,6 @@ export class TextField extends LitElement {
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
          */
         this.step = '';
-        // TODO(b/237284412): replace with exported types
         this.type = 'text';
         /**
          * Returns true when the text field has been interacted with. Native
@@ -151,19 +227,6 @@ export class TextField extends LitElement {
          * to screen readers.
          */
         this.refreshErrorAlert = false;
-        /**
-         * Returns true when the text field's `value` property has been changed from
-         * it's initial value.
-         *
-         * Setting `value` should always overwrite `defaultValue`, even when `value`
-         * is an empty string. This flag ensures that behavior.
-         */
-        this.valueHasChanged = false;
-        /**
-         * Whether or not to ignore the next `value` change when computing
-         * `valueHasChanged`.
-         */
-        this.ignoreNextValueChange = false;
         /**
          * Whether or not a native error has been reported via `reportValidity()`.
          */
@@ -173,97 +236,12 @@ export class TextField extends LitElement {
          * `reportValidity()`.
          */
         this.nativeErrorText = '';
-        /** @soyUniqueAttribute */
-        this.counterId = 'counter';
-        /** @soyUniqueAttribute */
-        this.supportingTextId = 'support';
-        this.addController(new FormController(this));
-        // TODO(b/244574653): replace this.handleClick with this.focus
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
-    // tslint:enable:decorator-placement
-    // FormElement
-    get form() {
-        return this.closest('form');
-    }
-    [getFormValue]() {
-        return this.value;
-    }
-    /**
-     * Gets or sets the direction in which selection occurred.
-     */
-    get selectionDirection() {
-        return this.getInput().selectionDirection;
-    }
-    set selectionDirection(value) {
-        this.getInput().selectionDirection = value;
-    }
-    /**
-     * Gets or sets the end position or offset of a text selection.
-     */
-    get selectionEnd() {
-        return this.getInput().selectionEnd;
-    }
-    set selectionEnd(value) {
-        this.getInput().selectionEnd = value;
-    }
-    /**
-     * Gets or sets the starting position or offset of a text selection.
-     */
-    get selectionStart() {
-        return this.getInput().selectionStart;
-    }
-    set selectionStart(value) {
-        this.getInput().selectionStart = 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.getInput().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.getInput().validity;
-    }
-    /**
-     * The text field's value as a number.
-     */
-    get valueAsNumber() {
-        return this.getInput().valueAsNumber;
-    }
-    set valueAsNumber(value) {
-        this.getInput().valueAsNumber = value;
-        this.value = this.getInput().value;
-    }
-    /**
-     * The text field's value as a Date.
-     */
-    get valueAsDate() {
-        return this.getInput().valueAsDate;
-    }
-    set valueAsDate(value) {
-        this.getInput().valueAsDate = value;
-        this.value = this.getInput().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.getInput().willValidate;
+        this.internals = this /* needed for closure */.attachInternals();
+        if (!isServer) {
+            this.addEventListener('click', this.focus);
+            this.addEventListener('focusin', this.handleFocusin);
+            this.addEventListener('focusout', this.handleFocusout);
+        }
     }
     /**
      * Checks the text field's native validation and returns whether or not the
@@ -288,15 +266,7 @@ export class TextField extends LitElement {
             // button, to the input when focus is requested.
             return;
         }
-        // TODO(b/210731759): replace with super.focus() once SSR supports
-        // delegating focus
-        this.getInput().focus();
-    }
-    /**
-     * Unfocuses the text field.
-     */
-    blur() {
-        this.getInput().blur();
+        super.focus();
     }
     /**
      * Checks the text field's native validation and returns whether or not the
@@ -400,46 +370,62 @@ export class TextField extends LitElement {
      */
     reset() {
         this.dirty = false;
-        this.valueHasChanged = false;
-        this.ignoreNextValueChange = true;
-        this.value = this.defaultValue;
+        this.value = this.getAttribute('value') ?? '';
         this.nativeError = false;
         this.nativeErrorText = '';
     }
-    /** @soyTemplate */
+    attributeChangedCallback(attribute, newValue, oldValue) {
+        if (attribute === 'value' && this.dirty) {
+            // After user input, changing the value attribute no longer updates the
+            // text field's value (until reset). This matches native <input> behavior.
+            return;
+        }
+        super.attributeChangedCallback(attribute, newValue, oldValue);
+    }
     render() {
+        const classes = {
+            'disabled': this.disabled,
+            'error': !this.disabled && this.hasError,
+        };
         return html `
-       <span class="md3-text-field ${classMap(this.getRenderClasses())}">
+       <span class="text-field ${classMap(classes)}">
          ${this.renderField()}
        </span>
      `;
     }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            'md3-text-field--disabled': this.disabled,
-            'md3-text-field--error': this.getError(),
-        };
-    }
-    /** @soyTemplate */
-    getError() {
-        return this.error || this.nativeError;
+    updated(changedProperties) {
+        // Keep changedProperties arg so that subclasses may call it
+        // If a property such as `type` changes and causes the internal <input>
+        // value to change without dispatching an event, re-sync it.
+        const value = this.getInput().value;
+        this.internals.setFormValue(value);
+        if (this.value !== value) {
+            // Note this is typically inefficient in updated() since it schedules
+            // another update. However, it is needed for the <input> to fully render
+            // before checking its value.
+            this.value = value;
+        }
+        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;
+            });
+        }
     }
-    /** @soyTemplate */
     renderField() {
         const prefix = this.renderPrefix();
         const suffix = this.renderSuffix();
         const input = this.renderInput();
-        const inputValue = this.getInputValue();
         return staticHtml `<${this.fieldTag}
-      class="md3-text-field__field"
+      class="field"
       ?disabled=${this.disabled}
-      ?error=${this.getError()}
+      ?error=${this.hasError}
       ?focused=${this.focused}
       ?hasEnd=${this.hasTrailingIcon}
       ?hasStart=${this.hasLeadingIcon}
       .label=${this.label}
-      ?populated=${!!inputValue}
+      ?populated=${!!this.value}
       ?required=${this.required}
     >
       ${this.renderLeadingIcon()}
@@ -449,206 +435,115 @@ export class TextField extends LitElement {
       ${this.renderCounter()}
     </${this.fieldTag}>`;
     }
-    /**
-     * @soyTemplate
-     * @slotName start
-     */
     renderLeadingIcon() {
         return html `
-       <span class="md3-text-field__icon md3-text-field__icon--leading"
-           slot="start">
+       <span class="icon leading" slot="start">
          <slot name="leadingicon" @slotchange=${this.handleIconChange}></slot>
        </span>
      `;
     }
-    /**
-     * @soyTemplate
-     * @slotName end
-     */
     renderTrailingIcon() {
         return html `
-       <span class="md3-text-field__icon md3-text-field__icon--trailing"
-           slot="end">
+       <span class="icon trailing" slot="end">
          <slot name="trailingicon" @slotchange=${this.handleIconChange}></slot>
        </span>
      `;
     }
-    /** @soyTemplate */
     renderInput() {
-        // TODO(b/237283903): remove when custom isTruthy directive is supported
-        const placeholderValue = this.placeholder || undefined;
-        const ariaActiveDescendantValue = this.ariaActiveDescendant || undefined;
-        const ariaAutoCompleteValue = this.ariaAutoComplete || undefined;
-        const ariaControlsValue = this.ariaControls || undefined;
-        const ariaDescribedByValue = this.getAriaDescribedBy() || undefined;
-        const ariaExpandedValue = this.ariaExpanded || undefined;
-        const ariaLabelValue = this.ariaLabel || this.label || undefined;
-        const ariaLabelledByValue = this.ariaLabelledBy || undefined;
-        const maxValue = this.max || undefined;
-        const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined;
-        const minValue = this.min || undefined;
-        const minLengthValue = this.minLength > -1 ? this.minLength : undefined;
-        const patternValue = this.pattern || undefined;
-        const roleValue = this.role || undefined;
-        const stepValue = this.step || undefined;
-        /** @styleMap */
         const style = { direction: this.textDirection };
         // TODO(b/243805848): remove `as unknown as number` once lit analyzer is
         // fixed
         return html `<input
-       class="md3-text-field__input"
        style=${styleMap(style)}
-       aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}
-       aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}
-       aria-controls=${ifDefined(ariaControlsValue)}
-       aria-describedby=${ifDefined(ariaDescribedByValue)}
-       aria-expanded=${ifDefined(ariaExpandedValue)}
-       aria-invalid=${this.getError()}
-       aria-label=${ifDefined(ariaLabelValue)}
-       aria-labelledby=${ifDefined(ariaLabelledByValue)}
+       aria-autocomplete=${this.ariaAutoComplete || nothing}
+       aria-describedby=${this.getAriaDescribedBy() || nothing}
+       aria-expanded=${this.ariaExpanded || nothing}
+       aria-invalid=${this.hasError}
+       aria-label=${this.ariaLabel || this.label || nothing}
        ?disabled=${this.disabled}
-       max=${ifDefined(maxValue)}
-       maxlength=${ifDefined(maxLengthValue)}
-       min=${ifDefined(minValue)}
-       minlength=${ifDefined(minLengthValue)}
-       pattern=${ifDefined(patternValue)}
-       placeholder=${ifDefined(placeholderValue)}
-       role=${ifDefined(roleValue)}
+       max=${(this.max || nothing)}
+       maxlength=${this.maxLength > -1 ? this.maxLength : nothing}
+       min=${(this.min || nothing)}
+       minlength=${this.minLength > -1 ? this.minLength : nothing}
+       pattern=${this.pattern || nothing}
+       placeholder=${this.placeholder || nothing}
        ?readonly=${this.readOnly}
        ?required=${this.required}
-       step=${ifDefined(stepValue)}
+       step=${(this.step || nothing)}
        type=${this.type}
-       .value=${live(this.getInputValue())}
+       .value=${live(this.value)}
        @change=${this.redispatchEvent}
        @input=${this.handleInput}
        @select=${this.redispatchEvent}
      >`;
     }
-    /** @soyTemplate */
-    getInputValue() {
-        const alwaysShowValue = this.dirty || this.valueHasChanged;
-        return alwaysShowValue ? this.value : this.defaultValue || this.value;
-    }
-    /** @soyTemplate */
     getAriaDescribedBy() {
-        const hasSupport = !!this.getSupportingText();
-        const hasCounter = this.hasCounter();
-        // TODO(b/244609052): remove parens
-        return (hasSupport || hasCounter) ?
-            `${hasSupport ? this.supportingTextId : ''} ${hasCounter ? this.counterId : ''}` :
-            '';
+        const ids = [];
+        if (this.getSupportingText()) {
+            ids.push('support');
+        }
+        if (this.getCounterText()) {
+            ids.push('counter');
+        }
+        return ids.join(' ');
     }
-    /** @soyTemplate */
     renderPrefix() {
-        return this.prefixText ?
-            html `<span class="md3-text-field__prefix">${this.prefixText}</span>` :
-            html ``;
-        // TODO(b/217441842): Create shared function once argument bug is fixed
-        // return this.renderAffix(/* isSuffix */ false);
+        return this.renderAffix(this.prefixText, /* isSuffix */ false);
     }
-    /** @soyTemplate */
     renderSuffix() {
-        return this.suffixText ?
-            html `<span class="md3-text-field__suffix">${this.suffixText}</span>` :
-            html ``;
-        // TODO(b/217441842): Create shared function once argument bug is fixed
-        // return this.renderAffix(/* isSuffix */ true);
+        return this.renderAffix(this.suffixText, /* isSuffix */ true);
+    }
+    renderAffix(text, isSuffix) {
+        if (!text) {
+            return nothing;
+        }
+        const classes = {
+            'suffix': isSuffix,
+            'prefix': !isSuffix,
+        };
+        return html `<span class="${classMap(classes)}">${text}</span>`;
     }
-    /**
-     * @soyTemplate
-     * @slotName supporting-text
-     */
     renderSupportingText() {
-        const shouldAlert = this.shouldErrorAnnounce();
         const text = this.getSupportingText();
-        const template = html `<span id=${this.supportingTextId} 
-      slot="supporting-text" 
-      role=${ifDefined(shouldAlert ? 'alert' : undefined)}>${text}</span>`;
-        return text ? template : html ``;
+        if (!text) {
+            return nothing;
+        }
+        return html `<span id="support"
+      slot="supporting-text"
+      role=${this.shouldErrorAnnounce() ? 'alert' : nothing}>${text}</span>`;
     }
-    /** @soyTemplate */
     getSupportingText() {
         const errorText = this.getErrorText();
-        return this.getError() && errorText ? errorText : this.supportingText;
+        return this.hasError && errorText ? errorText : this.supportingText;
     }
-    /** @soyTemplate */
     getErrorText() {
         return this.error ? this.errorText : this.nativeErrorText;
     }
-    /** @soyTemplate */
     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;
+        return this.hasError && !!this.getErrorText() && !this.refreshErrorAlert;
     }
-    /**
-     * @soyTemplate
-     * @slotName supporting-text-end
-     */
     renderCounter() {
-        const counter = html `<span id=${this.counterId}
-       class="md3-text-field__counter"
-       slot="supporting-text-end">${this.getCounterText()}</span>`;
+        const text = this.getCounterText();
+        if (!text) {
+            return nothing;
+        }
         // TODO(b/244473435): add aria-label and announcements
-        return this.hasCounter() ? counter : html ``;
+        return html `<span id="counter"
+       class="counter"
+       slot="supporting-text-end">${text}</span>`;
     }
-    // TODO(b/244197198): replace with !!this.getCounterText()
-    /** @soyTemplate */
-    hasCounter() {
-        return this.maxLength > -1;
-    }
-    /** @soyTemplate */
     getCounterText() {
-        // TODO(b/244197198): replace with string return
-        const length = this.value.length;
-        return this.hasCounter() ? html `${length} / ${this.maxLength}` : html ``;
-    }
-    update(changedProperties) {
-        // Consider a value change anything that is not the initial empty string
-        // value.
-        const valueHasChanged = changedProperties.has('value') &&
-            changedProperties.get('value') !== undefined;
-        if (valueHasChanged && !this.ignoreNextValueChange) {
-            this.valueHasChanged = true;
-        }
-        if (this.ignoreNextValueChange) {
-            this.ignoreNextValueChange = false;
-        }
-        super.update(changedProperties);
-    }
-    updated(changedProperties) {
-        // If a property such as `type` changes and causes the internal <input>
-        // value to change without dispatching an event, re-sync it.
-        const value = this.getInput().value;
-        if (this.value !== value) {
-            // Don't consider these updates (such as setting `defaultValue`) as
-            // the developer directly changing the `value`.
-            this.ignoreNextValueChange = true;
-            // Note this is typically inefficient in updated() since it schedules
-            // another update. However, it is needed for the <input> to fully render
-            // before checking its value.
-            this.value = value;
-        }
-        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;
-            });
-        }
-    }
-    /** @bubbleWizEvent */
-    handleClick() {
-        this.focus();
+        return this.maxLength > -1 ? `${this.value.length} / ${this.maxLength}` :
+            '';
     }
-    /** @bubbleWizEvent */
-    handleFocusin(event) {
+    handleFocusin() {
         this.focused = true;
     }
-    /** @bubbleWizEvent */
-    handleFocusout(event) {
+    handleFocusout() {
         if (this.matches(':focus-within')) {
             // Changing focus to another child within the text field, like a button
             return;
@@ -693,176 +588,108 @@ export class TextField extends LitElement {
         this.hasLeadingIcon = this.leadingIcons.length > 0;
         this.hasTrailingIcon = this.trailingIcons.length > 0;
     }
+    /** @private */
+    formResetCallback() {
+        this.reset();
+    }
+    /** @private */
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
 }
-TextField.shadowRootOptions = { mode: 'open', delegatesFocus: true };
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+_a = TextField;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+/** @nocollapse */
+TextField.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+/** @nocollapse  */
+TextField.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], TextField.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], TextField.prototype, "error", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "errorText", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property()
 ], TextField.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], TextField.prototype, "required", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "value", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], TextField.prototype, "defaultValue", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "prefixText", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "suffixText", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], TextField.prototype, "hasLeadingIcon", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], TextField.prototype, "hasTrailingIcon", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "supportingText", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "textDirection", void 0);
 __decorate([
-    property({ type: String, attribute: 'data-aria-autocomplete', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaAutoComplete", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-controls', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaControls", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaActiveDescendant", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-expanded', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaExpanded", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "ariaLabelledBy", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-role', noAccessor: true }),
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    __metadata("design:type", String)
-], TextField.prototype, "role", void 0);
-__decorate([
-    property({ type: String, reflect: true, converter: stringConverter }),
-    __metadata("design:type", Object)
-], TextField.prototype, "name", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "max", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], TextField.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "min", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], TextField.prototype, "minLength", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "pattern", void 0);
 __decorate([
-    property({ type: String, reflect: true, converter: stringConverter }),
-    __metadata("design:type", Object)
+    property({ reflect: true, converter: stringConverter })
 ], TextField.prototype, "placeholder", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], TextField.prototype, "readOnly", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], TextField.prototype, "step", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
+    property({ reflect: true })
 ], TextField.prototype, "type", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], TextField.prototype, "dirty", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], TextField.prototype, "focused", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], TextField.prototype, "refreshErrorAlert", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
-], TextField.prototype, "valueHasChanged", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], TextField.prototype, "nativeError", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], TextField.prototype, "nativeErrorText", void 0);
 __decorate([
-    query('.md3-text-field__input'),
-    __metadata("design:type", HTMLInputElement)
+    query('input')
 ], TextField.prototype, "input", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'leadingicon' }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ slot: 'leadingicon' })
 ], TextField.prototype, "leadingIcons", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'trailingicon' }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ slot: 'trailingicon' })
 ], TextField.prototype, "trailingIcons", void 0);
 //# sourceMappingURL=text-field.js.map