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

package/chips/chip/lib/_chip.scss

@@ -8,13 +8,11 @@
 // stylelint-disable selector-class-pattern --
 // Internal styling for Chip MDC component.
 
-@use '@material/web/compat/theme/theme-color';
-@use '@material/web/compat/touchtarget/touch-target';
-@use '@material/web/focus/lib/focus-ring-theme';
-@use '@material/web/motion/animation';
-// TODO(kainby): Uncomment when styles are translated to md3 ripple
-// @use '@material/web/ripple/ripple-theme';
-@use '@material/web/sass/dom';
+@use '../../../focus/focus-ring';
+@use '../../../motion/animation';
+// TODO(b/240224981): Uncomment when styles are translated to md3 ripple
+// @use '../../../ripple/ripple-theme';
+@use '../../../sass/dom';
 @use './chip-theme';
 
 @mixin core-styles() {
@@ -29,15 +27,11 @@
 
 @mixin ripple-styles() {
   @include chip-theme.ripple-color(chip-theme.$ripple-color);
-  @include chip-theme.trailing-action-ripple-color(
-    chip-theme.$ripple-color
-  );
-  @include chip-theme.trailing-action-ripple-size(
-    chip-theme.$trailing-action-size
-  );
+  @include chip-theme.delete-action-ripple-color(chip-theme.$ripple-color);
+  @include chip-theme.delete-action-ripple-size(chip-theme.$delete-action-size);
 
   .md3-chip__action {
-    // TODO(kainby): Translate to md3 ripple
+    // TODO(b/240224981): Translate to md3 ripple
     // @include ripple.surface(
     //   $ripple-target: chip-theme.$ripple-target,
     //   $include-will-change: false
@@ -61,12 +55,12 @@
     height: 100%;
     width: 100%;
     top: 0;
-    // TODO(kainby): Translate to logical properties
+    // TODO(b/240224981): Translate to md3 rtl / logical properties
     // @include rtl.ignore-next-line();
     left: 0;
   }
 
-  #{chip-theme.$ripple-target-trailing} {
+  #{chip-theme.$ripple-target-delete} {
     top: 50%;
     transform: translateY(-50%);
   }
@@ -83,7 +77,7 @@
   .md3-chip {
     position: relative;
     max-width: 100%;
-    // TODO(kainby): Translate to md3 elevation
+    // TODO(b/240224981): Translate to md3 elevation
     // @include elevation-theme.overlay-dimensions(100%, $query: $query);
   }
 
@@ -96,7 +90,7 @@
     overflow-x: hidden;
   }
 
-  .md3-chip__cell--trailing {
+  .md3-chip__cell--delete {
     flex: 1 0 auto;
   }
 
@@ -127,7 +121,7 @@
     overflow-x: hidden;
   }
 
-  .md3-chip__action--trailing {
+  .md3-chip__action--delete {
     position: relative;
     overflow: visible;
   }
@@ -145,13 +139,18 @@
   }
 
   .md3-chip--touch {
-    @include touch-target.margin(
-      $component-height: chip-theme.$height,
-    );
+    $margin: math.div(48px - chip-theme.$height, 2);
+    margin-top: $margin;
+    margin-bottom: $margin;
   }
 
   .md3-chip__action-touch {
-    @include touch-target.touch-target();
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
   }
 
   .md3-chip__text-label {
@@ -175,7 +174,7 @@
     position: absolute;
     opacity: 0;
     top: 50%;
-    // TODO(kainby): Translate to logical properties
+    // TODO(b/240224981): Translate to logical properties
     // @include rtl.ignore-next-line();
     left: 50%;
   }
