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

package/field/lib/field.d.ts

@@ -1,19 +1,20 @@
 /**
- * @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 */
-export declare class Field extends LitElement {
+import { SurfacePositionTarget } from '../../menu/lib/surfacePositionController.js';
+/**
+ * A field component.
+ */
+export declare class Field extends LitElement implements SurfacePositionTarget {
     disabled: boolean;
     error: boolean;
     focused: boolean;
     label?: string;
     populated: boolean;
+    resizable: boolean;
     required: boolean;
     /**
      * Whether or not the field has leading content.
@@ -23,34 +24,18 @@ 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 labelAnimation?;
+    private readonly floatingLabelEl;
+    private readonly restingLabelEl;
+    private readonly containerEl;
     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;
+    getSurfacePositionClientRect(): DOMRect;
 }

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 { property, queryAsync, state } from 'lit/decorators.js';
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createAnimationSignal, Easing } from '../../motion/animation.js';
-/** @soyCompatible */
+import { EASING } from '../../internal/motion/animation.js';
+/**
+ * A field component.
+ */
 export class Field extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,6 +18,7 @@ export class Field extends LitElement {
         this.error = false;
         this.focused = false;
         this.populated = false;
+        this.resizable = false;
         this.required = false;
         /**
          * Whether or not the field has leading content.
@@ -28,100 +29,6 @@ export class Field extends LitElement {
          */
         this.hasEnd = false;
         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
@@ -137,7 +44,81 @@ export class Field extends LitElement {
         });
         super.update(props);
     }
-    async animateLabelIfNeeded({ wasFocused, wasPopulated }) {
+    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,
+            'resizable': this.resizable,
+            'required': this.required,
+            'no-label': !this.label,
+        };
+        return html `
+      <div class="field ${classMap(classes)}">
+        <div class="container-overflow">
+          ${outline}
+          ${this.renderBackground?.()}
+          ${this.renderIndicator?.()}
+          <div class="container">
+            <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>
+
+        <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 or when animating.
+            visible = this.focused || this.populated || this.isAnimating;
+        }
+        else {
+            // Resting label is visible when unfocused. It is never visible 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>
+    `;
+    }
+    animateLabelIfNeeded({ wasFocused, wasPopulated }) {
         if (!this.label) {
             return;
         }
@@ -149,18 +130,12 @@ export class Field extends LitElement {
             return;
         }
         this.isAnimating = true;
-        const signal = this.labelAnimationSignal.start();
+        this.labelAnimation?.cancel();
         // Only one label is visible at a time for clearer text rendering.
-        // The resting label is visible and used during animation. At the end of the
-        // animation, it will either remain visible (if resting) or hide and the
-        // floating label will be shown.
-        const labelEl = await this.restingLabelEl;
-        const keyframes = await this.getLabelKeyframes();
-        if (signal.aborted) {
-            // Don't animate if this animation was requested to stop while getting
-            // the label element or calculating keyframes
-            return;
-        }
+        // The floating label is visible and used during animation. At the end of
+        // the animation, it will either remain visible (if floating) or hide and
+        // the resting label will be shown.
+        //
         // We don't use forward filling because if the dimensions of the text field
         // change (leading icon removed, density changes, etc), then the animation
         // will be inaccurate.
@@ -168,86 +143,94 @@ 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 });
-        signal.addEventListener('abort', () => {
-            // Cancel if requested (another animation starts playing).
-            animation.cancel();
-        });
-        animation.addEventListener('finish', () => {
+        this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD });
+        this.labelAnimation?.addEventListener('finish', () => {
             // At the end of the animation, update the visible label.
             this.isAnimating = false;
-            this.labelAnimationSignal.finish();
         });
     }
