@material/web 0.1.0-alpha.0

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

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'sass:map';
+@use '@material/web/compat/theme/keys';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use './chip-theme';
+
+$_light-theme: (
+  container-shape: null,
+  container-height: null,
+  flat-container-elevation: null,
+  flat-outline-color: null,
+  flat-outline-width: null,
+  elevated-container-elevation: null,
+  elevated-container-color: null,
+  elevated-container-shadow-color: null,
+  label-text-font: null,
+  label-text-line-height: null,
+  label-text-size: null,
+  label-text-weight: null,
+  label-text-tracking: null,
+  label-text-color: null,
+  flat-disabled-outline-color: null,
+  flat-disabled-outline-opacity: null,
+  disabled-label-text-color: null,
+  disabled-label-text-opacity: null,
+  elevated-disabled-container-elevation: null,
+  elevated-disabled-container-color: null,
+  elevated-disabled-container-opacity: null,
+  hover-state-layer-color: null,
+  hover-state-layer-opacity: null,
+  hover-label-text-color: null,
+  elevated-hover-container-elevation: null,
+  focus-state-layer-color: null,
+  focus-state-layer-opacity: null,
+  focus-label-text-color: null,
+  flat-focus-outline-color: null,
+  elevated-focus-container-elevation: null,
+  pressed-state-layer-color: null,
+  pressed-state-layer-opacity: null,
+  pressed-label-text-color: null,
+  elevated-pressed-container-elevation: null,
+  container-surface-tint-layer-color: null,
+);
+
+$_custom-property-prefix: 'suggestion-chip';
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  @include theme.validate-theme($_light-theme, $theme);
+
+  // Resolve elevation.
+  @each $key
+    in (
+      flat-container-elevation,
+      elevated-container-elevation,
+      elevated-disabled-container-elevation,
+      elevated-hover-container-elevation,
+      elevated-focus-container-elevation,
+      elevated-pressed-container-elevation
+    )
+  {
+    $value: map.get($theme, $key);
+    @if $value {
+      $theme: map.set(
+        $theme,
+        $key,
+        meta.call(
+          $elevation-resolver: map.get($resolvers, elevation),
+          $elevation: $value,
+          $shadow-color: map.get($theme, elevated-container-shadow-color),
+        )
+      );
+    }
+  }
+
+  @include keys.declare-custom-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  @include theme.validate-theme($_light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCChipActionFocusBehavior, MDCChipActionType } from '../../action/lib/constants.js';
+import { MDCChipAttributes, MDCChipCssClasses, MDCChipEvents } from './constants.js';
+/**
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ */
+export interface MDCChipAdapter {
+    /** Adds the given class to the root element. */
+    addClass(className: MDCChipCssClasses): void;
+    /** Emits the given event with the given detail. */
+    emitEvent<D extends object>(eventName: MDCChipEvents, eventDetail: D): void;
+    /** Returns the child actions provided by the chip. */
+    getActions(): MDCChipActionType[];
+    /** Returns the value for the given attribute, if it exists. */
+    getAttribute(attrName: MDCChipAttributes): string | null;
+    /** Returns the ID of the root element. */
+    getElementID(): string;
+    /** Returns the offset width of the root element. */
+    getOffsetWidth(): number;
+    /** Returns true if the root element has the given class. */
+    hasClass(className: MDCChipCssClasses): boolean;
+    /** Proxies to the MDCChipAction#isSelectable method. */
+    isActionSelectable(action: MDCChipActionType): boolean;
+    /** Proxies to the MDCChipAction#isSelected method. */
+    isActionSelected(action: MDCChipActionType): boolean;
+    /** Proxies to the MDCChipAction#isFocusable method. */
+    isActionFocusable(action: MDCChipActionType): boolean;
+    /** Proxies to the MDCChipAction#isDisabled method. */
+    isActionDisabled(action: MDCChipActionType): boolean;
+    /** Returns true if the text direction is right-to-left. */
+    isRTL(): boolean;
+    /** Removes the given class from the root element. */
+    removeClass(className: MDCChipCssClasses): void;
+    /** Proxies to the MDCChipAction#setDisabled method. */
+    setActionDisabled(action: MDCChipActionType, isDisabled: boolean): void;
+    /** Proxies to the MDCChipAction#setFocus method. */
+    setActionFocus(action: MDCChipActionType, behavior: MDCChipActionFocusBehavior): void;
+    /** Proxies to the MDCChipAction#setSelected method. */
+    setActionSelected(action: MDCChipActionType, isSelected: boolean): void;
+    /** Sets the style property to the given value. */
+    setStyleProperty(property: string, value: string): void;
+}

