@material/web 1.0.0-pre.8 → 1.0.0

package/tabs/primary-tab.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { PrimaryTab } from './internal/primary-tab.js';
+import { styles as primaryStyles } from './internal/primary-tab-styles.css.js';
+import { styles as sharedStyles } from './internal/tab-styles.css.js';
+// TODO(b/267336507): add docs
+/**
+ * @summary Tab allow users to display a tab within a Tabs.
+ *
+ */
+export let MdPrimaryTab = class MdPrimaryTab extends PrimaryTab {
+};
+MdPrimaryTab.styles = [sharedStyles, primaryStyles];
+MdPrimaryTab = __decorate([
+    customElement('md-primary-tab')
+], MdPrimaryTab);
+//# sourceMappingURL=primary-tab.js.map

package/tabs/primary-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primary-tab.js","sourceRoot":"","sources":["primary-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,aAAa,EAAC,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAQpE,8BAA8B;AAC9B;;;GAGG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG,CAAC,YAAY,EAAE,aAAa,CAAC,AAAhC,CAAiC;AAD5C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {PrimaryTab} from './internal/primary-tab.js';\nimport {styles as primaryStyles} from './internal/primary-tab-styles.css.js';\nimport {styles as sharedStyles} from './internal/tab-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-primary-tab': MdPrimaryTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n */\n@customElement('md-primary-tab')\nexport class MdPrimaryTab extends PrimaryTab {\n  static override styles = [sharedStyles, primaryStyles];\n}\n"]}

package/tabs/secondary-tab.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SecondaryTab } from './internal/secondary-tab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-secondary-tab': MdSecondaryTab;
+    }
+}
+/**
+ * @summary Tab allow users to display a tab within a Tabs.
+ *
+ */
+export declare class MdSecondaryTab extends SecondaryTab {
+    static styles: import("lit").CSSResult[];
+}

package/tabs/secondary-tab.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { SecondaryTab } from './internal/secondary-tab.js';
+import { styles as secondaryStyles } from './internal/secondary-tab-styles.css.js';
+import { styles as sharedStyles } from './internal/tab-styles.css.js';
+// TODO(b/267336507): add docs
+/**
+ * @summary Tab allow users to display a tab within a Tabs.
+ *
+ */
+export let MdSecondaryTab = class MdSecondaryTab extends SecondaryTab {
+};
+MdSecondaryTab.styles = [sharedStyles, secondaryStyles];
+MdSecondaryTab = __decorate([
+    customElement('md-secondary-tab')
+], MdSecondaryTab);
+//# sourceMappingURL=secondary-tab.js.map

package/tabs/secondary-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary-tab.js","sourceRoot":"","sources":["secondary-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,eAAe,EAAC,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAQpE,8BAA8B;AAC9B;;;GAGG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,eAAe,CAAC,AAAlC,CAAmC;AAD9C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {SecondaryTab} from './internal/secondary-tab.js';\nimport {styles as secondaryStyles} from './internal/secondary-tab-styles.css.js';\nimport {styles as sharedStyles} from './internal/tab-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-secondary-tab': MdSecondaryTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n */\n@customElement('md-secondary-tab')\nexport class MdSecondaryTab extends SecondaryTab {\n  static override styles = [sharedStyles, secondaryStyles];\n}\n"]}

package/tabs/tabs.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Tabs } from './internal/tabs.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-tabs': MdTabs;
+    }
+}
+/**
+ * @summary Tabs displays a list of selectable tabs.
+ *
+ */
+export declare class MdTabs extends Tabs {
+    static styles: import("lit").CSSResult[];
+}

package/tabs/tabs.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Tabs } from './internal/tabs.js';
+import { styles } from './internal/tabs-styles.css.js';
+// TODO(b/267336507): add docs
+/**
+ * @summary Tabs displays a list of selectable tabs.
+ *
+ */
+export let MdTabs = class MdTabs extends Tabs {
+};
+MdTabs.styles = [styles];
+MdTabs = __decorate([
+    customElement('md-tabs')
+], MdTabs);
+//# sourceMappingURL=tabs.js.map

package/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD,8BAA8B;AAC9B;;;GAGG;AAEI,WAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tabs} from './internal/tabs.js';\nimport {styles} from './internal/tabs-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tabs': MdTabs;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tabs displays a list of selectable tabs.\n *\n */\n@customElement('md-tabs')\nexport class MdTabs extends Tabs {\n  static override styles = [styles];\n}\n"]}

package/textfield/_filled-text-field.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-text-field' show theme;
+@forward './internal/filled-text-field' show theme;

package/textfield/_outlined-text-field.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-text-field' show theme;
+@forward './internal/outlined-text-field' show theme;

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

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../field/filled-field.js';
-import { FilledTextField } from './lib/filled-text-field.js';
-export { TextFieldType } from './lib/text-field.js';
+import { FilledTextField } from './internal/filled-text-field.js';
+export { TextFieldType } from './internal/text-field.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-text-field': MdFilledTextField;