@@ -222,7 +221,7 @@
     }
 
     .md3-chip__checkmark {
-      // TODO(kainby): Translate to md3 animation
+      // TODO(b/240224981): Translate to md3 animation
       // transition: animation.linear(opacity, 50ms),
       //   animation.standard(transform, 100ms);
       transform: translate(-75%, -50%);
@@ -313,18 +312,38 @@
 
 @mixin _high-contrast-mode() {
   @include dom.forced-colors-mode {
-    @include chip-theme.outline-color((
-      default: CanvasText,
-      disabled: GrayText,
-    ));
-    @include chip-theme.selected-outline-color((
-      default: CanvasText,
-      disabled: GrayText,
-    ));
-    @include chip-theme.text-label-color((disabled: GrayText));
-    @include chip-theme.icon-color((disabled: GrayText));
-    @include chip-theme.checkmark-color((disabled: GrayText));
-    @include chip-theme.trailing-action-color((disabled: GrayText));
+    @include chip-theme.outline-color(
+      (
+        default: CanvasText,
+        disabled: GrayText,
+      )
+    );
+    @include chip-theme.selected-outline-color(
+      (
+        default: CanvasText,
+        disabled: GrayText,
+      )
+    );
+    @include chip-theme.text-label-color(
+      (
+        disabled: GrayText,
+      )
+    );
+    @include chip-theme.icon-color(
+      (
+        disabled: GrayText,
+      )
+    );
+    @include chip-theme.checkmark-color(
+      (
+        disabled: GrayText,
+      )
+    );
+    @include chip-theme.delete-action-color(
+      (
+        disabled: GrayText,
+      )
+    );
   }
 
   ///
@@ -336,8 +355,8 @@
   }
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Convert to md3 ripple
-    // @include ripple-theme.focus() {
+    // TODO(b/240224981): Convert to md3 ripple
+    // @include ripple.focus() {
     //   .md3-chip__focus-ring {
     //     z-index: 1;
     //     display: block;
@@ -346,17 +365,19 @@
     // }
   }
 
-  .md3-chip__action--trailing:not(.md3-chip__action--presentational) {
-    // TODO(kainby): Convert to md3 ripple
-    // @include ripple-theme.focus() {
-      .md3-chip__focus-ring {
-        z-index: 1;
-        display: block;
-        @include focus-ring-theme.theme((
+  .md3-chip__action--delete:not(.md3-chip__action--presentational) {
+    // TODO(b/240224981): Convert to md3 ripple
+    // @include ripple.focus() {
+    .md3-chip__focus-ring {
+      z-index: 1;
+      display: block;
+      @include focus-ring.theme(
+        (
           container-outer-padding-vertical: 2px,
           container-outer-padding-horizontal: -2px,
-        ));
-      }
+        )
+      );
+    }
     // }
   }
 }
@@ -374,31 +395,27 @@
       chip-theme.$graphic-trailing-padding,
       chip-theme.$trailing-padding
     );
-    @include chip-theme.with-trailing-action-horizontal-padding(
+    @include chip-theme.with-delete-action-horizontal-padding(
       chip-theme.$leading-padding,
-      chip-theme.$trailing-action-leading-padding,
-      chip-theme.$trailing-action-trailing-padding
+      chip-theme.$delete-action-leading-padding,
+      chip-theme.$delete-action-trailing-padding
     );
-    @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(
+    @include chip-theme.with-graphic-and-delete-action-horizontal-padding(
       chip-theme.$graphic-leading-padding,
       chip-theme.$graphic-trailing-padding,
-      chip-theme.$trailing-action-leading-padding,
-      chip-theme.$trailing-action-trailing-padding
+      chip-theme.$delete-action-leading-padding,
+      chip-theme.$delete-action-trailing-padding
     );
     @include chip-theme.container-color(chip-theme.$container-color);
     @include chip-theme.text-label-color(chip-theme.$text-label-color);
     @include chip-theme.icon-color(chip-theme.$icon-color);
     @include chip-theme.checkmark-color(chip-theme.$checkmark-color);
-    @include chip-theme.trailing-action-color(
-      chip-theme.$trailing-action-color
-    );
+    @include chip-theme.delete-action-color(chip-theme.$delete-action-color);
     @include chip-theme.text-label-type-scale(chip-theme.$type-scale);
     @include chip-theme.graphic-size(chip-theme.$leading-icon-size);
     @include chip-theme.icon-size(chip-theme.$leading-icon-size);
     @include chip-theme.checkmark-size(chip-theme.$checkmark-size);
-    @include chip-theme.trailing-action-size(
-      chip-theme.$trailing-action-size
-    );
+    @include chip-theme.delete-action-size(chip-theme.$delete-action-size);
 
     @include _high-contrast-mode();
   }
@@ -415,11 +432,11 @@
       chip-theme.$avatar-trailing-padding,
       chip-theme.$trailing-padding
     );