-    async getLabelKeyframes() {
-        const floatingLabelEl = await this.floatingLabelEl;
-        const restingLabelEl = await this.restingLabelEl;
-        const { x: floatingX, y: floatingY, width: floatingWidth, height: floatingHeight } = floatingLabelEl.getBoundingClientRect();
-        const { x: restingX, y: restingY, width: restingWidth, height: restingHeight } = restingLabelEl.getBoundingClientRect();
+    getLabelKeyframes() {
+        const { floatingLabelEl, restingLabelEl } = this;
+        if (!floatingLabelEl || !restingLabelEl) {
+            return [];
+        }
+        const { x: floatingX, y: floatingY, height: floatingHeight } = floatingLabelEl.getBoundingClientRect();
+        const { x: restingX, y: restingY, height: restingHeight } = restingLabelEl.getBoundingClientRect();
+        const floatingScrollWidth = floatingLabelEl.scrollWidth;
+        const restingScrollWidth = restingLabelEl.scrollWidth;
         // Scale by width ratio instead of font size since letter-spacing will scale
         // incorrectly. Using the width we can better approximate the adjusted
-        // scale and compensate for tracking.
-        const scale = floatingWidth / restingWidth;
-        const xDelta = floatingX - restingX;
+        // scale and compensate for tracking and overflow.
+        // (use scrollWidth instead of width to account for clipped labels)
+        const scale = restingScrollWidth / floatingScrollWidth;
+        const xDelta = restingX - floatingX;
         // The line-height of the resting and floating label are different. When
-        // we move the resting label up to the floating label's position, it won't
+        // we move the floating label down to the resting label's position, it won't
         // exactly match because of this. We need to adjust by half of what the
-        // final scaled resting label's height will be.
-        const yDelta = floatingY - restingY +
-            Math.round((floatingHeight - restingHeight * scale) / 2);
-        // Create the two transforms: resting to floating (using the calculations
-        // above), and floating to resting (re-setting the transform to initial
+        // final scaled floating label's height will be.
+        const yDelta = restingY - floatingY +
+            Math.round((restingHeight - floatingHeight * scale) / 2);
+        // Create the two transforms: floating to resting (using the calculations
+        // above), and resting to floating (re-setting the transform to initial
         // values).
-        const floatTransform = `translateX(${xDelta}px) translateY(calc(-50% + ${yDelta}px)) scale(${scale})`;
-        const restTransform = `translateX(0) translateY(-50%) scale(1)`;
+        const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
+        const floatTransform = `translateX(0) translateY(0) scale(1)`;
+        // Constrain the floating labels width to a scaled percentage of the
+        // resting label's width. This will prevent long clipped labels from
+        // overflowing the container.
+        const restingClientWidth = restingLabelEl.clientWidth;
+        const isRestingClipped = restingScrollWidth > restingClientWidth;
+        const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';
         if (this.focused || this.populated) {
-            return [{ transform: restTransform }, { transform: floatTransform }];
+            return [
+                { transform: restTransform, width }, { transform: floatTransform, width }
+            ];
         }
-        return [{ transform: floatTransform }, { transform: restTransform }];
+        return [
+            { transform: floatTransform, width }, { transform: restTransform, width }
+        ];
+    }
+    getSurfacePositionClientRect() {
+        return this.containerEl.getBoundingClientRect();
     }
 }
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "error", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "focused", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property()
 ], Field.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "populated", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
+], Field.prototype, "resizable", void 0);
+__decorate([
+    property({ type: Boolean })
 ], Field.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "hasStart", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Field.prototype, "hasEnd", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Field.prototype, "isAnimating", void 0);
 __decorate([
-    queryAsync('.md3-field__label--floating'),
-    __metadata("design:type", Promise)
+    query('.label.floating')
 ], Field.prototype, "floatingLabelEl", void 0);
 __decorate([
-    queryAsync('.md3-field__label--resting'),
-    __metadata("design:type", Promise)
+    query('.label.resting')
 ], Field.prototype, "restingLabelEl", void 0);
+__decorate([
+    query('.container')
+], Field.prototype, "containerEl", 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":"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","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, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {SurfacePositionTarget} from '../../menu/lib/surfacePositionController.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement implements SurfacePositionTarget {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label?: string;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) resizable = 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 labelAnimation?: Animation;\n  @query('.label.floating') private readonly floatingLabelEl!: HTMLElement|null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement|null;\n  @query('.container') private readonly containerEl!: HTMLElement|null;\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      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${outline}\n          ${this.renderBackground?.()}\n          ${this.renderIndicator?.()}\n          <div class=\"container\">\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        </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 or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // 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 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    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\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    this.labelAnimation = this.floatingLabelEl?.animate(\n        this.getLabelKeyframes(), {duration: 150, easing: EASING.STANDARD});\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {x: floatingX, y: floatingY, height: floatingHeight} =\n        floatingLabelEl.getBoundingClientRect();\n    const {x: restingX, y: restingY, height: restingHeight} =\n        restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\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 and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta = restingY - floatingY +\n        Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform =\n        `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width}, {transform: floatTransform, width}\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width}, {transform: restTransform, width}\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"]}

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

@@ -3,22 +3,11 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
 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>;
+    protected renderBackground(): import("lit-html").TemplateResult<1>;
+    protected renderIndicator(): import("lit-html").TemplateResult<1>;
 }

package/field/lib/filled-field.js

@@ -3,82 +3,20 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
 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);
-        this.strokeTransformOrigin = '';
-    }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-field--filled': true,
-        };
-    }
-    /** @soyTemplate */
-    renderContainer() {
-        return html `
-      <span class="md3-field__container" @click=${this.handleClick}>
-        ${this.renderContainerContents()}
-      </span>
-    `;
-    }
-    /** @soyTemplate */
-    renderContainerContents() {
-        /** @styleMap */
-        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() {
+    renderBackground() {
         return html `
-      ${this.renderFloatingLabel()}
-      ${this.renderRestingLabel()}
-      ${super.renderMiddleContents()}
+      <div class="background"></div>
+      <div class="state-layer"></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.
-        const unfocusing = props.has('focused') && !this.focused;
-        if (unfocusing) {
-            this.updateStrokeTransformOrigin();
-        }
-        super.update(props);
-    }
-    async updateStrokeTransformOrigin(event) {
-        let transformOrigin = '';
-        if (event) {
-            // Can't use instanceof TouchEvent since Firefox does not provide the
-            // constructor globally.
-            const isTouchEvent = 'touches' in event;
-            const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;
-            const rootRect = this.getBoundingClientRect();
-            transformOrigin = `${eventX - rootRect.x}px`;
-        }
-        this.strokeTransformOrigin = transformOrigin;
+    renderIndicator() {
+        return html `<div class="active-indicator"></div>`;
     }
 }
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FilledField.prototype, "strokeTransformOrigin", void 0);
 //# sourceMappingURL=filled-field.js.map