package/textfield/filled-text-field.js

@@ -7,16 +7,16 @@ import { __decorate } from "tslib";
 import '../field/filled-field.js';
 import { customElement } from 'lit/decorators.js';
 import { literal } from 'lit/static-html.js';
-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';
+import { styles as filledForcedColorsStyles } from './internal/filled-forced-colors-styles.css.js';
+import { styles as filledStyles } from './internal/filled-styles.css.js';
+import { FilledTextField } from './internal/filled-text-field.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * TODO(b/228525797): Add docs
  * @final
  * @suppress {visibility}
  */
-let MdFilledTextField = class MdFilledTextField extends FilledTextField {
+export let MdFilledTextField = class MdFilledTextField extends FilledTextField {
     constructor() {
         super(...arguments);
         this.fieldTag = literal `md-filled-field`;
@@ -26,5 +26,4 @@ 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

@@ -1 +1 @@
-{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,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;AAUlE;;;;GAIG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,CAAC;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 '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\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\nexport {TextFieldType} from './lib/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\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"]}
+{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,AADpC,CACqC;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from './internal/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { TextField } from './lib/text-field.js';
+import { TextField } from './internal/text-field.js';
 /**
  * Test harness for text field elements.
  */
@@ -44,8 +44,8 @@ export declare class TextFieldHarness extends Harness<TextField> {
     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>;
+    protected simulateInput(element: HTMLInputElement | HTMLTextAreaElement, charactersToAppend: string, init?: InputEventInit): void;
+    protected simulateDeletion(element: HTMLInputElement | HTMLTextAreaElement, beginIndex?: number, endIndex?: number, init?: InputEventInit): void;
+    protected simulateChangeIfNeeded(element: HTMLInputElement | HTMLTextAreaElement): void;
+    protected getInteractiveElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;
 }

package/textfield/harness.js

@@ -67,23 +67,14 @@ export class TextFieldHarness extends Harness {
         }
         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',
+                composed: true,
+                bubbles: true,
                 isComposing: false,
                 data: charactersToAppend,
             };
@@ -97,6 +88,8 @@ export class TextFieldHarness extends Harness {
         if (!init) {
             init = {
                 inputType: 'deleteContentBackward',
+                composed: true,
+                bubbles: true,
                 isComposing: false,
                 data: deletedCharacters,
             };
@@ -112,7 +105,7 @@ export class TextFieldHarness extends Harness {
     }
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('input');
+        return this.element.renderRoot.querySelector('.input');
     }
 }
 //# sourceMappingURL=harness.js.map

package/textfield/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.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 {Harness} from '../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  private 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() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.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 {Harness} from '../testing/harness.js';\n\nimport {TextField} from './internal/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  private 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\n  protected simulateInput(\n      element: HTMLInputElement|HTMLTextAreaElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement|HTMLTextAreaElement, beginIndex?: number,\n      endIndex?: number, 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        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement|\n                                   HTMLTextAreaElement) {\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() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.input') as HTMLInputElement |\n        HTMLTextAreaElement;\n  }\n}\n"]}

package/textfield/internal/_filled-text-field.scss

@@ -0,0 +1,203 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../field/filled-field';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-text-field-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start',
+      'leading-space',
+      'trailing-space',
+      'top-space',
+      'bottom-space',
+      'with-label-top-space',
+      'with-label-bottom-space',
+      'input-text-prefix-trailing-space',
+      'input-text-suffix-leading-space',
+      'focus-caret-color'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $token == 'container-shape' and meta.type-of($value) == 'list' {
+      @error 'Filled text field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
+    }
+
+    @if $value {
+      --md-filled-text-field-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-text-field-values();
+  // Add missing tokens
+  $tokens: map.merge(
+    (
+      'leading-space': 16px,
+      'trailing-space': 16px,
+      'top-space': 16px,
+      'bottom-space': 16px,
+      'input-text-prefix-trailing-space': 2px,
+      'input-text-suffix-leading-space': 2px,
+      'with-label-top-space': 8px,
+      'with-label-bottom-space': 8px,
+      // TODO(b/270705687): remove when focus-caret-color token added
+      'focus-caret-color':
+        map.get(tokens.md-sys-color-values-light(), 'primary'),
+    ),
+    $tokens
+  );
+
+  :host {
+    @each $token, $value in $tokens {
+      @if $token == 'container-shape' {
+        // Support logical shape properties. Filled text field has a default
+        // oblong shape, which is why the fallback value is unique per corner.
+        --_container-shape-start-start: var(
+          --md-filled-text-field-container-shape-start-start,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 1)})
+        );
+        --_container-shape-start-end: var(
+          --md-filled-text-field-container-shape-start-end,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 2)})
+        );
+        --_container-shape-end-end: var(
+          --md-filled-text-field-container-shape-end-end,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 3)})
+        );
+        --_container-shape-end-start: var(
+          --md-filled-text-field-container-shape-end-start,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 4)})
+        );
+      } @else {
+        --_#{$token}: var(--md-filled-text-field-#{$token}, #{$value});
+      }
+    }
+
+    @include filled-field.theme(
+      (
+        // go/keep-sorted start
+        'active-indicator-color': var(--_active-indicator-color),
+        'active-indicator-height': var(--_active-indicator-height),
+        'bottom-space': var(--_bottom-space),
+        'container-color': var(--_container-color),
+        'container-shape-end-end': var(--_container-shape-end-end),
+        'container-shape-end-start': var(--_container-shape-end-start),
+        'container-shape-start-end': var(--_container-shape-start-end),
+        'container-shape-start-start': var(--_container-shape-start-start),
+        'content-color': var(--_input-text-color),
+        'content-font': var(--_input-text-font),
+        'content-line-height': var(--_input-text-line-height),
+        'content-size': var(--_input-text-size),
+        'content-weight': var(--_input-text-weight),
+        'disabled-active-indicator-color':
+          var(--_disabled-active-indicator-color),
+        'disabled-active-indicator-height':
+          var(--_disabled-active-indicator-height),
+        'disabled-active-indicator-opacity':
+          var(--_disabled-active-indicator-opacity),
+        'disabled-container-color': var(--_disabled-container-color),
+        'disabled-container-opacity': var(--_disabled-container-opacity),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
+          var(--_disabled-supporting-text-opacity),
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-active-indicator-color': var(--_error-active-indicator-color),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-active-indicator-color':
+          var(--_error-focus-active-indicator-color),
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-supporting-text-color':
+          var(--_error-focus-supporting-text-color),
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-active-indicator-color':
+          var(--_error-hover-active-indicator-color),
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-state-layer-color': var(--_error-hover-state-layer-color),
+        'error-hover-state-layer-opacity':
+          var(--_error-hover-state-layer-opacity),
+        'error-hover-supporting-text-color':
+          var(--_error-hover-supporting-text-color),
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-active-indicator-color': var(--_focus-active-indicator-color),
+        'focus-active-indicator-height': var(--_focus-active-indicator-height),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-active-indicator-color': var(--_hover-active-indicator-color),
+        'hover-active-indicator-height': var(--_hover-active-indicator-height),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-state-layer-color': var(--_hover-state-layer-color),
+        'hover-state-layer-opacity': var(--_hover-state-layer-opacity),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-font': var(--_label-text-font),
+        'label-text-line-height': var(--_label-text-line-height),
+        'label-text-populated-line-height':
+          var(--_label-text-populated-line-height),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-size': var(--_label-text-size),
+        'label-text-weight': var(--_label-text-weight),
+        'leading-content-color': var(--_leading-icon-color),
+        'leading-space': var(--_leading-space),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-font': var(--_supporting-text-font),
+        'supporting-text-line-height': var(--_supporting-text-line-height),
+        'supporting-text-size': var(--_supporting-text-size),
+        'supporting-text-weight': var(--_supporting-text-weight),
+        'top-space': var(--_top-space),
+        'trailing-content-color': var(--_trailing-icon-color),
+        'trailing-space': var(--_trailing-space),
+        'with-label-bottom-space': var(--_with-label-bottom-space),
+        'with-label-top-space': var(--_with-label-top-space),
+        // go/keep-sorted end
+      )
+    );
+  }
+}