-    @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(
+    @include chip-theme.with-graphic-and-delete-action-horizontal-padding(
       chip-theme.$avatar-leading-padding,
       chip-theme.$avatar-trailing-padding,
-      chip-theme.$trailing-action-leading-padding,
-      chip-theme.$trailing-action-trailing-padding
+      chip-theme.$delete-action-leading-padding,
+      chip-theme.$delete-action-trailing-padding
     );
     @include chip-theme.graphic-size(chip-theme.$avatar-size);
     @include chip-theme.icon-size(chip-theme.$avatar-size);

package/chips/chip/lib/_filter-chip-theme.scss

@@ -5,9 +5,8 @@
  */
 
 @use 'sass:map';
-@use '@material/web/compat/theme/keys';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
+@use '../../../sass/resolvers';
+@use '../../../sass/theme';
 @use './chip-theme';
 
 $_light-theme: (
@@ -116,17 +115,12 @@ $_custom-property-prefix: 'filter-chip';
     }
   }
 
-  @include keys.declare-custom-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
   @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
 }

package/chips/chip/lib/_input-chip-theme.scss

@@ -5,9 +5,8 @@
  */
 
 @use 'sass:map';
-@use '@material/web/compat/theme/keys';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
+@use '../../../sass/resolvers';
+@use '../../../sass/theme';
 @use './chip-theme';
 
 $_light-theme: (
@@ -23,8 +22,8 @@ $_light-theme: (
   label-text-weight: null,
   label-text-tracking: null,
   label-text-color: null,
-  with-trailing-icon-trailing-icon-size: null,
-  with-trailing-icon-trailing-icon-color: null,
+  with-delete-icon-delete-icon-size: null,
+  with-delete-icon-delete-icon-color: null,
   with-leading-icon-leading-icon-size: null,
   with-leading-icon-leading-icon-color: null,
   with-avatar-avatar-size: null,
@@ -33,26 +32,26 @@ $_light-theme: (
   disabled-outline-opacity: null,
   disabled-label-text-color: null,
   disabled-label-text-opacity: null,
-  with-trailing-icon-disabled-trailing-icon-color: null,
-  with-trailing-icon-disabled-trailing-icon-opacity: null,
+  with-delete-icon-disabled-delete-icon-color: null,
+  with-delete-icon-disabled-delete-icon-opacity: null,
   with-leading-icon-disabled-leading-icon-color: null,
   with-leading-icon-disabled-leading-icon-opacity: null,
   with-avatar-disabled-avatar-opacity: null,
   hover-state-layer-color: null,
   hover-state-layer-opacity: null,
   hover-label-text-color: null,
-  with-trailing-icon-hover-trailing-icon-color: null,
+  with-delete-icon-hover-delete-icon-color: null,
   with-leading-icon-hover-leading-icon-color: null,
   focus-state-layer-color: null,
   focus-state-layer-opacity: null,
   focus-label-text-color: null,
   focus-outline-color: null,
-  with-trailing-icon-focus-trailing-icon-color: null,
+  with-delete-icon-focus-delete-icon-color: null,
   with-leading-icon-focus-leading-icon-color: null,
   pressed-state-layer-color: null,
   pressed-state-layer-opacity: null,
   pressed-label-text-color: null,
-  with-trailing-icon-pressed-trailing-icon-color: null,
+  with-delete-icon-pressed-delete-icon-color: null,
   with-leading-icon-pressed-leading-icon-color: null,
   container-surface-tint-layer-color: null,
 );
@@ -87,17 +86,12 @@ $_custom-property-prefix: 'input-chip';
     }
   }
 
