@material/web 0.1.0-alpha.0

package/switch/lib/switch.js

@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/web/focus/focus-ring.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { ariaProperty as legacyAriaProperty } from '@material/web/compat/base/aria-property.js'; // TODO(b/236840525): remove compat dependencies
+import { FormController, getFormValue } from '@material/web/controller/form-controller.js';
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { pointerPress as focusRingPointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
+import { html } from 'lit';
+import { eventOptions, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class Switch extends ActionElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.processing = false;
+        this.selected = false;
+        this.icons = false;
+        this.showOnlySelectedIcon = false;
+        // TODO: Add support in @ariaProperty for idref aria attributes
+        /** @soyPrefixAttribute */
+        this.ariaLabelledBy = '';
+        this.showFocusRing = false;
+        this.name = '';
+        this.value = 'on';
+        this.addController(new FormController(this));
+    }
+    // FormController
+    get form() {
+        return this.closest('form');
+    }
+    [getFormValue]() {
+        return this.selected ? this.value : null;
+    }
+    click() {
+        this.endPress({ cancelled: false });
+        super.click();
+    }
+    /** @soyTemplate */
+    render() {
+        const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;
+        const ariaLabelledByValue = this.ariaLabelledBy ? this.ariaLabelledBy : undefined;
+        // TODO(b/230763631): update this template to include spans instead of divs
+        return html `
+      <button
+        type="button"
+        class="md3-switch ${classMap(this.getRenderClasses())}"
+        role="switch"
+        aria-checked="${this.selected}"
+        aria-label="${ifDefined(ariaLabelValue)}"
+        aria-labelledby="${ifDefined(ariaLabelledByValue)}"
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
+        @pointerdown=${this.handlePointerDown}
+        @pointerup=${this.handlePointerUp}
+        @pointercancel=${this.handlePointerCancel}
+        @pointerleave=${this.handlePointerLeave}
+        @contextmenu=${this.handleContextMenu}
+      >
+        ${this.renderFocusRing()}
+        <div class="md3-switch__track">
+          ${this.renderHandle()}
+        </div>
+      </button>
+
+      <input
+        class="md3-switch__input"
+        type="checkbox"
+        aria-hidden="true"
+        name="${this.name}"
+        ?checked=${this.selected}
+        .value=${this.value}
+      >
+    `;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-switch--processing': this.processing,
+            'md3-switch--selected': this.selected,
+            'md3-switch--unselected': !this.selected,
+        };
+    }
+    /** @soyTemplate */
+    renderFocusRing() {
+        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    }
+    /** @soyTemplate */
+    renderHandle() {
+        /** @classMap */
+        const classes = {
+            'md3-switch__handle--big': this.icons && !this.showOnlySelectedIcon,
+        };
+        return html `
+      <div class="md3-switch__handle-container">
+        <div class="md3-switch__handle ${classMap(classes)}">
+          ${this.shouldShowIcons() ? this.renderIcons() : html ``}
+        </div>
+        ${this.renderTouchTarget()}
+      </div>
+    `;
+    }
+    /** @soyTemplate */
+    renderIcons() {
+        return html `
+      <div class="md3-switch__icons">
+        ${this.renderOnIcon()}
+        ${this.showOnlySelectedIcon ? html `` : this.renderOffIcon()}
+      </div>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     *
+     * @soyTemplate
+     */
+    renderOnIcon() {
+        return html `
+      <svg class="md3-switch__icon md3-switch__icon--on" viewBox="0 0 24 24">
+        <path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/>
+      </svg>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     *
+     * @soyTemplate
+     */
+    renderOffIcon() {
+        return html `
+      <svg class="md3-switch__icon md3-switch__icon--off" viewBox="0 0 24 24">
+        <path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/>
+      </svg>
+    `;
+    }
+    /** @soyTemplate */
+    renderTouchTarget() {
+        return html `<span class="md3-switch__touch"></span>`;
+    }
+    /** @soyTemplate */
+    shouldShowIcons() {
+        return this.icons || this.showOnlySelectedIcon;
+    }
+    endPress({ cancelled }) {
+        if (cancelled || this.disabled) {
+            return;
+        }
+        this.selected = !this.selected;
+        super.endPress({ cancelled, actionData: { selected: this.selected } });
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+    handlePointerDown(event) {
+        super.handlePointerDown(event);
+        focusRingPointerPress();
+        this.showFocusRing = false;
+    }
+}
+Switch.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Switch.prototype, "processing", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Switch.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Switch.prototype, "icons", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Switch.prototype, "showOnlySelectedIcon", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    // TODO(b/210730484): replace with @soyParam annotation
+    ,
+    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
+    __metadata("design:type", String)
+], Switch.prototype, "ariaLabel", void 0);
+__decorate([
+    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-labelledby' }),
+    __metadata("design:type", Object)
+], Switch.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Switch.prototype, "showFocusRing", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Switch.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Switch.prototype, "value", void 0);
+__decorate([
+    eventOptions({ passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], Switch.prototype, "handlePointerDown", null);
+//# sourceMappingURL=switch.js.map

package/switch/lib/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/focus-ring.js';\n\nimport {ActionElement, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';  // TODO(b/236840525): remove compat dependencies\nimport {FormController, getFormValue} from '@material/web/controller/form-controller.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress as focusRingPointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {html, TemplateResult} from 'lit';\nimport {eventOptions, property, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class Switch extends ActionElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @property({type: Boolean}) processing = false;\n  @property({type: Boolean}) selected = false;\n  @property({type: Boolean}) icons = false;\n  @property({type: Boolean}) showOnlySelectedIcon = false;\n\n  // Aria\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  // TODO(b/210730484): replace with @soyParam annotation\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  // TODO: Add support in @ariaProperty for idref aria attributes\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-labelledby'})\n  ariaLabelledBy = '';\n\n  @state() protected showFocusRing = false;\n\n  // FormController\n  get form() {\n    return this.closest('form');\n  }\n  @property({type: String, reflect: true}) name = '';\n  @property({type: String}) value = 'on';\n  [getFormValue]() {\n    return this.selected ? this.value : null;\n  }\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n  }\n\n  override click() {\n    this.endPress({cancelled: false});\n    super.click();\n  }\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;\n    const ariaLabelledByValue =\n        this.ariaLabelledBy ? this.ariaLabelledBy : undefined;\n    // TODO(b/230763631): update this template to include spans instead of divs\n    return html`\n      <button\n        type=\"button\"\n        class=\"md3-switch ${classMap(this.getRenderClasses())}\"\n        role=\"switch\"\n        aria-checked=\"${this.selected}\"\n        aria-label=\"${ifDefined(ariaLabelValue)}\"\n        aria-labelledby=\"${ifDefined(ariaLabelledByValue)}\"\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=${this.handlePointerDown}\n        @pointerup=${this.handlePointerUp}\n        @pointercancel=${this.handlePointerCancel}\n        @pointerleave=${this.handlePointerLeave}\n        @contextmenu=${this.handleContextMenu}\n      >\n        ${this.renderFocusRing()}\n        <div class=\"md3-switch__track\">\n          ${this.renderHandle()}\n        </div>\n      </button>\n\n      <input\n        class=\"md3-switch__input\"\n        type=\"checkbox\"\n        aria-hidden=\"true\"\n        name=\"${this.name}\"\n        ?checked=${this.selected}\n        .value=${this.value}\n      >\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-switch--processing': this.processing,\n      'md3-switch--selected': this.selected,\n      'md3-switch--unselected': !this.selected,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /** @soyTemplate */\n  protected renderHandle(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-switch__handle--big': this.icons && !this.showOnlySelectedIcon,\n    };\n    return html`\n      <div class=\"md3-switch__handle-container\">\n        <div class=\"md3-switch__handle ${classMap(classes)}\">\n          ${this.shouldShowIcons() ? this.renderIcons() : html``}\n        </div>\n        ${this.renderTouchTarget()}\n      </div>\n    `;\n  }\n\n  /** @soyTemplate */\n  private renderIcons(): TemplateResult {\n    return html`\n      <div class=\"md3-switch__icons\">\n        ${this.renderOnIcon()}\n        ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n      </div>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   *\n   * @soyTemplate\n   */\n  protected renderOnIcon(): TemplateResult {\n    return html`\n      <svg class=\"md3-switch__icon md3-switch__icon--on\" viewBox=\"0 0 24 24\">\n        <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n      </svg>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   *\n   * @soyTemplate\n   */\n  protected renderOffIcon(): TemplateResult {\n    return html`\n      <svg class=\"md3-switch__icon md3-switch__icon--off\" viewBox=\"0 0 24 24\">\n        <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n      </svg>\n    `;\n  }\n\n  /** @soyTemplate */\n  private renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-switch__touch\"></span>`;\n  }\n\n  /** @soyTemplate */\n  private shouldShowIcons(): boolean {\n    return this.icons || this.showOnlySelectedIcon;\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    if (cancelled || this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    super.endPress({cancelled, actionData: {selected: this.selected}});\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  @eventOptions({passive: true})\n  override handlePointerDown(event: PointerEvent) {\n    super.handlePointerDown(event);\n    focusRingPointerPress();\n    this.showFocusRing = false;\n  }\n}\n"]}

package/switch/switch.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Switch } from './lib/switch.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-switch': MdSwitch;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSwitch extends Switch {
+    static styles: import("lit").CSSResult[];
+}

package/switch/switch.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Switch } from './lib/switch.js';
+import { styles } from './lib/switch-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdSwitch = class MdSwitch extends Switch {
+};
+MdSwitch.styles = [styles];
+MdSwitch = __decorate([
+    customElement('md-switch')
+], MdSwitch);
+export { MdSwitch };
+//# sourceMappingURL=switch.js.map

