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

package/field/lib/_supporting-text.scss

@@ -3,81 +3,54 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use '../../sass/typography';
-
 @mixin styles() {
-  .md3-field__supporting-text {
+  .supporting-text {
     color: var(--_supporting-text-color);
     display: flex;
     justify-content: space-between;
     padding: 0 var(--_supporting-text-padding);
-
-    @include typography.theme-styles(
-      (
-        font: var(--_supporting-text-font),
-        tracking: var(--_supporting-text-tracking),
-        weight: var(--_supporting-text-weight),
-        size: var(--_supporting-text-size),
-        line-height: var(--_supporting-text-line-height),
-      )
-    );
+    font: var(--_supporting-text-type);
   }
 
-  .md3-field__supporting-text-start,
-  .md3-field__supporting-text-end {
+  .supporting-text-start,
+  .supporting-text-end {
     // Can't be an inline display element (<span>) for padding-top to work.
     display: flex;
+  }
 
+  .supporting-text-start ::slotted(:not(:empty)),
+  .supporting-text-end ::slotted(:not(:empty)) {
     // Add padding to slotted elements instead of the wrappers so that it does not
     // show when the supporting text is empty.
-    ::slotted(:not(:empty)) {
-      padding-top: var(--_supporting-text-padding-top);
-    }
+    padding-top: var(--_supporting-text-padding-top);
   }
 
-  .md3-field__supporting-text-end {
-    ::slotted(:not(:empty)) {
-      padding-inline-start: var(--_supporting-text-padding);
-    }
+  .supporting-text-end ::slotted(:not(:empty)) {
+    padding-inline-start: var(--_supporting-text-padding);
   }
 
-  :hover {
-    .md3-field__supporting-text {
-      color: var(--_hover-supporting-text-color);
-    }
+  :hover .supporting-text {
+    color: var(--_hover-supporting-text-color);
   }
 
-  .md3-field--focus {
-    .md3-field__supporting-text {
-      color: var(--_focus-supporting-text-color);
-    }
+  .focus .supporting-text {
+    color: var(--_focus-supporting-text-color);
   }
 
-  .md3-field--disabled {
-    .md3-field__supporting-text {
-      color: var(--_disabled-supporting-text-color);
-      opacity: var(--_disabled-supporting-text-opacity);
-    }
+  .disabled .supporting-text {
+    color: var(--_disabled-supporting-text-color);
+    opacity: var(--_disabled-supporting-text-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__supporting-text {
-      color: var(--_error-supporting-text-color);
-    }
+  .error .supporting-text {
+    color: var(--_error-supporting-text-color);
+  }
 
-    &:hover {
-      .md3-field__supporting-text {
-        color: var(--_error-hover-supporting-text-color);
-      }
-    }
+  .error:hover .supporting-text {
+    color: var(--_error-hover-supporting-text-color);
+  }
 
-    &.md3-field--focus {
-      .md3-field__supporting-text {
-        color: var(--_error-focus-supporting-text-color);
-      }
-    }
+  .error.focus .supporting-text {
+    color: var(--_error-focus-supporting-text-color);
   }
 }

package/field/lib/field.d.ts

@@ -1,13 +1,12 @@
 /**
- * @requirecss {field.lib.shared_styles}
- *
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+/**
+ * A field component.
+ */
 export declare class Field extends LitElement {
     disabled: boolean;
     error: boolean;
@@ -23,34 +22,16 @@ export declare class Field extends LitElement {
      * Whether or not the field has trailing content.
      */
     hasEnd: boolean;
-    protected isAnimating: boolean;
-    protected readonly labelAnimationSignal: import("../../motion/animation.js").AnimationSignal;
-    protected readonly floatingLabelEl: Promise<HTMLElement>;
-    protected readonly restingLabelEl: Promise<HTMLElement>;
-    /** @soyTemplate */
-    render(): TemplateResult;
-    /** @soyTemplate */
-    protected renderContainer(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected renderContainerContents(): TemplateResult;
-    /** @soyTemplate */
-    protected renderMiddleContents(): TemplateResult;
-    /** @soyTemplate */
-    protected renderFloatingLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderRestingLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLabelText(): string;
-    /** @soyTemplate */
-    protected renderSupportingText(): TemplateResult;
+    private isAnimating;
+    private readonly labelAnimationSignal;
+    private readonly floatingLabelEl;
+    private readonly restingLabelEl;
     protected update(props: PropertyValues<Field>): void;
-    protected animateLabelIfNeeded({ wasFocused, wasPopulated }: {
-        wasFocused?: boolean;
-        wasPopulated?: boolean;
-    }): Promise<void>;
-    protected getLabelKeyframes(): Promise<{
-        transform: string;
-    }[]>;
+    protected render(): TemplateResult<1>;
+    protected renderBackground?(): TemplateResult;
+    protected renderIndicator?(): TemplateResult;
+    protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;
+    private renderLabel;
+    private animateLabelIfNeeded;
+    private getLabelKeyframes;
 }

package/field/lib/field.js

@@ -1,16 +1,16 @@
 /**
- * @requirecss {field.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, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createAnimationSignal, Easing } from '../../motion/animation.js';
-/** @soyCompatible */
+import { createAnimationSignal, EASING } from '../../motion/animation.js';
+/**
+ * A field component.
+ */
 export class Field extends LitElement {
     constructor() {
         super(...arguments);
@@ -30,99 +30,6 @@ export class Field extends LitElement {
         this.isAnimating = false;
         this.labelAnimationSignal = createAnimationSignal();
     }
-    /** @soyTemplate */
-    render() {
-        return html `
-      <span class="md3-field ${classMap(this.getRenderClasses())}">
-        ${this.renderContainer()}
-        ${this.renderSupportingText()}
-      </span>
-    `;
-    }
-    /** @soyTemplate */
-    renderContainer() {
-        return html `
-      <span class="md3-field__container">
-        ${this.renderContainerContents()}
-      </span>
-    `;
-    }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            'md3-field--disabled': this.disabled,
-            'md3-field--error': this.error,
-            'md3-field--focused': this.focused,
-            'md3-field--with-start': this.hasStart,
-            'md3-field--with-end': this.hasEnd,
-            'md3-field--populated': this.populated,
-            'md3-field--required': this.required,
-            'md3-field--no-label': !this.label,
-        };
-    }
-    /** @soyTemplate */
-    renderContainerContents() {
-        return html `
-      <span class="md3-field__start">
-        <slot name="start"></slot>
-      </span>
-      <span class="md3-field__middle">${this.renderMiddleContents()}</span>
-      <span class="md3-field__end">
-        <slot name="end"></slot>
-      </span>
-    `;
-    }
-    /** @soyTemplate */
-    renderMiddleContents() {
-        return html `
-      <span class="md3-field__content"><slot></slot></span>
-    `;
-    }
-    /** @soyTemplate */
-    renderFloatingLabel() {
-        const visible = (this.focused || this.populated) && !this.isAnimating;
-        /** @classMap */
-        const classes = { 'md3-field__label--hidden': !visible };
-        return html `
-      <span class="md3-field__label md3-field__label--floating ${classMap(classes)}"
-        aria-hidden=${!visible}
-      >${this.renderLabelText()}</span>
-    `;
-        // TODO(b/217441842): Create shared function once argument bug is fixed
-        // return this.renderLabel(LabelType.FLOATING);
-    }
-    /** @soyTemplate */
-    renderRestingLabel() {
-        const visible = !(this.focused || this.populated) || this.isAnimating;
-        /** @classMap */
-        const classes = { 'md3-field__label--hidden': !visible };
-        return html `
-      <span class="md3-field__label md3-field__label--resting ${classMap(classes)}"
-        aria-hidden=${!visible}
-      >${this.renderLabelText()}</span>
-    `;
-        // TODO(b/217441842): Create shared function once argument bug is fixed
-        // return this.renderLabel(LabelType.RESTING);
-    }
-    /** @soyTemplate */
-    renderLabelText() {
-        const labelText = this.label ?? '';
-        const optionalAsterisk = this.required && labelText ? '*' : '';
-        return labelText + optionalAsterisk;
-    }
-    /** @soyTemplate */
-    renderSupportingText() {
-        return html `
-      <span class="md3-field__supporting-text">
-        <span class="md3-field__supporting-text-start">
-          <slot name="supporting-text"></slot>
-        </span>
-        <span class="md3-field__supporting-text-end">
-          <slot name="supporting-text-end"></slot>
-        </span>
-      </span>
-    `;
-    }
     update(props) {
         // Client-side property updates
         // When disabling, remove focus styles if focused.
@@ -137,6 +44,77 @@ export class Field extends LitElement {
         });
         super.update(props);
     }
+    render() {
+        const floatingLabel = this.renderLabel(/*isFloating*/ true);
+        const restingLabel = this.renderLabel(/*isFloating*/ false);
+        const outline = this.renderOutline?.(floatingLabel);
+        const classes = {
+            'disabled': this.disabled,
+            'error': this.error && !this.disabled,
+            'focused': this.focused,
+            'with-start': this.hasStart,
+            'with-end': this.hasEnd,
+            'populated': this.populated,
+            'required': this.required,
+            'no-label': !this.label,
+        };
+        return html `
+      <div class="field ${classMap(classes)}">
+        <div class="container">
+          ${this.renderBackground?.()}
+          ${this.renderIndicator?.()}
+          ${outline}
+          <div class="start">
+            <slot name="start"></slot>
+          </div>
+          <div class="middle">
+            ${restingLabel}
+            ${outline ? nothing : floatingLabel}
+            <div class="content">
+              <slot></slot>
+            </div>
+          </div>
+          <div class="end">
+            <slot name="end"></slot>
+          </div>
+        </div>
+
+        <div class="supporting-text">
+          <div class="supporting-text-start">
+            <slot name="supporting-text"></slot>
+          </div>
+          <div class="supporting-text-end">
+            <slot name="supporting-text-end"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderLabel(isFloating) {
+        let visible;
+        if (isFloating) {
+            // Floating label is visible when focused/populated. It is never visible
+            // while animating.
+            visible = (this.focused || this.populated) && !this.isAnimating;
+        }
+        else {
+            // Resting label is visible when unfocused or while animating.
+            visible = !(this.focused || this.populated) || this.isAnimating;
+        }
+        const classes = {
+            'hidden': !visible,
+            'floating': isFloating,
+            'resting': !isFloating,
+        };
+        let labelText = this.label ?? '';
+        // Add '*' if a label is present and the field is required
+        labelText += this.required && labelText ? '*' : '';
+        return html `
+      <span class="label ${classMap(classes)}"
+        aria-hidden=${!visible}
+      >${labelText}</span>
+    `;
+    }
     async animateLabelIfNeeded({ wasFocused, wasPopulated }) {
         if (!this.label) {
             return;
@@ -168,7 +146,7 @@ export class Field extends LitElement {
         // Re-calculating the animation each time will prevent any visual glitches
         // from appearing.
         // TODO(b/241113345): use animation tokens
-        const animation = labelEl.animate(keyframes, { duration: 150, easing: Easing.STANDARD });
+        const animation = labelEl.animate(keyframes, { duration: 150, easing: EASING.STANDARD });
         signal.addEventListener('abort', () => {
             // Cancel if requested (another animation starts playing).
             animation.cancel();
@@ -243,11 +221,11 @@ __decorate([
     __metadata("design:type", Object)
 ], Field.prototype, "isAnimating", void 0);
 __decorate([
-    queryAsync('.md3-field__label--floating'),
+    queryAsync('.label.floating'),
     __metadata("design:type", Promise)
 ], Field.prototype, "floatingLabelEl", void 0);
 __decorate([
-    queryAsync('.md3-field__label--resting'),
+    queryAsync('.label.resting'),
     __metadata("design:type", Promise)
 ], Field.prototype, "restingLabelEl", void 0);
 //# sourceMappingURL=field.js.map

package/field/lib/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["field.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAC,qBAAqB,EAAE,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAExE,qBAAqB;AACrB,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,UAAK,GAAG,KAAK,CAAC;QACd,YAAO,GAAG,KAAK,CAAC;QAEhB,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAC5C;;WAEG;QACwB,WAAM,GAAG,KAAK,CAAC;QAEvB,gBAAW,GAAG,KAAK,CAAC;QAEpB,yBAAoB,GAAG,qBAAqB,EAAE,CAAC;IAgOpE,CAAC;IAzNC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;UACtD,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,oBAAoB,EAAE;;KAEhC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,uBAAuB,EAAE;;KAEnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;YACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC9B,oBAAoB,EAAE,IAAI,CAAC,OAAO;YAClC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;YACtC,qBAAqB,EAAE,IAAI,CAAC,MAAM;YAClC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;YACpC,qBAAqB,EAAE,CAAC,IAAI,CAAC,KAAK;SACnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,uBAAuB;QAC/B,OAAO,IAAI,CAAA;;;;wCAIyB,IAAI,CAAC,oBAAoB,EAAE;;;;KAI9D,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,oBAAoB;QAC5B,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,mBAAmB;QAC3B,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QACtE,gBAAgB;QAChB,MAAM,OAAO,GAAG,EAAC,0BAA0B,EAAE,CAAC,OAAO,EAAC,CAAC;QACvD,OAAO,IAAI,CAAA;iEAEP,QAAQ,CAAC,OAAO,CAAC;sBACH,CAAC,OAAO;SACrB,IAAI,CAAC,eAAe,EAAE;KAC1B,CAAC;QAEF,uEAAuE;QACvE,+CAA+C;IACjD,CAAC;IAED,mBAAmB;IACT,kBAAkB;QAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;QACtE,gBAAgB;QAChB,MAAM,OAAO,GAAG,EAAC,0BAA0B,EAAE,CAAC,OAAO,EAAC,CAAC;QACvD,OAAO,IAAI,CAAA;gEAEP,QAAQ,CAAC,OAAO,CAAC;sBACH,CAAC,OAAO;SACrB,IAAI,CAAC,eAAe,EAAE;KAC1B,CAAC;QAEF,uEAAuE;QACvE,8CAA8C;IAChD,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QACnC,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,OAAO,SAAS,GAAG,gBAAgB,CAAC;IACtC,CAAC;IAED,mBAAmB;IACT,oBAAoB;QAC5B,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,KAA4B;QACpD,+BAA+B;QAE/B,kDAAkD;QAClD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YACjC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;QAED,0CAA0C;QAC1C,IAAI,CAAC,oBAAoB,CAAC;YACxB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC;YAChC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;SACrC,CAAC,CAAC;QAEH,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAES,KAAK,CAAC,oBAAoB,CAAC,EAAC,UAAU,EAAE,YAAY,EAG7D;QACC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QAED,UAAU,KAAV,UAAU,GAAK,IAAI,CAAC,OAAO,EAAC;QAC5B,YAAY,KAAZ,YAAY,GAAK,IAAI,CAAC,SAAS,EAAC;QAChC,MAAM,WAAW,GAAG,UAAU,IAAI,YAAY,CAAC;QAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC;QACxD,IAAI,WAAW,KAAK,gBAAgB,EAAE;YACpC,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,MAAM,MAAM,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAEjD,kEAAkE;QAClE,4EAA4E;QAC5E,wEAAwE;QACxE,gCAAgC;QAChC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1C,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACjD,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,sEAAsE;YACtE,6CAA6C;YAC7C,OAAO;SACR;QAED,2EAA2E;QAC3E,0EAA0E;QAC1E,sBAAsB;QACtB,EAAE;QACF,0EAA0E;QAC1E,kBAAkB;QAClB,0CAA0C;QAC1C,MAAM,SAAS,GACX,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAC,CAAC,CAAC;QAEzE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACpC,0DAA0D;YAC1D,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACxC,yDAAyD;YACzD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,iBAAiB;QAC/B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC;QACnD,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC;QACjD,MAAM,EACJ,CAAC,EAAE,SAAS,EACZ,CAAC,EAAE,SAAS,EACZ,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,EACvB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,EACJ,CAAC,EAAE,QAAQ,EACX,CAAC,EAAE,QAAQ,EACX,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EACtB,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC3C,4EAA4E;QAC5E,sEAAsE;QACtE,qCAAqC;QACrC,MAAM,KAAK,GAAG,aAAa,GAAG,YAAY,CAAC;QAC3C,MAAM,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;QACpC,wEAAwE;QACxE,0EAA0E;QAC1E,uEAAuE;QACvE,+CAA+C;QAC/C,MAAM,MAAM,GAAG,SAAS,GAAG,QAAQ;YAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAE7D,yEAAyE;QACzE,uEAAuE;QACvE,WAAW;QACX,MAAM,cAAc,GAAG,cAAc,MAAM,8BACvC,MAAM,cAAc,KAAK,GAAG,CAAC;QACjC,MAAM,aAAa,GAAG,yCAAyC,CAAC;QAEhE,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;YAClC,OAAO,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,EAAE,EAAC,SAAS,EAAE,cAAc,EAAC,CAAC,CAAC;SAClE;QAED,OAAO,CAAC,EAAC,SAAS,EAAE,cAAc,EAAC,EAAE,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC,CAAC;IACnE,CAAC;CACF;AAlP4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uCAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;oCAAe;AACd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;sCAAiB;AACjB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAgB;AACd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;wCAAmB;AAClB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uCAAkB;AAKjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uCAAkB;AAIjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;qCAAgB;AAEjC;IAAR,KAAK,EAAE;;0CAA+B;AAKvC;IADC,UAAU,CAAC,6BAA6B,CAAC;;8CACgB;AAE1D;IADC,UAAU,CAAC,4BAA4B,CAAC;;6CACgB","sourcesContent":["/**\n * @requirecss {field.lib.shared_styles}\n *\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {createAnimationSignal, Easing} from '../../motion/animation.js';\n\n/** @soyCompatible */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property({type: String}) label?: string;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean}) hasStart = false;\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean}) hasEnd = false;\n\n  @state() protected isAnimating = false;\n\n  protected readonly labelAnimationSignal = createAnimationSignal();\n\n  @queryAsync('.md3-field__label--floating')\n  protected readonly floatingLabelEl!: Promise<HTMLElement>;\n  @queryAsync('.md3-field__label--resting')\n  protected readonly restingLabelEl!: Promise<HTMLElement>;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <span class=\"md3-field ${classMap(this.getRenderClasses())}\">\n        ${this.renderContainer()}\n        ${this.renderSupportingText()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\">\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-field--disabled': this.disabled,\n      'md3-field--error': this.error,\n      'md3-field--focused': this.focused,\n      'md3-field--with-start': this.hasStart,\n      'md3-field--with-end': this.hasEnd,\n      'md3-field--populated': this.populated,\n      'md3-field--required': this.required,\n      'md3-field--no-label': !this.label,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderContainerContents(): TemplateResult {\n    return html`\n      <span class=\"md3-field__start\">\n        <slot name=\"start\"></slot>\n      </span>\n      <span class=\"md3-field__middle\">${this.renderMiddleContents()}</span>\n      <span class=\"md3-field__end\">\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderMiddleContents(): TemplateResult {\n    return html`\n      <span class=\"md3-field__content\"><slot></slot></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderFloatingLabel(): TemplateResult {\n    const visible = (this.focused || this.populated) && !this.isAnimating;\n    /** @classMap */\n    const classes = {'md3-field__label--hidden': !visible};\n    return html`\n      <span class=\"md3-field__label md3-field__label--floating ${\n        classMap(classes)}\"\n        aria-hidden=${!visible}\n      >${this.renderLabelText()}</span>\n    `;\n\n    // TODO(b/217441842): Create shared function once argument bug is fixed\n    // return this.renderLabel(LabelType.FLOATING);\n  }\n\n  /** @soyTemplate */\n  protected renderRestingLabel(): TemplateResult {\n    const visible = !(this.focused || this.populated) || this.isAnimating;\n    /** @classMap */\n    const classes = {'md3-field__label--hidden': !visible};\n    return html`\n      <span class=\"md3-field__label md3-field__label--resting ${\n        classMap(classes)}\"\n        aria-hidden=${!visible}\n      >${this.renderLabelText()}</span>\n    `;\n\n    // TODO(b/217441842): Create shared function once argument bug is fixed\n    // return this.renderLabel(LabelType.RESTING);\n  }\n\n  /** @soyTemplate */\n  protected renderLabelText(): string {\n    const labelText = this.label ?? '';\n    const optionalAsterisk = this.required && labelText ? '*' : '';\n    return labelText + optionalAsterisk;\n  }\n\n  /** @soyTemplate */\n  protected renderSupportingText(): TemplateResult {\n    return html`\n      <span class=\"md3-field__supporting-text\">\n        <span class=\"md3-field__supporting-text-start\">\n          <slot name=\"supporting-text\"></slot>\n        </span>\n        <span class=\"md3-field__supporting-text-end\">\n          <slot name=\"supporting-text-end\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated')\n    });\n\n    super.update(props);\n  }\n\n  protected async animateLabelIfNeeded({wasFocused, wasPopulated}: {\n    wasFocused?: boolean,\n    wasPopulated?: boolean\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    const signal = this.labelAnimationSignal.start();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The resting label is visible and used during animation. At the end of the\n    // animation, it will either remain visible (if resting) or hide and the\n    // floating label will be shown.\n    const labelEl = await this.restingLabelEl;\n    const keyframes = await this.getLabelKeyframes();\n    if (signal.aborted) {\n      // Don't animate if this animation was requested to stop while getting\n      // the label element or calculating keyframes\n      return;\n    }\n\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    const animation =\n        labelEl.animate(keyframes, {duration: 150, easing: Easing.STANDARD});\n\n    signal.addEventListener('abort', () => {\n      // Cancel if requested (another animation starts playing).\n      animation.cancel();\n    });\n\n    animation.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n      this.labelAnimationSignal.finish();\n    });\n  }\n\n  protected async getLabelKeyframes() {\n    const floatingLabelEl = await this.floatingLabelEl;\n    const restingLabelEl = await this.restingLabelEl;\n    const {\n      x: floatingX,\n      y: floatingY,\n      width: floatingWidth,\n      height: floatingHeight\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      width: restingWidth,\n      height: restingHeight\n    } = restingLabelEl.getBoundingClientRect();\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking.\n    const scale = floatingWidth / restingWidth;\n    const xDelta = floatingX - restingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the resting label up to the floating label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled resting label's height will be.\n    const yDelta = floatingY - restingY +\n        Math.round((floatingHeight - restingHeight * scale) / 2);\n\n    // Create the two transforms: resting to floating (using the calculations\n    // above), and floating to resting (re-setting the transform to initial\n    // values).\n    const floatTransform = `translateX(${xDelta}px) translateY(calc(-50% + ${\n        yDelta}px)) scale(${scale})`;\n    const restTransform = `translateX(0) translateY(-50%) scale(1)`;\n\n    if (this.focused || this.populated) {\n      return [{transform: restTransform}, {transform: floatTransform}];\n    }\n\n    return [{transform: floatTransform}, {transform: restTransform}];\n  }\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["field.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 {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {createAnimationSignal, EASING} from '../../motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property({type: String}) label?: string;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean}) hasEnd = false;\n\n  @state() private isAnimating = false;\n  private readonly labelAnimationSignal = createAnimationSignal();\n  @queryAsync('.label.floating')\n  private readonly floatingLabelEl!: Promise<HTMLElement>;\n  @queryAsync('.label.resting')\n  private readonly restingLabelEl!: Promise<HTMLElement>;\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated')\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container\">\n          ${this.renderBackground?.()}\n          ${this.renderIndicator?.()}\n          ${outline}\n          <div class=\"start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div class=\"middle\">\n            ${restingLabel}\n            ${outline ? nothing : floatingLabel}\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n\n        <div class=\"supporting-text\">\n          <div class=\"supporting-text-start\">\n            <slot name=\"supporting-text\"></slot>\n          </div>\n          <div class=\"supporting-text-end\">\n            <slot name=\"supporting-text-end\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;\n\n  private renderLabel(isFloating: boolean) {\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated. It is never visible\n      // while animating.\n      visible = (this.focused || this.populated) && !this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused or while animating.\n      visible = !(this.focused || this.populated) || this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    let labelText = this.label ?? '';\n    // Add '*' if a label is present and the field is required\n    labelText += this.required && labelText ? '*' : '';\n\n    return html`\n      <span class=\"label ${classMap(classes)}\"\n        aria-hidden=${!visible}\n      >${labelText}</span>\n    `;\n  }\n\n  private async animateLabelIfNeeded({wasFocused, wasPopulated}: {\n    wasFocused?: boolean,\n    wasPopulated?: boolean\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    const signal = this.labelAnimationSignal.start();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The resting label is visible and used during animation. At the end of the\n    // animation, it will either remain visible (if resting) or hide and the\n    // floating label will be shown.\n    const labelEl = await this.restingLabelEl;\n    const keyframes = await this.getLabelKeyframes();\n    if (signal.aborted) {\n      // Don't animate if this animation was requested to stop while getting\n      // the label element or calculating keyframes\n      return;\n    }\n\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    const animation =\n        labelEl.animate(keyframes, {duration: 150, easing: EASING.STANDARD});\n\n    signal.addEventListener('abort', () => {\n      // Cancel if requested (another animation starts playing).\n      animation.cancel();\n    });\n\n    animation.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n      this.labelAnimationSignal.finish();\n    });\n  }\n\n  private async getLabelKeyframes() {\n    const floatingLabelEl = await this.floatingLabelEl;\n    const restingLabelEl = await this.restingLabelEl;\n    const {\n      x: floatingX,\n      y: floatingY,\n      width: floatingWidth,\n      height: floatingHeight\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      width: restingWidth,\n      height: restingHeight\n    } = restingLabelEl.getBoundingClientRect();\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking.\n    const scale = floatingWidth / restingWidth;\n    const xDelta = floatingX - restingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the resting label up to the floating label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled resting label's height will be.\n    const yDelta = floatingY - restingY +\n        Math.round((floatingHeight - restingHeight * scale) / 2);\n\n    // Create the two transforms: resting to floating (using the calculations\n    // above), and floating to resting (re-setting the transform to initial\n    // values).\n    const floatTransform = `translateX(${xDelta}px) translateY(calc(-50% + ${\n        yDelta}px)) scale(${scale})`;\n    const restTransform = `translateX(0) translateY(-50%) scale(1)`;\n\n    if (this.focused || this.populated) {\n      return [{transform: restTransform}, {transform: floatTransform}];\n    }\n\n    return [{transform: floatTransform}, {transform: restTransform}];\n  }\n}\n"]}

package/field/lib/filled-field.d.ts

@@ -3,22 +3,16 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { PropertyValues } from 'lit';
 import { Field } from './field.js';
-/** @soyCompatible */
+/**
+ * A filled field component.
+ */
 export declare class FilledField extends Field {
-    protected strokeTransformOrigin: string;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected renderContainer(): TemplateResult;
-    /** @soyTemplate */
-    protected renderContainerContents(): TemplateResult;
-    /** @soyTemplate */
-    protected renderMiddleContents(): TemplateResult;
-    /** @bubbleWizEvent */
-    protected handleClick(event: MouseEvent | TouchEvent): void;
-    protected update(props: PropertyValues<this>): void;
-    protected updateStrokeTransformOrigin(event?: MouseEvent | TouchEvent): Promise<void>;
+    private strokeTransformOrigin;
+    constructor();
+    protected renderBackground(): import("lit-html").TemplateResult<1>;
+    protected renderIndicator(): import("lit-html").TemplateResult<1>;
+    protected update(props: PropertyValues<FilledField>): void;
+    private updateStrokeTransformOrigin;
 }

package/field/lib/filled-field.js

@@ -8,53 +8,30 @@ import { html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { Field } from './field.js';
-/** @soyCompatible */
+/**
+ * A filled field component.
+ */
 export class FilledField extends Field {
     constructor() {
-        super(...arguments);
+        super();
         this.strokeTransformOrigin = '';
+        this.addEventListener('click', event => {
+            if (!this.disabled) {
+                this.updateStrokeTransformOrigin(event);
+            }
+        });
     }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-field--filled': true,
-        };
-    }
-    /** @soyTemplate */
-    renderContainer() {
+    renderBackground() {
         return html `
-      <span class="md3-field__container" @click=${this.handleClick}>
-        ${this.renderContainerContents()}
-      </span>
+      <div class="state-layer"></div>
     `;
     }
-    /** @soyTemplate */
-    renderContainerContents() {
-        /** @styleMap */
+    renderIndicator() {
         const strokeStyle = { transformOrigin: this.strokeTransformOrigin };
         return html `
-      <span class="md3-field__state-layer"></span>
-      ${super.renderContainerContents()}
-      <span class="md3-field__active-indicator"
-        style="${styleMap(strokeStyle)}"></span>
-    `;
-    }
-    /** @soyTemplate */
-    renderMiddleContents() {
-        return html `
-      ${this.renderFloatingLabel()}
-      ${this.renderRestingLabel()}
-      ${super.renderMiddleContents()}
+      <div class="active-indicator" style="${styleMap(strokeStyle)}"></div>
     `;
     }
-    /** @bubbleWizEvent */
-    handleClick(event) {
-        if (this.disabled) {
-            return;
-        }
-        this.updateStrokeTransformOrigin(event);
-    }
     update(props) {
         // Upon losing focus, the stroke resets to expanding from the center, such
         // as when re-focusing with a keyboard.
@@ -64,7 +41,7 @@ export class FilledField extends Field {
         }
         super.update(props);
     }
-    async updateStrokeTransformOrigin(event) {
+    updateStrokeTransformOrigin(event) {
         let transformOrigin = '';
         if (event) {
             // Can't use instanceof TouchEvent since Firefox does not provide the

package/field/lib/filled-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,KAAK;IAAtC;;QACqB,0BAAqB,GAAG,EAAE,CAAC;IAyEhD,CAAC;IAvEC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,WAAW;UACxD,IAAI,CAAC,uBAAuB,EAAE;;KAEnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,gBAAgB;QAChB,MAAM,WAAW,GAAG,EAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,EAAC,CAAC;QAClE,OAAO,IAAI,CAAA;;QAEP,KAAK,CAAC,uBAAuB,EAAE;;iBAEtB,QAAQ,CAAC,WAAW,CAAC;KACjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;IAED,sBAAsB;IACZ,WAAW,CAAC,KAA4B;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,0EAA0E;QAC1E,uCAAuC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAES,KAAK,CAAC,2BAA2B,CAAC,KAA6B;QACvE,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE;YACT,qEAAqE;YACrE,wBAAwB;YACxB,MAAM,YAAY,GAAG,SAAS,IAAI,KAAK,CAAC;YACxC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,eAAe,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC;SAC9C;QAED,IAAI,CAAC,qBAAqB,GAAG,eAAe,CAAC;IAC/C,CAAC;CACF;AAzEU;IAAR,KAAK,EAAE;;0DAAsC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {state} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class FilledField extends Field {\n  @state() protected strokeTransformOrigin = '';\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-field--filled': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\" @click=${this.handleClick}>\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderContainerContents(): TemplateResult {\n    /** @styleMap */\n    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};\n    return html`\n      <span class=\"md3-field__state-layer\"></span>\n      ${super.renderContainerContents()}\n      <span class=\"md3-field__active-indicator\"\n        style=\"${styleMap(strokeStyle)}\"></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderMiddleContents(): TemplateResult {\n    return html`\n      ${this.renderFloatingLabel()}\n      ${this.renderRestingLabel()}\n      ${super.renderMiddleContents()}\n    `;\n  }\n\n  /** @bubbleWizEvent */\n  protected handleClick(event: MouseEvent|TouchEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateStrokeTransformOrigin(event);\n  }\n\n  protected override update(props: PropertyValues<this>) {\n    // Upon losing focus, the stroke resets to expanding from the center, such\n    // as when re-focusing with a keyboard.\n    const unfocusing = props.has('focused') && !this.focused;\n    if (unfocusing) {\n      this.updateStrokeTransformOrigin();\n    }\n\n    super.update(props);\n  }\n\n  protected async updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {\n    let transformOrigin = '';\n    if (event) {\n      // Can't use instanceof TouchEvent since Firefox does not provide the\n      // constructor globally.\n      const isTouchEvent = 'touches' in event;\n      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;\n      const rootRect = this.getBoundingClientRect();\n      transformOrigin = `${eventX - rootRect.x}px`;\n    }\n\n    this.strokeTransformOrigin = transformOrigin;\n  }\n}\n"]}
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK;IAGpC;QACE,KAAK,EAAE,CAAC;QAHO,0BAAqB,GAAG,EAAE,CAAC;QAI1C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;YACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;aACzC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,gBAAgB;QACjC,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,MAAM,WAAW,GAAG,EAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,EAAC,CAAC;QAClE,OAAO,IAAI,CAAA;6CAC8B,QAAQ,CAAC,WAAW,CAAC;KAC7D,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,KAAkC;QAC1D,0EAA0E;QAC1E,uCAAuC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEO,2BAA2B,CAAC,KAA6B;QAC/D,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE;YACT,qEAAqE;YACrE,wBAAwB;YACxB,MAAM,YAAY,GAAG,SAAS,IAAI,KAAK,CAAC;YACxC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,eAAe,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC;SAC9C;QAED,IAAI,CAAC,qBAAqB,GAAG,eAAe,CAAC;IAC/C,CAAC;CACF;AAhDC;IAAC,KAAK,EAAE;;0DAAoC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues} from 'lit';\nimport {state} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Field} from './field.js';\n\n/**\n * A filled field component.\n */\nexport class FilledField extends Field {\n  @state() private strokeTransformOrigin = '';\n\n  constructor() {\n    super();\n    this.addEventListener('click', event => {\n      if (!this.disabled) {\n        this.updateStrokeTransformOrigin(event);\n      }\n    });\n  }\n\n  protected override renderBackground() {\n    return html`\n      <div class=\"state-layer\"></div>\n    `;\n  }\n\n  protected override renderIndicator() {\n    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};\n    return html`\n      <div class=\"active-indicator\" style=\"${styleMap(strokeStyle)}\"></div>\n    `;\n  }\n\n  protected override update(props: PropertyValues<FilledField>) {\n    // Upon losing focus, the stroke resets to expanding from the center, such\n    // as when re-focusing with a keyboard.\n    const unfocusing = props.has('focused') && !this.focused;\n    if (unfocusing) {\n      this.updateStrokeTransformOrigin();\n    }\n\n    super.update(props);\n  }\n\n  private updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {\n    let transformOrigin = '';\n    if (event) {\n      // Can't use instanceof TouchEvent since Firefox does not provide the\n      // constructor globally.\n      const isTouchEvent = 'touches' in event;\n      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;\n      const rootRect = this.getBoundingClientRect();\n      transformOrigin = `${eventX - rootRect.x}px`;\n    }\n\n    this.strokeTransformOrigin = transformOrigin;\n  }\n}\n"]}