package/textfield/internal/_input.scss

@@ -0,0 +1,79 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .input-wrapper {
+    display: flex;
+  }
+
+  .input-wrapper > * {
+    // Inherit field CSS set on the input wrapper, like font, but not margin or
+    // padding. This wrapper is needed since text fields may have prefix and
+    // suffix text next to an <input>
+    all: inherit;
+    padding: 0;
+  }
+
+  .input {
+    caret-color: var(--_caret-color);
+    // remove extra height added by horizontal scrollbars
+    overflow-x: hidden;
+    text-align: inherit;
+
+    &::placeholder {
+      color: currentColor;
+      opacity: 1;
+    }
+
+    // Remove built-in datepicker icon on Chrome
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+
+    // Remove built-in search icons on Chrome when type='search'
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    @media (forced-colors: active) {
+      background-color: Field; // Remove white background in Firefox HCM
+    }
+  }
+
+  :focus-within .input {
+    caret-color: var(--_focus-caret-color);
+  }
+
+  .error:focus-within .input {
+    caret-color: var(--_error-focus-caret-color);
+  }
+
+  .text-field:not(.disabled) .prefix {
+    color: var(--_input-text-prefix-color);
+  }
+
+  .text-field:not(.disabled) .suffix {
+    color: var(--_input-text-suffix-color);
+  }
+
+  .text-field:not(.disabled) .input::placeholder {
+    color: var(--_input-text-placeholder-color);
+  }
+
+  .prefix,
+  .suffix {
+    text-wrap: nowrap;
+    width: min-content;
+  }
+
+  .prefix {
+    padding-inline-end: var(--_input-text-prefix-trailing-space);
+  }
+
+  .suffix {
+    padding-inline-start: var(--_input-text-suffix-leading-space);
+  }
+}