package/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,MAAM;CAEnC,CAAA;AADiB,eAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Switch} from './lib/switch.js';\nimport {styles} from './lib/switch-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-switch')\nexport class MdSwitch extends Switch {\n  static override styles = [styles];\n}\n"]}

package/textfield/_filled-text-field.scss

@@ -0,0 +1,9 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-text-field-theme' show
+  $dark-theme,
+  $light-theme,
+  theme;

package/textfield/_outlined-text-field.scss

@@ -0,0 +1,9 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/outlined-text-field-theme' show
+  $dark-theme,
+  $light-theme,
+  theme;

package/textfield/filled-text-field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/field/filled-field.js';
+import { FilledTextField } from './lib/filled-text-field.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-text-field': MdFilledTextField;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledTextField extends FilledTextField {
+    static styles: import("lit").CSSResult[];
+    protected readonly fieldTag: import("lit-html/static.js").StaticValue;
+}

package/textfield/filled-text-field.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/field/filled-field.js';
+import { customElement } from 'lit/decorators.js';
+import { literal } from 'lit/static-html.js';
+// TODO(b/236285090): update with HCM best practices
+import { styles as filledForcedColorsStyles } from './lib/filled-forced-colors-styles.css.js';
+import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { FilledTextField } from './lib/filled-text-field.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledTextField = class MdFilledTextField extends FilledTextField {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = literal `md-filled-field`;
+    }
+};
+MdFilledTextField.styles = [sharedStyles, filledStyles, filledForcedColorsStyles];
+MdFilledTextField = __decorate([
+    customElement('md-filled-text-field')
+], MdFilledTextField);
+export { MdFilledTextField };
+//# sourceMappingURL=filled-text-field.js.map