package/chips/chip/lib/adapter.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js';\n\nimport {MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipAdapter {\n  /** Adds the given class to the root element. */\n  addClass(className: MDCChipCssClasses): void;\n\n  /** Emits the given event with the given detail. */\n  emitEvent<D extends object>(eventName: MDCChipEvents, eventDetail: D): void;\n\n  /** Returns the child actions provided by the chip. */\n  getActions(): MDCChipActionType[];\n\n  /** Returns the value for the given attribute, if it exists. */\n  getAttribute(attrName: MDCChipAttributes): string|null;\n\n  /** Returns the ID of the root element. */\n  getElementID(): string;\n\n  /** Returns the offset width of the root element. */\n  getOffsetWidth(): number;\n\n  /** Returns true if the root element has the given class. */\n  hasClass(className: MDCChipCssClasses): boolean;\n\n  /** Proxies to the MDCChipAction#isSelectable method. */\n  isActionSelectable(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isSelected method. */\n  isActionSelected(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isFocusable method. */\n  isActionFocusable(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isDisabled method. */\n  isActionDisabled(action: MDCChipActionType): boolean;\n\n  /** Returns true if the text direction is right-to-left. */\n  isRTL(): boolean;\n\n  /** Removes the given class from the root element. */\n  removeClass(className: MDCChipCssClasses): void;\n\n  /** Proxies to the MDCChipAction#setDisabled method. */\n  setActionDisabled(action: MDCChipActionType, isDisabled: boolean): void;\n\n  /** Proxies to the MDCChipAction#setFocus method. */\n  setActionFocus(\n      action: MDCChipActionType, behavior: MDCChipActionFocusBehavior): void;\n\n  /** Proxies to the MDCChipAction#setSelected method. */\n  setActionSelected(action: MDCChipActionType, isSelected: boolean): void;\n\n  /** Sets the style property to the given value. */\n  setStyleProperty(property: string, value: string): void;\n}\n"]}

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * MDCChipCssClasses provides the named constants for class names.
+ */
+export declare enum MDCChipCssClasses {
+    SELECTING = "md3-chip--selecting",
+    DESELECTING = "md3-chip--deselecting",
+    SELECTING_WITH_PRIMARY_ICON = "md3-chip--selecting-with-primary-icon",
+    DESELECTING_WITH_PRIMARY_ICON = "md3-chip--deselecting-with-primary-icon",
+    DISABLED = "md3-chip--disabled",
+    ENTER = "md3n-chip--enter",
+    EXIT = "md3-chip--exit",
+    SELECTED = "md3-chip--selected",
+    HIDDEN = "md3-chip--hidden",
+    WITH_PRIMARY_ICON = "md3-chip--with-primary-icon"
+}
+/**
+ * MDCChipEvents provides the named constants for emitted events.
+ */
+export declare enum MDCChipEvents {
+    INTERACTION = "MDCChip:interaction",
+    NAVIGATION = "MDCChip:navigation",
+    ANIMATION = "MDCChip:animation"
+}
+/**
+ * MDCChipAttributes provides the named constants for strings used by the
+ * foundation.
+ */
+export declare enum MDCChipAttributes {
+    DATA_REMOVED_ANNOUNCEMENT = "data-md3-removed-announcement",
+    DATA_ADDED_ANNOUNCEMENT = "data-md3-added-announcement"
+}
+/**
+ * MDCChipAnimation provides the names of runnable animations.
+ */
+export declare enum MDCChipAnimation {
+    ENTER = "md3-chip-enter",
+    EXIT = "md3-chip-exit"
+}

