@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/field/lib/_outlined-field.scss

@@ -7,188 +7,292 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '@material/web/motion/animation';
+@use '../../motion/animation';
+@use '../../sass/theme';
+@use './md-comp-outlined-field';
+@use './shared';
 
 $_animation-duration: 150ms;
 
-@mixin static-styles() {
+@mixin theme($tokens) {
+  $reference: md-comp-outlined-field.values();
+  // Add resolved tokens so that $theme may specify them.
+  $reference: map.merge($reference, shared.resolve-tokens($reference));
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, outlined-field);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-outlined-field.values();
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, outlined-field);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-field__outline {
-    @include outline;
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-end-radius: var(--_container-shape-end-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-color: var(--_outline-color);
+    color: var(--_outline-color); // Needed for Firefox HCM
+    display: flex;
+    // Allow events to target elements underneath the outline, such as icons.
+    pointer-events: none;
+    height: 100%;
+    position: absolute;
+    width: 100%;
   }
 
   .md3-field__outline-start,
   .md3-field__outline-panel-inactive,
   .md3-field__outline-panel-active,
   .md3-field__outline-end {
-    @include outline-border;
+    // ::before is inactive border, ::after is active border. Borders are
+    // absolutely positioned within their elements.
+    &::before,
+    &::after {
+      border: inherit;
+      content: '';
+      inset: 0;
+      position: absolute;
+    }
   }
 
   .md3-field__outline-start,
   .md3-field__outline-end {
-    @include outline-edges;
+    border: inherit;
+    border-radius: inherit;
+    box-sizing: border-box;
+    position: relative;
+
+    &::before,
+    &::after {
+      border-bottom-style: solid;
+      border-top-style: solid;
+    }
+
+    &::after {
+      opacity: 0;
+      transition: animation.standard(opacity, $_animation-duration);
+    }
 
     .md3-field--focused & {
-      @include outline-edges-focus;
+      &::after {
+        opacity: 1;
+      }
     }
   }
 
   .md3-field__outline-start {
-    @include outline-start;
+    &::before,
+    &::after {
+      border-inline-start-style: solid;
+      border-inline-end-style: none;
+      border-start-start-radius: inherit;
+      border-start-end-radius: 0;
+      border-end-start-radius: inherit;
+      border-end-end-radius: 0;
+      margin-inline-end: var(--_outline-label-padding);
+    }
   }
 
   .md3-field__outline-end {
-    @include outline-end;
+    flex-grow: 1;
+    margin-inline-start: calc(-1 * var(--_outline-label-padding));
+
+    &::before,
+    &::after {
+      border-inline-start-style: none;
+      border-inline-end-style: solid;
+      border-start-start-radius: 0;
+      border-start-end-radius: inherit;
+      border-end-start-radius: 0;
+      border-end-end-radius: inherit;
+    }
   }
 
   .md3-field__outline-notch {
-    @include outline-notch;
+    align-items: flex-start;
+    border: inherit;
+    display: flex;
+    margin-inline-start: calc(-1 * var(--_outline-label-padding));
+    margin-inline-end: var(--_outline-label-padding);
+    max-width: calc(100% - 2 * var(--_container-padding-horizontal));
+    padding: 0 var(--_outline-label-padding);
+    position: relative;
 
     .md3-field--no-label & {
-      @include outline-notch-no-label;
+      display: none;
     }
   }
 
   .md3-field__outline-panel-inactive,
   .md3-field__outline-panel-active {
-    @include outline-panel;
+    border: inherit;
+    border-bottom-style: solid;
+    inset: 0;
+    position: absolute;
+
+    &::before,
+    &::after {
+      border-top-style: solid;
+      border-bottom: none;
+      bottom: auto;
+      transform: scaleX(1);
+      transition: animation.standard(transform, $_animation-duration);
+    }
+
+    // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
+    // ok, we just need one to be left and one to be right.
+    &::before {
+      right: 50%;
+      transform-origin: top left;
+    }
+
+    &::after {
+      left: 50%;
+      transform-origin: top right;
+    }
 
     .md3-field--populated &,
     .md3-field--focused & {
-      @include outline-panel-open;
+      &::before,
+      &::after {
+        transform: scaleX(0);
+      }
     }
   }
 
   .md3-field__outline-panel-active {
-    @include outline-panel-active;
+    opacity: 0;
+    transition: animation.standard(opacity, $_animation-duration);
 
     .md3-field--focused & {
-      @include outline-panel-active-focus;
+      opacity: 1;
     }
   }
-}
-
-@mixin outline() {
-  display: flex;
-  // Allow events to target elements underneath the outline, such as icons.
-  pointer-events: none;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-}
 
