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

package/textfield/lib/text-field.js

@@ -1,15 +1,12 @@
 /**
- * @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';
+import { html, 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';
@@ -17,8 +14,94 @@ 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 */
+/**
+ * A text field component.
+ */
 export class TextField extends LitElement {
+    // 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;
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
     constructor() {
         super();
         this.disabled = false;
@@ -79,13 +162,10 @@ export class TextField extends LitElement {
          */
         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
@@ -137,7 +217,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
@@ -173,98 +252,11 @@ 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('click', this.focus);
         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;
-    }
     /**
      * Checks the text field's native validation and returns whether or not the
      * element is valid.
@@ -288,15 +280,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
@@ -406,40 +390,65 @@ export class TextField extends LitElement {
         this.nativeError = false;
         this.nativeErrorText = '';
     }
-    /** @soyTemplate */
+    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);
+    }
     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;
+        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;
+            });
+        }
     }
-    /** @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.getInputValue()}
       ?required=${this.required}
     >
       ${this.renderLeadingIcon()}
@@ -449,74 +458,44 @@ 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-activedescendant=${this.ariaActiveDescendant || nothing}
+       aria-autocomplete=${this.ariaAutoComplete || nothing}
+       aria-controls=${this.ariaControls || 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}
+       role=${this.role || nothing}
        ?readonly=${this.readOnly}
        ?required=${this.required}
-       step=${ifDefined(stepValue)}
+       step=${(this.step || nothing)}
        type=${this.type}
        .value=${live(this.getInputValue())}
        @change=${this.redispatchEvent}
@@ -524,131 +503,80 @@ export class TextField extends LitElement {
        @select=${this.redispatchEvent}
      >`;
     }
-    /** @soyTemplate */
     getInputValue() {
         const alwaysShowValue = this.dirty || this.valueHasChanged;
-        return alwaysShowValue ? this.value : this.defaultValue || this.value;
+        if (alwaysShowValue) {
+            return this.value;
+        }
+        return 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;
@@ -694,7 +622,7 @@ export class TextField extends LitElement {
         this.hasTrailingIcon = this.trailingIcons.length > 0;
     }
 }
-TextField.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+TextField.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
@@ -777,12 +705,6 @@ __decorate([
     ,
     __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
@@ -854,7 +776,7 @@ __decorate([
     __metadata("design:type", Object)
 ], TextField.prototype, "nativeErrorText", void 0);
 __decorate([
-    query('.md3-text-field__input'),
+    query('input'),
     __metadata("design:type", HTMLInputElement)
 ], TextField.prototype, "input", void 0);
 __decorate([