package/chips/chip/lib/constants.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * MDCChipCssClasses provides the named constants for class names.
+ */
+export var MDCChipCssClasses;
+(function (MDCChipCssClasses) {
+    MDCChipCssClasses["SELECTING"] = "md3-chip--selecting";
+    MDCChipCssClasses["DESELECTING"] = "md3-chip--deselecting";
+    MDCChipCssClasses["SELECTING_WITH_PRIMARY_ICON"] = "md3-chip--selecting-with-primary-icon";
+    MDCChipCssClasses["DESELECTING_WITH_PRIMARY_ICON"] = "md3-chip--deselecting-with-primary-icon";
+    MDCChipCssClasses["DISABLED"] = "md3-chip--disabled";
+    MDCChipCssClasses["ENTER"] = "md3n-chip--enter";
+    MDCChipCssClasses["EXIT"] = "md3-chip--exit";
+    MDCChipCssClasses["SELECTED"] = "md3-chip--selected";
+    MDCChipCssClasses["HIDDEN"] = "md3-chip--hidden";
+    MDCChipCssClasses["WITH_PRIMARY_ICON"] = "md3-chip--with-primary-icon";
+})(MDCChipCssClasses || (MDCChipCssClasses = {}));
+/**
+ * MDCChipEvents provides the named constants for emitted events.
+ */
+export var MDCChipEvents;
+(function (MDCChipEvents) {
+    MDCChipEvents["INTERACTION"] = "MDCChip:interaction";
+    MDCChipEvents["NAVIGATION"] = "MDCChip:navigation";
+    MDCChipEvents["ANIMATION"] = "MDCChip:animation";
+})(MDCChipEvents || (MDCChipEvents = {}));
+/**
+ * MDCChipAttributes provides the named constants for strings used by the
+ * foundation.
+ */
+export var MDCChipAttributes;
+(function (MDCChipAttributes) {
+    MDCChipAttributes["DATA_REMOVED_ANNOUNCEMENT"] = "data-md3-removed-announcement";
+    MDCChipAttributes["DATA_ADDED_ANNOUNCEMENT"] = "data-md3-added-announcement";
+})(MDCChipAttributes || (MDCChipAttributes = {}));
+/**
+ * MDCChipAnimation provides the names of runnable animations.
+ */
+export var MDCChipAnimation;
+(function (MDCChipAnimation) {
+    MDCChipAnimation["ENTER"] = "md3-chip-enter";
+    MDCChipAnimation["EXIT"] = "md3-chip-exit";
+})(MDCChipAnimation || (MDCChipAnimation = {}));
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,iBAWX;AAXD,WAAY,iBAAiB;IAC3B,sDAAiC,CAAA;IACjC,0DAAqC,CAAA;IACrC,0FAAqE,CAAA;IACrE,8FAAyE,CAAA;IACzE,oDAA+B,CAAA;IAC/B,+CAA0B,CAAA;IAC1B,4CAAuB,CAAA;IACvB,oDAA+B,CAAA;IAC/B,gDAA2B,CAAA;IAC3B,sEAAiD,CAAA;AACnD,CAAC,EAXW,iBAAiB,KAAjB,iBAAiB,QAW5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,oDAAmC,CAAA;IACnC,kDAAiC,CAAA;IACjC,gDAA+B,CAAA;AACjC,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,gFAA2D,CAAA;IAC3D,4EAAuD,CAAA;AACzD,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,4CAAwB,CAAA;IACxB,0CAAsB,CAAA;AACxB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * MDCChipCssClasses provides the named constants for class names.\n */\nexport enum MDCChipCssClasses {\n  SELECTING = 'md3-chip--selecting',\n  DESELECTING = 'md3-chip--deselecting',\n  SELECTING_WITH_PRIMARY_ICON = 'md3-chip--selecting-with-primary-icon',\n  DESELECTING_WITH_PRIMARY_ICON = 'md3-chip--deselecting-with-primary-icon',\n  DISABLED = 'md3-chip--disabled',\n  ENTER = 'md3n-chip--enter',\n  EXIT = 'md3-chip--exit',\n  SELECTED = 'md3-chip--selected',\n  HIDDEN = 'md3-chip--hidden',\n  WITH_PRIMARY_ICON = 'md3-chip--with-primary-icon',\n}\n\n/**\n * MDCChipEvents provides the named constants for emitted events.\n */\nexport enum MDCChipEvents {\n  INTERACTION = 'MDCChip:interaction',\n  NAVIGATION = 'MDCChip:navigation',\n  ANIMATION = 'MDCChip:animation',\n}\n\n/**\n * MDCChipAttributes provides the named constants for strings used by the\n * foundation.\n */\nexport enum MDCChipAttributes {\n  DATA_REMOVED_ANNOUNCEMENT = 'data-md3-removed-announcement',\n  DATA_ADDED_ANNOUNCEMENT = 'data-md3-added-announcement',\n}\n\n/**\n * MDCChipAnimation provides the names of runnable animations.\n */\nexport enum MDCChipAnimation {\n  ENTER = 'md3-chip-enter',\n  EXIT = 'md3-chip-exit',\n}\n"]}

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCChipActionFocusBehavior, MDCChipActionType } from '../../action/lib/constants.js';
+import { MDCChipAdapter } from './adapter.js';
+import { MDCChipAnimation } from './constants.js';
+import { ActionInteractionEvent, ActionNavigationEvent } from './types.js';
+/**
+ * MDCChipFoundation provides a foundation for all chips.
+ */
+export declare class MDCChipFoundation {
+    private readonly adapter;
+    static get defaultAdapter(): MDCChipAdapter;
+    private readonly animFrame;
+    constructor(adapter?: Partial<MDCChipAdapter>);
+    destroy(): void;
+    getElementID(): string;
+    setDisabled(isDisabled: boolean): void;
+    isDisabled(): boolean;
+    getActions(): MDCChipActionType[];
+    isActionFocusable(action: MDCChipActionType): boolean;
+    isActionSelectable(action: MDCChipActionType): boolean;
+    isActionSelected(action: MDCChipActionType): boolean;
+    setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior): void;
+    setActionSelected(action: MDCChipActionType, isSelected: boolean): void;
+    startAnimation(animation: MDCChipAnimation): void;
+    handleAnimationEnd(event: AnimationEvent): void;
+    handleTransitionEnd(): void;
+    handleActionInteraction({ detail }: ActionInteractionEvent): void;
+    handleActionNavigation({ detail }: ActionNavigationEvent): void;
+    private directionFromKey;
+    private navigateActions;
+    private shouldRemove;
+    private getRemovedAnnouncement;
+    private getAddedAnnouncement;
+    private animateSelection;
+    private resetAnimationStyles;
+    private updateSelectionStyles;
+}