-@mixin outline-border() {
-  // ::before is inactive border, ::after is active border. Borders are
-  // absolutely positioned within their elements.
-  &::before,
-  &::after {
-    border: inherit;
-    content: '';
-    inset: 0;
-    position: absolute;
+  .md3-field__label--floating {
+    // Center the label within the outline stroke
+    transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
   }
-}
 
-@mixin outline-edges() {
-  border: inherit;
-  border-radius: inherit;
-  box-sizing: border-box;
-  position: relative;
+  // Add padding that will grow to compensate for the outline's shape.
+  // This is needed to prevent the outline border from clipping with the label
+  // and is mirrored in the container padding to align the content and resting
+  // label with the adjusted floating label.
+  $shape-start: max(
+    var(--_container-shape-start-start),
+    var(--_container-shape-end-start)
+  );
+  $shape-end: max(
+    var(--_container-shape-start-end),
+    var(--_container-shape-end-end)
+  );
 
-  &::before,
-  &::after {
-    border-bottom-style: solid;
-    border-top-style: solid;
+  .md3-field__outline-start,
+  .md3-field:not(.md3-field--with-start) .md3-field__start {
+    padding-inline-start: max(
+      var(--_container-padding-horizontal),
+      $shape-start + var(--_outline-label-padding)
+    );
   }
 
-  &::after {
-    opacity: 0;
-    transition: animation.standard(opacity, $_animation-duration);
+  .md3-field:not(.md3-field--with-end) {
+    .md3-field__end {
+      padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
+    }
   }
-}
 
-@mixin outline-edges-focus() {
-  &::after {
-    opacity: 1;
+  .md3-field__outline-start::before,
+  .md3-field__outline-end::before,
+  .md3-field__outline-panel-inactive,
+  .md3-field__outline-panel-inactive::before,
+  .md3-field__outline-panel-inactive::after {
+    border-width: var(--_outline-width);
   }
-}
 
-@mixin outline-start() {
-  &::before,
-  &::after {
-    border-inline-start-style: solid;
-    border-inline-end-style: none;
-    border-start-start-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-start-radius: inherit;
-    border-end-end-radius: 0;
-  }
-}
+  // States
 
-@mixin outline-end() {
-  flex-grow: 1;
+  :hover {
+    .md3-field__outline {
+      border-color: var(--_hover-outline-color);
+      color: var(--_hover-outline-color); // Needed for Firefox HCM
+    }
 
-  &::before,
-  &::after {
-    border-inline-start-style: none;
-    border-inline-end-style: solid;
-    border-start-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-start-radius: 0;
-    border-end-end-radius: inherit;
+    .md3-field__outline-start::before,
+    .md3-field__outline-end::before,
+    .md3-field__outline-panel-inactive,
+    .md3-field__outline-panel-inactive::before,
+    .md3-field__outline-panel-inactive::after {
+      border-width: var(--_hover-outline-width);
+    }
   }
-}
-
-@mixin outline-notch() {
-  align-items: flex-start;
-  border: inherit;
-  display: flex;
-  position: relative;
-}
-
-@mixin outline-notch-no-label() {
-  display: none;
-}
-
-@mixin outline-panel() {
-  border: inherit;
-  border-bottom-style: solid;
-  inset: 0;
-  position: absolute;
 
-  &::before,
-  &::after {
-    border-top-style: solid;
-    border-bottom: none;
-    bottom: auto;
-    transform: scaleX(1);
-    transition: animation.standard(transform, $_animation-duration);
+  .md3-field--focused {
+    .md3-field__outline {
+      border-color: var(--_focus-outline-color);
+      color: var(--_focus-outline-color); // Needed for Firefox HCM
+    }
   }
 
-  // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
-  // ok, we just need one to be left and one to be right.
-  &::before {
-    right: 50%;
-    transform-origin: top left;
+  .md3-field__outline-start::after,
+  .md3-field__outline-end::after,
+  .md3-field__outline-panel-active,
+  .md3-field__outline-panel-active::before,
+  .md3-field__outline-panel-active::after {
+    border-width: var(--_focus-outline-width);
   }
 
-  &::after {
-    left: 50%;
-    transform-origin: top right;
-  }
-}
+  .md3-field--disabled {
+    .md3-field__outline {
+      border-color: var(--_disabled-outline-color);
+      color: var(--_disabled-outline-color); // Needed for Firefox HCM
+    }
+
+    .md3-field__outline-start,
+    .md3-field__outline-end,
+    .md3-field__outline-panel-inactive {
+      opacity: var(--_disabled-outline-opacity);
+    }
 
-@mixin outline-panel-open() {
-  &::before,
-  &::after {
-    transform: scaleX(0);
+    .md3-field__outline-start::before,
+    .md3-field__outline-end::before,
+    .md3-field__outline-panel-inactive,
+    .md3-field__outline-panel-inactive::before,
+    .md3-field__outline-panel-inactive::after {
+      border-width: var(--_disabled-outline-width);
+    }
   }
-}
 
-@mixin outline-panel-active() {
-  opacity: 0;
-  transition: animation.standard(opacity, $_animation-duration);
-}
+  .md3-field--error:not(.md3-field--disabled) {
+    .md3-field__outline {
+      border-color: var(--_error-outline-color);
+      color: var(--_error-outline-color); // Needed for Firefox HCM
+    }
 
-@mixin outline-panel-active-focus() {
-  opacity: 1;
+    &:hover {
+      .md3-field__outline {
+        border-color: var(--_error-hover-outline-color);
+        // Needed for Firefox HCM
+        color: var(--_error-hover-outline-color);
+      }
+    }
+
+    &.md3-field--focused {
+      .md3-field__outline {
+        border-color: var(--_error-focus-outline-color);
+        // Needed for Firefox HCM
+        color: var(--_error-focus-outline-color);
+      }
+    }
+  }
 }

package/field/lib/{_field.scss → _shared.scss}

@@ -6,7 +6,15 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/typography';
+@use './content';
+@use './label';
+@use './supporting-text';
+
+@mixin styles() {
   :host {
     display: inline-flex;
   }
@@ -25,6 +33,7 @@
     box-sizing: border-box;
     display: flex;
     flex: 1;
+    flex-basis: var(--_container-height);
     position: relative;
   }
 
@@ -49,4 +58,24 @@
       margin-inline-start: 4px;
     }
   }
+
+  @include content.styles;
+  @include label.styles;
+  @include supporting-text.styles;
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, typography),
+    label-text,
+    label-text-populated,
+    supporting-text
+  );
+
+  @return shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    container-shape
+  );
 }

package/field/lib/_supporting-text.scss

@@ -6,15 +6,78 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use '../../sass/typography';
+
+@mixin styles() {
   .md3-field__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),
+      )
+    );
   }
 
   .md3-field__supporting-text-start,
   .md3-field__supporting-text-end {
     // Can't be an inline display element (<span>) for padding-top to work.
     display: flex;
+
+    // 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);
+    }
+  }
+
+  .md3-field__supporting-text-end {
+    ::slotted(:not(:empty)) {
+      padding-inline-start: var(--_supporting-text-padding);
+    }
+  }
+
+  :hover {
+    .md3-field__supporting-text {
+      color: var(--_hover-supporting-text-color);
+    }
+  }
+
+  .md3-field--focus {
+    .md3-field__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);
+    }
+  }
+
+  .md3-field--error:not(.md3-field--disabled) {
+    .md3-field__supporting-text {
+      color: var(--_error-supporting-text-color);
+    }
+
+    &:hover {
+      .md3-field__supporting-text {
+        color: var(--_error-hover-supporting-text-color);
+      }
+    }
+
+    &.md3-field--focus {
+      .md3-field__supporting-text {
+        color: var(--_error-focus-supporting-text-color);
+      }
+    }
   }
 }

package/field/lib/field.d.ts

@@ -24,7 +24,7 @@ export declare class Field extends LitElement {
      */
     hasEnd: boolean;
     protected isAnimating: boolean;
-    protected readonly labelAnimationSignal: import("@material/web/motion/animation.js").AnimationSignal;
+    protected readonly labelAnimationSignal: import("../../motion/animation.js").AnimationSignal;
     protected readonly floatingLabelEl: Promise<HTMLElement>;
     protected readonly restingLabelEl: Promise<HTMLElement>;
     /** @soyTemplate */

package/field/lib/field.js

@@ -6,10 +6,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { createAnimationSignal, Easing } from '@material/web/motion/animation.js';
 import { html, LitElement } 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 */
 export class Field extends LitElement {
     constructor() {

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 {createAnimationSignal, Easing} from '@material/web/motion/animation.js';\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\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 * @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"]}

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

@@ -17,6 +17,7 @@ export declare class FilledField extends Field {
     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>;

package/field/lib/filled-field.js

@@ -48,6 +48,7 @@ export class FilledField extends Field {
       ${super.renderMiddleContents()}
     `;
     }
+    /** @bubbleWizEvent */
     handleClick(event) {
         if (this.disabled) {
             return;