-  @include keys.declare-custom-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
   @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
 }

package/chips/chip/lib/_suggestion-chip-theme.scss

@@ -5,9 +5,8 @@
  */
 
 @use 'sass:map';
-@use '@material/web/compat/theme/keys';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
+@use '../../../sass/resolvers';
+@use '../../../sass/theme';
 @use './chip-theme';
 
 $_light-theme: (
@@ -78,17 +77,12 @@ $_custom-property-prefix: 'suggestion-chip';
     }
   }
 
-  @include keys.declare-custom-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
   @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
 }

package/chips/chip/lib/action-chip.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../action/primary-action.js';
+import { TemplateResult } from 'lit';
+import { Chip } from './chip.js';
+/** @soyCompatible */
+export declare class ActionChip extends Chip {
+    /**
+     * @soyTemplate
+     * @soyAttributes attributes: .md3-chip
+     */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    private renderPrimaryAction;
+}

package/chips/chip/lib/action-chip.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../action/primary-action.js';
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { Chip } from './chip.js';
+/** @soyCompatible */
+export class ActionChip extends Chip {
+    /**
+     * @soyTemplate
+     * @soyAttributes attributes: .md3-chip
+     */
+    render() {
+        return html `
+      <span class="${classMap(this.getRootClasses())}" role="row">
+        ${this.renderOverlay()}
+        <span class="md3-chip__cell md3-chip__cell--primary" role="gridcell">
+          ${this.renderPrimaryAction()}
+        </span>
+        ${this.renderDeleteAction()}
+      </span>`;
+    }
+    /** @soyTemplate */
+    renderPrimaryAction() {
+        return html `
+      <md-primary-action
+          ?disabled=${this.disabled}
+          ?isFocusable=${this.isFocusable}
+          ?isTouchable=${this.isTouchable}
+          .icon=${this.icon}
+          .label=${this.label}
+          .ariaLabel=${this.ariaLabel}>
+      </md-primary-action>`;
+    }
+}
+//# sourceMappingURL=action-chip.js.map

package/chips/chip/lib/action-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-chip.js","sourceRoot":"","sources":["action-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B,qBAAqB;AACrB,MAAM,OAAO,UAAW,SAAQ,IAAI;IAClC;;;OAGG;IACgB,MAAM;QACvB,OAAO,IAAI,CAAA;qBACM,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;UAC1C,IAAI,CAAC,aAAa,EAAE;;YAElB,IAAI,CAAC,mBAAmB,EAAE;;UAE5B,IAAI,CAAC,kBAAkB,EAAE;cACrB,CAAC;IACb,CAAC;IAED,mBAAmB;IACX,mBAAmB;QACzB,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;kBACvB,IAAI,CAAC,IAAI;mBACR,IAAI,CAAC,KAAK;uBACN,IAAI,CAAC,SAAS;2BACV,CAAC;IAC1B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../action/primary-action.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {Chip} from './chip.js';\n\n/** @soyCompatible */\nexport class ActionChip extends Chip {\n  /**\n   * @soyTemplate\n   * @soyAttributes attributes: .md3-chip\n   */\n  protected override render(): TemplateResult {\n    return html`\n      <span class=\"${classMap(this.getRootClasses())}\" role=\"row\">\n        ${this.renderOverlay()}\n        <span class=\"md3-chip__cell md3-chip__cell--primary\" role=\"gridcell\">\n          ${this.renderPrimaryAction()}\n        </span>\n        ${this.renderDeleteAction()}\n      </span>`;\n  }\n\n  /** @soyTemplate */\n  private renderPrimaryAction(): TemplateResult {\n    return html`\n      <md-primary-action\n          ?disabled=${this.disabled}\n          ?isFocusable=${this.isFocusable}\n          ?isTouchable=${this.isTouchable}\n          .icon=${this.icon}\n          .label=${this.label}\n          .ariaLabel=${this.ariaLabel}>\n      </md-primary-action>`;\n  }\n}\n\n"]}