package/textfield/filled-text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,qCAAqC,CAAC;AAE7C,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,oDAAoD;AACpD,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,eAAe;IAAtD;;QAI8B,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;CAAA,CAAA;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAE,CAAA;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B;SALY,iBAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {FilledTextField} from './lib/filled-text-field.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles =\n      [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}

package/textfield/harness.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { TextField } from './lib/text-field.js';
+/**
+ * Test harness for text field elements.
+ */
+export declare class TextFieldHarness extends Harness<TextField> {
+    /** Used to track whether or not a change event should be dispatched. */
+    protected valueBeforeChange: string;
+    /**
+     * Simulates a user typing a value one character at a time. This will fire
+     * multiple input events.
+     *
+     * Use focus/blur to ensure change events are fired.
+     *
+     * @example
+     * await harness.focusWithKeyboard();
+     * await harness.inputValue('value'); // input events
+     * await harness.blur(); // change event
+     *
+     * @param value The value to simulating typing.
+     */
+    inputValue(value: string): Promise<void>;
+    /**
+     * Simulates a user deleting part of a value with the backspace key.
+     * By default, the entire value is deleted. This will fire a single input
+     * event.
+     *
+     * Use focus/blur to ensure change events are fired.
+     *
+     * @example
+     * await harness.focusWithKeyboard();
+     * await harness.deleteValue(); // input event
+     * await harness.blur(); // change event
+     *
+     * @param beginIndex The starting index of the value to delete.
+     * @param endIndex The ending index of the value to delete.
+     */
+    deleteValue(beginIndex?: number, endIndex?: number): Promise<void>;
+    reset(): Promise<void>;
+    blur(): Promise<void>;
+    protected simulatePointerFocus(input: HTMLElement): void;
+    protected simulateInput(element: HTMLInputElement, charactersToAppend: string, init?: InputEventInit): void;
+    protected simulateDeletion(element: HTMLInputElement, beginIndex?: number, endIndex?: number, init?: InputEventInit): void;
+    protected simulateChangeIfNeeded(element: HTMLInputElement): void;
+    protected getInteractiveElement(): Promise<HTMLInputElement>;
+}

