chore(chips): Fork foundation, adapter, and Sass files: ChipSet

PiperOrigin-RevId: 468108061

chips/chipset/lib/_chip-set-theme.scss

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'sass:math';
+
+// stylelint-disable selector-class-pattern -- MDC internal usage.
+
+$space-between-chips: 8px;
+
+///
+/// Sets the horiontal space between the chips in the chip set.
+/// @param {Number} $space - The horizontal space between the chips.
+///
+@mixin horizontal-space-between-chips($space) {
+  ///
+  /// We should use the column-gap property when our browser matrix allows.
+  ///
+
+  .md3-chip-set__chips {
+    // Set the margin to the negative horizontal space to account for chips
+    // being inset on the leading edge.
+    // TODO(kainby): Explore using CSS grid layout instead.
+    margin-inline-start: -$space;
+  }
+
+  .md3-chip {
+    margin-inline-start: $space;
+  }
+}
+
+///
+/// Sets the vertical space between the chips in the chip set.
+/// @param {Number} $space - The vertical space between the chips.
+///
+@mixin vertical-space-between-chips($space) {
+  ///
+  /// We should use the row-gap property when our browser matrix allows.
+  ///
+
+  .md3-chip {
+    // Set top and bottom to half the vertical space since there's no
+    // well supported method for vertical wrapping gaps.
+    margin-block: math.div($space, 2);
+  }
+}

chips/chipset/lib/_chip-set.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use './chip-set-theme';
+
+// stylelint-disable selector-class-pattern -- MDC internal usage.
+
+@mixin core-styles() {
+  @include _static-styles();
+  @include _theme-styles();
+}
+
+@mixin _static-styles() {
+  .md3-chip-set {
+    display: flex;
+  }
+
+  .md3-chip-set:focus {
+    outline: none;
+  }
+
+  .md3-chip-set__chips {
+    display: flex;
+    flex-flow: wrap;
+    min-width: 0;
+  }
+
+  .md3-chip-set--overflow .md3-chip-set__chips {
+    flex-flow: nowrap;
+  }
+}
+
+@mixin _theme-styles() {
+  .md3-chip-set {
+    @include chip-set-theme.horizontal-space-between-chips(
+      chip-set-theme.$space-between-chips
+    );
+
+    @include chip-set-theme.vertical-space-between-chips(
+      chip-set-theme.$space-between-chips
+    );
+  }
+}

chips/chipset/lib/adapter.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants';
+import {MDCChipAnimation} from '../../chip/lib/constants';
+
+import {MDCChipSetAttributes, MDCChipSetEvents} from './constants';
+
+/**
+ * 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 MDCChipSetAdapter {
+  /** Announces the message via an aria-live region */
+  announceMessage(message: string): void;
+
+  /** Emits the given event with the given detail. */
+  emitEvent<D extends object>(eventName: MDCChipSetEvents, eventDetail: D):
+      void;
+
+  /** Returns the value for the given attribute, if it exists. */
+  getAttribute(attrName: MDCChipSetAttributes): string|null;
+
+  /** Returns the actions provided by the child chip at the given index. */
+  getChipActionsAtIndex(index: number): MDCChipActionType[];
+
+  /** Returns the number of child chips. */
+  getChipCount(): number;
+
+  /** Returns the ID of the chip at the given index. */
+  getChipIdAtIndex(index: number): string;
+
+  /** Returns the index of the child chip with the matching ID. */
+  getChipIndexById(chipID: string): number;
+
+  /** Proxies to the MDCChip#isActionFocusable method. */
+  isChipFocusableAtIndex(index: number, actionType: MDCChipActionType): boolean;
+
+  /** Proxies to the MDCChip#isActionSelectable method. */
+  isChipSelectableAtIndex(index: number, actionType: MDCChipActionType):
+      boolean;
+
+  /** Proxies to the MDCChip#isActionSelected method. */
+  isChipSelectedAtIndex(index: number, actionType: MDCChipActionType): boolean;
+
+  /** Removes the chip at the given index. */
+  removeChipAtIndex(index: number): void;
+
+  /** Proxies to the MDCChip#setActionFocus method. */
+  setChipFocusAtIndex(
+      index: number, action: MDCChipActionType,
+      focus: MDCChipActionFocusBehavior): void;
+
+  /** Proxies to the MDCChip#setActionSelected method. */
+  setChipSelectedAtIndex(
+      index: number, actionType: MDCChipActionType, isSelected: boolean): void;
+
+  /** Starts the chip animation at the given index. */
+  startChipAnimationAtIndex(index: number, animation: MDCChipAnimation): void;
+}

chips/chipset/lib/constants.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * MDCChipSetAttributes provides the named constants for attributes used by the
+ * foundation.
+ */
+export enum MDCChipSetAttributes {
+  ARIA_MULTISELECTABLE = 'aria-multiselectable',
+}
+
+/**
+ * MDCChipSetCssClasses provides the named constants for class names.
+ */
+export enum MDCChipSetCssClasses {
+  CHIP = 'md3-chip',
+}
+
+/**
+ * MDCChipSetEvents provides the constants for emitted events.
+ */
+export enum MDCChipSetEvents {
+  INTERACTION = 'MDCChipSet:interaction',
+  REMOVAL = 'MDCChipSet:removal',
+  SELECTION = 'MDCChipSet:selection',
+}