package/chips/chip/lib/foundation.js

@@ -0,0 +1,256 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AnimationFrame } from '@material/web/compat/animation/animationframe.js';
+import { KEY } from '@material/web/compat/dom/keyboard.js';
+import { MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType } from '../../action/lib/constants.js';
+import { MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents } from './constants.js';
+var Direction;
+(function (Direction) {
+    Direction[Direction["UNSPECIFIED"] = 0] = "UNSPECIFIED";
+    Direction[Direction["LEFT"] = 1] = "LEFT";
+    Direction[Direction["RIGHT"] = 2] = "RIGHT";
+})(Direction || (Direction = {}));
+var AnimationKeys;
+(function (AnimationKeys) {
+    AnimationKeys["SELECTION"] = "selection";
+    AnimationKeys["EXIT"] = "exit";
+})(AnimationKeys || (AnimationKeys = {}));
+/**
+ * MDCChipFoundation provides a foundation for all chips.
+ */
+export class MDCChipFoundation {
+    constructor(adapter) {
+        this.adapter = { ...MDCChipFoundation.defaultAdapter, ...adapter };
+        this.animFrame = new AnimationFrame();
+    }
+    static get defaultAdapter() {
+        return {
+            addClass: () => undefined,
+            emitEvent: () => undefined,
+            getActions: () => [],
+            getAttribute: () => null,
+            getElementID: () => '',
+            getOffsetWidth: () => 0,
+            hasClass: () => false,
+            isActionDisabled: () => false,
+            isActionFocusable: () => false,
+            isActionSelectable: () => false,
+            isActionSelected: () => false,
+            isRTL: () => false,
+            removeClass: () => undefined,
+            setActionDisabled: () => undefined,
+            setActionFocus: () => undefined,
+            setActionSelected: () => undefined,
+            setStyleProperty: () => undefined,
+        };
+    }
+    destroy() {
+        this.animFrame.cancelAll();
+    }
+    getElementID() {
+        return this.adapter.getElementID();
+    }
+    setDisabled(isDisabled) {
+        const actions = this.getActions();
+        for (const action of actions) {
+            this.adapter.setActionDisabled(action, isDisabled);
+        }
+        if (isDisabled) {
+            this.adapter.addClass(MDCChipCssClasses.DISABLED);
+        }
+        else {
+            this.adapter.removeClass(MDCChipCssClasses.DISABLED);
+        }
+    }
+    isDisabled() {
+        const actions = this.getActions();
+        for (const action of actions) {
+            if (this.adapter.isActionDisabled(action)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getActions() {
+        return this.adapter.getActions();
+    }
+    isActionFocusable(action) {
+        return this.adapter.isActionFocusable(action);
+    }
+    isActionSelectable(action) {
+        return this.adapter.isActionSelectable(action);
+    }
+    isActionSelected(action) {
+        return this.adapter.isActionSelected(action);
+    }
+    setActionFocus(action, focus) {
+        this.adapter.setActionFocus(action, focus);
+    }
+    setActionSelected(action, isSelected) {
+        this.adapter.setActionSelected(action, isSelected);
+        this.animateSelection(isSelected);
+    }
+    startAnimation(animation) {
+        if (animation === MDCChipAnimation.ENTER) {
+            this.adapter.addClass(MDCChipCssClasses.ENTER);
+            return;
+        }
+        if (animation === MDCChipAnimation.EXIT) {
+            this.adapter.addClass(MDCChipCssClasses.EXIT);
+            return;
+        }
+    }
+    handleAnimationEnd(event) {
+        const { animationName } = event;
+        if (animationName === MDCChipAnimation.ENTER) {
+            this.adapter.removeClass(MDCChipCssClasses.ENTER);
+            this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
+                chipID: this.getElementID(),
+                animation: MDCChipAnimation.ENTER,
+                addedAnnouncement: this.getAddedAnnouncement(),
+                isComplete: true,
+            });
+            return;
+        }
+        if (animationName === MDCChipAnimation.EXIT) {
+            this.adapter.removeClass(MDCChipCssClasses.EXIT);
+            this.adapter.addClass(MDCChipCssClasses.HIDDEN);
+            const width = this.adapter.getOffsetWidth();
+            this.adapter.setStyleProperty('width', `${width}px`);
+            // Wait two frames so the width gets applied correctly.
+            this.animFrame.request(AnimationKeys.EXIT, () => {
+                this.animFrame.request(AnimationKeys.EXIT, () => {
+                    this.adapter.setStyleProperty('width', '0');
+                });
+            });
+        }
+    }
+    handleTransitionEnd() {
+        if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN))
+            return;
+        this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
+            chipID: this.getElementID(),
+            animation: MDCChipAnimation.EXIT,
+            removedAnnouncement: this.getRemovedAnnouncement(),
+            isComplete: true,
+        });
+    }
+    handleActionInteraction({ detail }) {
+        const { source, actionID } = detail;
+        const isSelectable = this.adapter.isActionSelectable(source);
+        const isSelected = this.adapter.isActionSelected(source);
+        this.adapter.emitEvent(MDCChipEvents.INTERACTION, {
+            chipID: this.getElementID(),
+            shouldRemove: this.shouldRemove(detail),
+            actionID,
+            isSelectable,
+            isSelected,
+            source,
+        });
+    }
+    handleActionNavigation({ detail }) {
+        const { source, key } = detail;
+        const isRTL = this.adapter.isRTL();
+        const isTrailingActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.TRAILING);
+        const isPrimaryActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.PRIMARY);
+        const dir = this.directionFromKey(key, isRTL);
+        const shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY &&
+            dir === Direction.RIGHT && isTrailingActionFocusable;
+        const shouldNavigateToPrimary = source === MDCChipActionType.TRAILING &&
+            dir === Direction.LEFT && isPrimaryActionFocusable;
+        if (shouldNavigateToTrailing) {
+            this.navigateActions({ from: source, to: MDCChipActionType.TRAILING });
+            return;
+        }
+        if (shouldNavigateToPrimary) {
+            this.navigateActions({ from: source, to: MDCChipActionType.PRIMARY });
+            return;
+        }
+        this.adapter.emitEvent(MDCChipEvents.NAVIGATION, {
+            chipID: this.getElementID(),
+            isRTL,
+            source,
+            key,
+        });
+    }
+    directionFromKey(key, isRTL) {
+        const isLeftKey = key === KEY.ARROW_LEFT;
+        const isRightKey = key === KEY.ARROW_RIGHT;
+        if (!isRTL && isLeftKey || isRTL && isRightKey) {
+            return Direction.LEFT;
+        }
+        if (!isRTL && isRightKey || isRTL && isLeftKey) {
+            return Direction.RIGHT;
+        }
+        return Direction.UNSPECIFIED;
+    }
+    navigateActions(nav) {
+        this.adapter.setActionFocus(nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE);
+        this.adapter.setActionFocus(nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);
+    }
+    shouldRemove({ source, trigger }) {
+        if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY ||
+            trigger === MDCChipActionInteractionTrigger.DELETE_KEY) {
+            return true;
+        }
+        return source === MDCChipActionType.TRAILING;
+    }
+    getRemovedAnnouncement() {
+        const msg = this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT);
+        return msg || undefined;
+    }
+    getAddedAnnouncement() {
+        const msg = this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT);
+        return msg || undefined;
+    }
+    animateSelection(isSelected) {
+        this.resetAnimationStyles();
+        // Wait two frames to ensure the animation classes are unset
+        this.animFrame.request(AnimationKeys.SELECTION, () => {
+            this.animFrame.request(AnimationKeys.SELECTION, () => {
+                this.updateSelectionStyles(isSelected);
+            });
+        });
+    }
+    resetAnimationStyles() {
+        this.adapter.removeClass(MDCChipCssClasses.SELECTING);
+        this.adapter.removeClass(MDCChipCssClasses.DESELECTING);
+        this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
+        this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
+    }
+    updateSelectionStyles(isSelected) {
+        const hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON);
+        if (hasIcon && isSelected) {
+            this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
+            this.animFrame.request(AnimationKeys.SELECTION, () => {
+                this.adapter.addClass(MDCChipCssClasses.SELECTED);
+            });
+            return;
+        }
+        if (hasIcon && !isSelected) {
+            this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
+            this.animFrame.request(AnimationKeys.SELECTION, () => {
+                this.adapter.removeClass(MDCChipCssClasses.SELECTED);
+            });
+            return;
+        }
+        if (isSelected) {
+            this.adapter.addClass(MDCChipCssClasses.SELECTING);
+            this.animFrame.request(AnimationKeys.SELECTION, () => {
+                this.adapter.addClass(MDCChipCssClasses.SELECTED);
+            });
+            return;
+        }
+        if (!isSelected) {
+            this.adapter.addClass(MDCChipCssClasses.DESELECTING);
+            this.animFrame.request(AnimationKeys.SELECTION, () => {
+                this.adapter.removeClass(MDCChipCssClasses.SELECTED);
+            });
+            return;
+        }
+    }
+}
+//# sourceMappingURL=foundation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AnimationFrame} from '@material/web/compat/animation/animationframe.js';\nimport {KEY} from '@material/web/compat/dom/keyboard.js';\n\nimport {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../../action/lib/constants.js';\nimport {MDCChipActionInteractionEventDetail} from '../../action/lib/types.js';\n\nimport {MDCChipAdapter} from './adapter.js';\nimport {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js';\nimport {ActionInteractionEvent, ActionNavigationEvent, MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from './types.js';\n\ninterface Navigation {\n  from: MDCChipActionType;\n  to: MDCChipActionType;\n}\n\nenum Direction {\n  UNSPECIFIED,  // Default\n  LEFT,\n  RIGHT,\n}\n\nenum AnimationKeys {\n  SELECTION = 'selection',\n  EXIT = 'exit',\n}\n\n/**\n * MDCChipFoundation provides a foundation for all chips.\n */\nexport class MDCChipFoundation {\n  private readonly adapter: MDCChipAdapter;\n\n  static get defaultAdapter(): MDCChipAdapter {\n    return {\n      addClass: () => undefined,\n      emitEvent: () => undefined,\n      getActions: () => [],\n      getAttribute: () => null,\n      getElementID: () => '',\n      getOffsetWidth: () => 0,\n      hasClass: () => false,\n      isActionDisabled: () => false,\n      isActionFocusable: () => false,\n      isActionSelectable: () => false,\n      isActionSelected: () => false,\n      isRTL: () => false,\n      removeClass: () => undefined,\n      setActionDisabled: () => undefined,\n      setActionFocus: () => undefined,\n      setActionSelected: () => undefined,\n      setStyleProperty: () => undefined,\n    };\n  }\n\n  private readonly animFrame: AnimationFrame;\n\n  constructor(adapter?: Partial<MDCChipAdapter>) {\n    this.adapter = {...MDCChipFoundation.defaultAdapter, ...adapter};\n    this.animFrame = new AnimationFrame();\n  }\n\n  destroy() {\n    this.animFrame.cancelAll();\n  }\n\n  getElementID() {\n    return this.adapter.getElementID();\n  }\n\n  setDisabled(isDisabled: boolean) {\n    const actions = this.getActions();\n    for (const action of actions) {\n      this.adapter.setActionDisabled(action, isDisabled);\n    }\n\n    if (isDisabled) {\n      this.adapter.addClass(MDCChipCssClasses.DISABLED);\n    } else {\n      this.adapter.removeClass(MDCChipCssClasses.DISABLED);\n    }\n  }\n\n  isDisabled(): boolean {\n    const actions = this.getActions();\n    for (const action of actions) {\n      if (this.adapter.isActionDisabled(action)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  getActions(): MDCChipActionType[] {\n    return this.adapter.getActions();\n  }\n\n  isActionFocusable(action: MDCChipActionType): boolean {\n    return this.adapter.isActionFocusable(action);\n  }\n\n  isActionSelectable(action: MDCChipActionType): boolean {\n    return this.adapter.isActionSelectable(action);\n  }\n\n  isActionSelected(action: MDCChipActionType): boolean {\n    return this.adapter.isActionSelected(action);\n  }\n\n  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {\n    this.adapter.setActionFocus(action, focus);\n  }\n\n  setActionSelected(action: MDCChipActionType, isSelected: boolean) {\n    this.adapter.setActionSelected(action, isSelected);\n    this.animateSelection(isSelected);\n  }\n\n  startAnimation(animation: MDCChipAnimation) {\n    if (animation === MDCChipAnimation.ENTER) {\n      this.adapter.addClass(MDCChipCssClasses.ENTER);\n      return;\n    }\n\n    if (animation === MDCChipAnimation.EXIT) {\n      this.adapter.addClass(MDCChipCssClasses.EXIT);\n      return;\n    }\n  }\n\n  handleAnimationEnd(event: AnimationEvent) {\n    const {animationName} = event;\n    if (animationName === MDCChipAnimation.ENTER) {\n      this.adapter.removeClass(MDCChipCssClasses.ENTER);\n      this.adapter.emitEvent<MDCChipAnimationEventDetail>(\n          MDCChipEvents.ANIMATION, {\n            chipID: this.getElementID(),\n            animation: MDCChipAnimation.ENTER,\n            addedAnnouncement: this.getAddedAnnouncement(),\n            isComplete: true,\n          });\n      return;\n    }\n\n    if (animationName === MDCChipAnimation.EXIT) {\n      this.adapter.removeClass(MDCChipCssClasses.EXIT);\n      this.adapter.addClass(MDCChipCssClasses.HIDDEN);\n      const width = this.adapter.getOffsetWidth();\n      this.adapter.setStyleProperty('width', `${width}px`);\n      // Wait two frames so the width gets applied correctly.\n      this.animFrame.request(AnimationKeys.EXIT, () => {\n        this.animFrame.request(AnimationKeys.EXIT, () => {\n          this.adapter.setStyleProperty('width', '0');\n        });\n      });\n    }\n  }\n\n  handleTransitionEnd() {\n    if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN)) return;\n\n    this.adapter.emitEvent<MDCChipAnimationEventDetail>(\n        MDCChipEvents.ANIMATION, {\n          chipID: this.getElementID(),\n          animation: MDCChipAnimation.EXIT,\n          removedAnnouncement: this.getRemovedAnnouncement(),\n          isComplete: true,\n        });\n  }\n\n  handleActionInteraction({detail}: ActionInteractionEvent) {\n    const {source, actionID} = detail;\n    const isSelectable = this.adapter.isActionSelectable(source);\n    const isSelected = this.adapter.isActionSelected(source);\n\n    this.adapter.emitEvent<MDCChipInteractionEventDetail>(\n        MDCChipEvents.INTERACTION, {\n          chipID: this.getElementID(),\n          shouldRemove: this.shouldRemove(detail),\n          actionID,\n          isSelectable,\n          isSelected,\n          source,\n        });\n  }\n\n  handleActionNavigation({detail}: ActionNavigationEvent) {\n    const {source, key} = detail;\n    const isRTL = this.adapter.isRTL();\n    const isTrailingActionFocusable =\n        this.adapter.isActionFocusable(MDCChipActionType.TRAILING);\n    const isPrimaryActionFocusable =\n        this.adapter.isActionFocusable(MDCChipActionType.PRIMARY);\n    const dir = this.directionFromKey(key, isRTL);\n\n    const shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY &&\n        dir === Direction.RIGHT && isTrailingActionFocusable;\n\n    const shouldNavigateToPrimary = source === MDCChipActionType.TRAILING &&\n        dir === Direction.LEFT && isPrimaryActionFocusable;\n\n    if (shouldNavigateToTrailing) {\n      this.navigateActions({from: source, to: MDCChipActionType.TRAILING});\n      return;\n    }\n\n    if (shouldNavigateToPrimary) {\n      this.navigateActions({from: source, to: MDCChipActionType.PRIMARY});\n      return;\n    }\n\n    this.adapter.emitEvent<MDCChipNavigationEventDetail>(\n        MDCChipEvents.NAVIGATION, {\n          chipID: this.getElementID(),\n          isRTL,\n          source,\n          key,\n        });\n  }\n\n  private directionFromKey(key: string, isRTL: boolean): Direction {\n    const isLeftKey = key === KEY.ARROW_LEFT;\n    const isRightKey = key === KEY.ARROW_RIGHT;\n    if (!isRTL && isLeftKey || isRTL && isRightKey) {\n      return Direction.LEFT;\n    }\n\n    if (!isRTL && isRightKey || isRTL && isLeftKey) {\n      return Direction.RIGHT;\n    }\n\n    return Direction.UNSPECIFIED;\n  }\n\n  private navigateActions(nav: Navigation) {\n    this.adapter.setActionFocus(\n        nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    this.adapter.setActionFocus(\n        nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n  }\n\n  private shouldRemove({source, trigger}: MDCChipActionInteractionEventDetail):\n      boolean {\n    if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY ||\n        trigger === MDCChipActionInteractionTrigger.DELETE_KEY) {\n      return true;\n    }\n\n    return source === MDCChipActionType.TRAILING;\n  }\n\n  private getRemovedAnnouncement(): string|undefined {\n    const msg =\n        this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT);\n    return msg || undefined;\n  }\n\n  private getAddedAnnouncement(): string|undefined {\n    const msg =\n        this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT);\n    return msg || undefined;\n  }\n\n  private animateSelection(isSelected: boolean) {\n    this.resetAnimationStyles();\n    // Wait two frames to ensure the animation classes are unset\n    this.animFrame.request(AnimationKeys.SELECTION, () => {\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.updateSelectionStyles(isSelected);\n      });\n    });\n  }\n\n  private resetAnimationStyles() {\n    this.adapter.removeClass(MDCChipCssClasses.SELECTING);\n    this.adapter.removeClass(MDCChipCssClasses.DESELECTING);\n    this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n    this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n  }\n\n  private updateSelectionStyles(isSelected: boolean) {\n    const hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON);\n    if (hasIcon && isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.addClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (hasIcon && !isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.removeClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.SELECTING);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.addClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (!isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.DESELECTING);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.removeClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n  }\n}\n\n"]}

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCChipActionType } from '../../action/lib/constants.js';
+import { MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail } from '../../action/lib/types.js';
+import { MDCChipAnimation } from './constants.js';
+/** MDCChipInteractionEventDetail provides details for the interaction event. */
+export interface MDCChipInteractionEventDetail {
+    actionID: string;
+    chipID: string;
+    source: MDCChipActionType;
+    shouldRemove: boolean;
+    isSelectable: boolean;
+    isSelected: boolean;
+}
+/** MDCChipNavigationEventDetail provides details for the navigation event. */
+export interface MDCChipNavigationEventDetail {
+    chipID: string;
+    source: MDCChipActionType;
+    key: string;
+    isRTL: boolean;
+}
+/**
+ * MDCChipAnimationEventDetail provides details for the animation event.
+ */
+export interface MDCChipAnimationEventDetail {
+    chipID: string;
+    animation: MDCChipAnimation;
+    isComplete: boolean;
+    addedAnnouncement?: string;
+    removedAnnouncement?: string;
+}
+/**
+ * MDCChipActionInteractionEvent is the custom event for the interaction event.
+ */
+export declare type ActionInteractionEvent = CustomEvent<MDCChipActionInteractionEventDetail>;
+/**
+ * MDCChipActionInteractionEvent is the custom event for the interaction event.
+ */
+export declare type ActionNavigationEvent = CustomEvent<MDCChipActionNavigationEventDetail>;