package/textfield/harness.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for text field elements.
+ */
+export class TextFieldHarness extends Harness {
+    constructor() {
+        super(...arguments);
+        /** Used to track whether or not a change event should be dispatched. */
+        this.valueBeforeChange = '';
+    }
+    /**
+     * Simulates a user typing a value one character at a time. This will fire
+     * multiple input events.
+     *
+     * Use focus/blur to ensure change events are fired.
+     *
+     * @example
+     * await harness.focusWithKeyboard();
+     * await harness.inputValue('value'); // input events
+     * await harness.blur(); // change event
+     *
+     * @param value The value to simulating typing.
+     */
+    async inputValue(value) {
+        for (const char of value) {
+            this.simulateKeypress(await this.getInteractiveElement(), char);
+            this.simulateInput(await this.getInteractiveElement(), char);
+        }
+    }
+    /**
+     * Simulates a user deleting part of a value with the backspace key.
+     * By default, the entire value is deleted. This will fire a single input
+     * event.
+     *
+     * Use focus/blur to ensure change events are fired.
+     *
+     * @example
+     * await harness.focusWithKeyboard();
+     * await harness.deleteValue(); // input event
+     * await harness.blur(); // change event
+     *
+     * @param beginIndex The starting index of the value to delete.
+     * @param endIndex The ending index of the value to delete.
+     */
+    async deleteValue(beginIndex, endIndex) {
+        this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');
+        this.simulateDeletion(await this.getInteractiveElement(), beginIndex, endIndex);
+    }
+    async reset() {
+        this.element.reset();
+        this.valueBeforeChange = this.element.value;
+        await super.reset();
+    }
+    async blur() {
+        await super.blur();
+        this.simulateChangeIfNeeded(await this.getInteractiveElement());
+    }
+    simulatePointerFocus(input) {
+        const textField = this.element;
+        if (textField.disabled) {
+            return;
+        }
+        this.valueBeforeChange = textField.value;
+        super.simulatePointerFocus(input);
+        const prevFocus = input.focus;
+        if (prevFocus === HTMLElement.prototype.focus) {
+            // Swap to a no-op if nobody is spying on this method so that we don't
+            // generate side-effects when we actually call focus().
+            input.focus = () => { };
+        }
+        // Call focus() as a side-effect since delegatesFocus won't be triggered
+        // with this simulation. Replace input.focus() with a no-op if needed to
+        // avoid actually calling focus.
+        textField.focus();
+        input.focus = prevFocus;
+    }
+    simulateInput(element, charactersToAppend, init) {
+        element.value += charactersToAppend;
+        if (!init) {
+            init = {
+                inputType: 'insertText',
+                isComposing: false,
+                data: charactersToAppend,
+            };
+        }
+        element.dispatchEvent(new InputEvent('input', init));
+    }
+    simulateDeletion(element, beginIndex, endIndex, init) {
+        const deletedCharacters = element.value.slice(beginIndex, endIndex);
+        element.value = element.value.substring(0, beginIndex ?? 0) +
+            element.value.substring(endIndex ?? element.value.length);
+        if (!init) {
+            init = {
+                inputType: 'deleteContentBackward',
+                isComposing: false,
+                data: deletedCharacters,
+            };
+        }
+        element.dispatchEvent(new InputEvent('input', init));
+    }
+    simulateChangeIfNeeded(element) {
+        if (this.valueBeforeChange === element.value) {
+            return;
+        }
+        this.valueBeforeChange = element.value;
+        element.dispatchEvent(new Event('change'));
+    }
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.md3-text-field__input');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/textfield/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,OAAkB;IAAxD;;QACE,wEAAwE;QAC9D,sBAAiB,GAAG,EAAE,CAAC;IA2HnC,CAAC;IAzHC;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,UAAU,CAAC,KAAa;QAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;YAChE,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;SAC9D;IACH,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,WAAW,CAAC,UAAmB,EAAE,QAAiB;QACtD,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,WAAW,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,CACjB,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC;IAEQ,KAAK,CAAC,KAAK;QAClB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAC5C,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,sBAAsB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAClE,CAAC;IAEkB,oBAAoB,CAAC,KAAkB;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,IAAI,SAAS,CAAC,QAAQ,EAAE;YACtB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC;QACzC,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAElC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC9B,IAAI,SAAS,KAAK,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE;YAC7C,sEAAsE;YACtE,uDAAuD;YACvD,KAAK,CAAC,KAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;SACxB;QAED,wEAAwE;QACxE,wEAAwE;QACxE,gCAAgC;QAChC,SAAS,CAAC,KAAK,EAAE,CAAC;QAClB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC1B,CAAC;IAES,aAAa,CACnB,OAAyB,EAAE,kBAA0B,EACrD,IAAqB;QACvB,OAAO,CAAC,KAAK,IAAI,kBAAkB,CAAC;QACpC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,YAAY;gBACvB,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,kBAAkB;aACzB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,gBAAgB,CACtB,OAAyB,EAAE,UAAmB,EAAE,QAAiB,EACjE,IAAqB;QACvB,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,IAAI,CAAC,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,uBAAuB;gBAClC,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,iBAAiB;aACxB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,sBAAsB,CAAC,OAAyB;QACxD,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,KAAK,EAAE;YAC5C,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC;QACvC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CACjD,CAAC;IACvB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {TextField} from './lib/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  protected valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n\n    const prevFocus = input.focus;\n    if (prevFocus === HTMLElement.prototype.focus) {\n      // Swap to a no-op if nobody is spying on this method so that we don't\n      // generate side-effects when we actually call focus().\n      input.focus = () => {};\n    }\n\n    // Call focus() as a side-effect since delegatesFocus won't be triggered\n    // with this simulation. Replace input.focus() with a no-op if needed to\n    // avoid actually calling focus.\n    textField.focus();\n    input.focus = prevFocus;\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement, beginIndex?: number, endIndex?: number,\n      init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement(): Promise<HTMLInputElement> {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-text-field__input') as\n        HTMLInputElement;\n  }\n}\n"]}