package/{compat/animation → chips/chip/lib}/animationframe.js

@@ -3,6 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+// TODO: Remove in favor of AnimationSignal
 /**
  * AnimationFrame provides a user-friendly abstraction around requesting
  * and canceling animation frames.

package/chips/chip/lib/animationframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationframe.js","sourceRoot":"","sources":["animationframe.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,OAAO,cAAc;IAA3B;QACmB,WAAM,GAAG,IAAI,GAAG,EAAkB,CAAC;IAuDtD,CAAC;IArDC;;;;OAIG;IACH,OAAO,CAAC,GAAW,EAAE,QAA8B;QACjD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACjB,MAAM,OAAO,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACxB,wEAAwE;YACxE,6CAA6C;YAC7C,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,GAAW;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACnC,IAAI,KAAK,EAAE;YACT,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SACzB;IACH,CAAC;IAED;;OAEG;IACH,SAAS;QACP,uEAAuE;QACvE,6DAA6D;QAC7D,+CAA+C;QAC/C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;YAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,MAAM,KAAK,GAAa,EAAE,CAAC;QAC3B,uEAAuE;QACvE,6DAA6D;QAC7D,+CAA+C;QAC/C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;YAC7B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// TODO: Remove in favor of AnimationSignal\n/**\n * AnimationFrame provides a user-friendly abstraction around requesting\n * and canceling animation frames.\n */\nexport class AnimationFrame {\n  private readonly rafIDs = new Map<string, number>();\n\n  /**\n   * Requests an animation frame. Cancels any existing frame with the same key.\n   * @param {string} key The key for this callback.\n   * @param {FrameRequestCallback} callback The callback to be executed.\n   */\n  request(key: string, callback: FrameRequestCallback) {\n    this.cancel(key);\n    const frameID = requestAnimationFrame((frame) => {\n      this.rafIDs.delete(key);\n      // Callback must come *after* the key is deleted so that nested calls to\n      // request with the same key are not deleted.\n      callback(frame);\n    });\n    this.rafIDs.set(key, frameID);\n  }\n\n  /**\n   * Cancels a queued callback with the given key.\n   * @param {string} key The key for this callback.\n   */\n  cancel(key: string) {\n    const rafID = this.rafIDs.get(key);\n    if (rafID) {\n      cancelAnimationFrame(rafID);\n      this.rafIDs.delete(key);\n    }\n  }\n\n  /**\n   * Cancels all queued callback.\n   */\n  cancelAll() {\n    // Need to use forEach because it's the only iteration method supported\n    // by IE11. Suppress the underscore because we don't need it.\n    // tslint:disable-next-line:enforce-name-casing\n    this.rafIDs.forEach((_, key) => {\n      this.cancel(key);\n    });\n  }\n\n  /**\n   * Returns the queue of unexecuted callback keys.\n   */\n  getQueue(): string[] {\n    const queue: string[] = [];\n    // Need to use forEach because it's the only iteration method supported\n    // by IE11. Suppress the underscore because we don't need it.\n    // tslint:disable-next-line:enforce-name-casing\n    this.rafIDs.forEach((_, key) => {\n      queue.push(key);\n    });\n    return queue;\n  }\n}\n"]}

package/chips/chip/lib/chip.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../action/delete-action.js';
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { ActionElement } from '../../../actionelement/action-element.js';
+/** Defines the border type of a chip. */
+export declare enum BorderType {
+    ELEVATED = "ELEVATED",
+    HAIRLINE = "HAIRLINE"
+}
+/** Defines the shape of the vertical edge of a chip. */
+export declare enum EdgeType {
+    ROUNDED = "ROUNDED",
+    STRAIGHT = "STRAIGHT"
+}
+/** @soyCompatible */
+export declare abstract class Chip extends ActionElement {
+    isFocusable: boolean;
+    isTouchable: boolean;
+    disabled: boolean;
+    hasAvatar: boolean;
+    hasDeleteAction: boolean;
+    icon: string;
+    label: string;
+    borderType: BorderType;
+    edgeType: EdgeType;
+    addedAnnouncement: string;
+    removedAnnouncement: string;
+    closeActionAriaLabel: string;
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    /** @soyTemplate */
+    protected getRootClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderOverlay(): TemplateResult;
+    /** @soyTemplate */
+    protected renderDeleteAction(): TemplateResult;
+}

package/chips/chip/lib/chip.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '../../action/delete-action.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ActionElement } from '../../../actionelement/action-element.js';
+import { ariaProperty } from '../../../decorators/aria-property.js';
+/** Defines the border type of a chip. */
+export var BorderType;
+(function (BorderType) {
+    BorderType["ELEVATED"] = "ELEVATED";
+    BorderType["HAIRLINE"] = "HAIRLINE";
+})(BorderType || (BorderType = {}));
+/** Defines the shape of the vertical edge of a chip. */
+export var EdgeType;
+(function (EdgeType) {
+    EdgeType["ROUNDED"] = "ROUNDED";
+    EdgeType["STRAIGHT"] = "STRAIGHT";
+})(EdgeType || (EdgeType = {}));
+/** @soyCompatible */
+export class Chip extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this.isFocusable = false;
+        this.isTouchable = false;
+        this.disabled = false;
+        this.hasAvatar = false;
+        this.hasDeleteAction = false;
+        this.icon = '';
+        this.label = '';
+        this.borderType = BorderType.HAIRLINE;
+        this.edgeType = EdgeType.ROUNDED;
+        this.addedAnnouncement = '';
+        this.removedAnnouncement = '';
+        this.closeActionAriaLabel = '';
+    }
+    /** @soyTemplate */
+    getRootClasses() {
+        const hasIcon = this.icon.trim().length > 0;
+        return {
+            'md3-chip': true,
+            'md3-chip--disabled': this.disabled,
+            'md3-chip--touch': this.isTouchable,
+            'md3-chip--with-primary-graphic': hasIcon,
+            'md3-chip--with-primary-icon': hasIcon,
+            'md3-chip--with-avatar': this.hasAvatar,
+            'md3-chip--with-delete-action': this.hasDeleteAction,
+        };
+    }
+    /** @soyTemplate */
+    renderOverlay() {
+        return this.borderType === BorderType.ELEVATED ?
+            html `<div class="md3-elevation-overlay" aria-hidden="true"></div>` :
+            html ``;
+    }
+    /** @soyTemplate */
+    renderDeleteAction() {
+        if (!this.hasDeleteAction) {
+            return html ``;
+        }
+        else {
+            return html `
+        <span class="md3-chip__cell md3-chip__cell--delete"
+              role="gridcell">
+          <md-delete-action
+            ?disabled=${this.disabled}
+            ?isFocusable=${this.isFocusable}
+            ?isTouchable=${this.isTouchable}
+            .ariaLabel=${this.closeActionAriaLabel}>
+          </md-delete-action>
+        </span>`;
+        }
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Chip.prototype, "isFocusable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Chip.prototype, "isTouchable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Chip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Chip.prototype, "hasAvatar", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Chip.prototype, "hasDeleteAction", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "icon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "borderType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "edgeType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "addedAnnouncement", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "removedAnnouncement", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "closeActionAriaLabel", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], Chip.prototype, "ariaLabel", void 0);
+//# sourceMappingURL=chip.js.map