package/chips/chip/lib/types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MDCChipActionType} from '../../action/lib/constants.js';\nimport {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from '../../action/lib/types.js';\n\nimport {MDCChipAnimation} from './constants.js';\n\n/** MDCChipInteractionEventDetail provides details for the interaction event. */\nexport interface MDCChipInteractionEventDetail {\n  actionID: string;\n  chipID: string;\n  source: MDCChipActionType;\n  shouldRemove: boolean;\n  isSelectable: boolean;\n  isSelected: boolean;\n}\n\n/** MDCChipNavigationEventDetail provides details for the navigation event. */\nexport interface MDCChipNavigationEventDetail {\n  chipID: string;\n  source: MDCChipActionType;\n  key: string;\n  isRTL: boolean;\n}\n\n/**\n * MDCChipAnimationEventDetail provides details for the animation event.\n */\nexport interface MDCChipAnimationEventDetail {\n  chipID: string;\n  animation: MDCChipAnimation;\n  isComplete: boolean;\n  addedAnnouncement?: string;\n  removedAnnouncement?: string;\n}\n\n/**\n * MDCChipActionInteractionEvent is the custom event for the interaction event.\n */\nexport type ActionInteractionEvent =\n    CustomEvent<MDCChipActionInteractionEventDetail>;\n\n/**\n * MDCChipActionInteractionEvent is the custom event for the interaction event.\n */\nexport type ActionNavigationEvent =\n    CustomEvent<MDCChipActionNavigationEventDetail>;\n"]}