@angular/material 20.0.2 → 20.1.0-next.0

package/button-toggle/_m2-button-toggle.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    button-toggle-focus-state-layer-opacity: 0.12,
-    button-toggle-hover-state-layer-opacity: 0.04,
+    button-toggle-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-toggle-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-toggle-legacy-focus-state-layer-opacity: 1,
     button-toggle-legacy-height: 36px,
     button-toggle-legacy-shape: 2px,
@@ -20,48 +20,34 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
-
-  // By default the theme usually has an rgba color for the dividers, which can
-  // stack up with the background of a button toggle. This can cause the border
-  // of a selected toggle to look different from an unselected one. We use a solid
-  // color to ensure that the border always stays the same.
-  $divider-color: if(
-      meta.type-of($theme-divider-color) == color,
-      theming.private-rgba-to-hex(
-          $theme-divider-color, inspection.get-theme-color($theme, background, card)),
-      $theme-divider-color);
+  $system: m2-utils.get-system($theme);
 
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, background, card),
+    button-toggle-background-color: map.get($system, surface),
     button-toggle-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
     button-toggle-disabled-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, text),
-    button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, card),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-disabled-state-background-color: map.get($system, surface),
     button-toggle-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
-    button-toggle-divider-color: $divider-color,
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-divider-color: map.get($system, outline),
     button-toggle-legacy-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
-    button-toggle-legacy-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, disabled-button-toggle),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-disabled-state-background-color: map.get($system, surface),
     button-toggle-legacy-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     button-toggle-legacy-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-selected-state-text-color: map.get($system, on-surface),
     button-toggle-legacy-state-layer-color:
-        inspection.get-theme-color($theme, background, focused-button),
-    button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-text-color: map.get($system, on-surface),
     button-toggle-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    button-toggle-state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    button-toggle-text-color: inspection.get-theme-color($theme, foreground, text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-state-layer-color: map.get($system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }
 
@@ -103,14 +89,3 @@
     button-toggle-height: map.get($size-scale, $density-scale)
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/card/_m2-card.scss

@@ -1,7 +1,7 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -16,14 +16,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    card-elevated-container-color: inspection.get-theme-color($theme, background, card),
+    card-elevated-container-color: map.get($system, surface),
     card-elevated-container-elevation: elevation.get-box-shadow(1),
-    card-outlined-container-color: inspection.get-theme-color($theme, background, card),
+    card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
-    card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    card-filled-container-color: inspection.get-theme-color($theme, background, card),
+    card-outlined-outline-color: inspection.get-theme-color($theme, system, outline),
+    card-subtitle-text-color: map.get($system, on-surface-variant),
+    card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)
   );
 }
@@ -50,14 +52,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/checkbox/_checkbox-theme.scss

@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-checkbox.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens($theme));
     }
   }
 }
@@ -29,7 +29,8 @@
         map.get(m3-checkbox.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
 
     .mat-mdc-checkbox {
@@ -42,7 +43,7 @@
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-checkbox.get-color-tokens($theme, warn,
+          m2-checkbox.get-color-tokens($theme, error,
               $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }

package/checkbox/_m2-checkbox.scss

@@ -1,68 +1,51 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/m2/theming' as m2-theming;
-@use '../core/m2/palette' as m2-palette;
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
     checkbox-disabled-selected-checkmark-color: #fff,
-    checkbox-selected-focus-state-layer-opacity: 0.16,
-    checkbox-selected-hover-state-layer-opacity: 0.04,
-    checkbox-selected-pressed-state-layer-opacity: 0.16,
-    checkbox-unselected-focus-state-layer-opacity: 0.16,
-    checkbox-unselected-hover-state-layer-opacity: 0.04,
-    checkbox-unselected-pressed-state-layer-opacity: 0.16,
+    checkbox-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-selected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    checkbox-unselected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-unselected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-unselected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
+@function get-color-tokens($theme, $color-variant, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $palette-default: inspection.get-theme-color($theme, $palette-name, default);
-  $disabled-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
-  $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $border-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
-  $active-border-color:
-    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
-  $selected-checkmark-color: null;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (m2-utils.$private-is-internal-build) {
-    $contrast-tone: m2-utils.contrast-tone($palette-selected, $is-dark);
-    $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
-  }
-  @else {
-    $selected-checkmark-color:
-      inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-  }
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   $tokens: (
-    checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    checkbox-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    checkbox-disabled-selected-icon-color: $disabled-color,
-    checkbox-disabled-unselected-icon-color: $disabled-color,
-    checkbox-selected-checkmark-color: $selected-checkmark-color,
-    checkbox-selected-focus-icon-color: $palette-selected,
-    checkbox-selected-hover-icon-color: $palette-selected,
-    checkbox-selected-icon-color: $palette-selected,
-    checkbox-selected-pressed-icon-color: $palette-selected,
-    checkbox-unselected-focus-icon-color: $active-border-color,
-    checkbox-unselected-hover-icon-color: $active-border-color,
-    checkbox-unselected-icon-color: $border-color,
-    checkbox-selected-focus-state-layer-color: $palette-default,
-    checkbox-selected-hover-state-layer-color: $palette-default,
-    checkbox-selected-pressed-state-layer-color: $palette-default,
-    checkbox-unselected-focus-state-layer-color: $foreground-base,
-    checkbox-unselected-hover-state-layer-color: $foreground-base,
+    checkbox-disabled-label-color: $disabled,
+    checkbox-label-text-color: map.get($system, on-surface),
+    checkbox-disabled-selected-icon-color: $disabled,
+    checkbox-disabled-unselected-icon-color: $disabled,
+    checkbox-selected-checkmark-color: map.get($system, on-secondary),
+    checkbox-selected-focus-icon-color: map.get($system, secondary),
+    checkbox-selected-hover-icon-color: map.get($system, secondary),
+    checkbox-selected-icon-color: map.get($system, secondary),
+    checkbox-selected-pressed-icon-color: map.get($system, secondary),
+    checkbox-unselected-focus-icon-color: map.get($system, on-surface),
+    checkbox-unselected-hover-icon-color: map.get($system, on-surface),
+    checkbox-unselected-icon-color: map.get($system, on-surface-variant),
+    checkbox-selected-focus-state-layer-color: map.get($system, secondary),
+    checkbox-selected-hover-state-layer-color: map.get($system, secondary),
+    checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
+    checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
+    checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-pressed-state-layer-color: $foreground-base,
   );
 
@@ -98,14 +81,3 @@
     ), $scale)
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/chips/_chips-theme.scss

@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
     }
   }
 }
@@ -34,15 +34,18 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, primary));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, accent));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, secondary));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, warn));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, error));
         }
       }
     }

package/chips/_m2-chip.scss

@@ -1,25 +1,27 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:color';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
     chip-container-shape-radius: 16px,
     chip-disabled-container-opacity: 0.4,
     chip-disabled-outline-color: transparent,
     chip-flat-selected-outline-width: 0,
     chip-focus-outline-color: transparent,
-    chip-hover-state-layer-opacity: 0.04,
+    chip-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-outline-color: transparent,
     chip-outline-width: 0,
-    chip-selected-hover-state-layer-opacity: 0.04,
+    chip-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-selected-trailing-action-state-layer-color: transparent,
     chip-trailing-action-focus-opacity: 1,
     chip-trailing-action-focus-state-layer-opacity: 0,
@@ -36,20 +38,19 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: null) {
+@function get-color-tokens($theme, $color-variant: null) {
+  $system: m2-utils.get-system($theme);
   $foreground: null;
   $background: null;
   $state-layer-color: inspection.get-theme-color($theme, foreground, base);
-  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
-  $surface: inspection.get-theme-color($theme, background, card);
 
-  @if $palette-name == null {
+  @if $color-variant == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $grey-50: map.get(m2-palette.$grey-palette, 50);
     $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
-    $surface: inspection.get-theme-color($theme, background, card);
+    $surface: map.get($system, surface);
     $background: if(
         meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
         color.mix($state-layer-color, $surface, 12%),
@@ -57,8 +58,10 @@
     );
   }
   @else {
-    $background: inspection.get-theme-color($theme, $palette-name);
-    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+    $background: map.get($system, primary);
+    $foreground: map.get($system, on-primary);
   }
   @return (
     chip-disabled-label-text-color: $foreground,
@@ -67,13 +70,13 @@
     chip-elevated-selected-container-color: $background,
     chip-flat-disabled-selected-container-color: $background,
     chip-focus-state-layer-color: $state-layer-color,
-    chip-focus-state-layer-opacity: $state-layer-opacity,
+    chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     chip-hover-state-layer-color: $state-layer-color,
     chip-label-text-color: $foreground,
     chip-selected-disabled-trailing-icon-color: $foreground,
-    chip-selected-focus-state-layer-color: $state-layer-color,
-    chip-selected-focus-state-layer-opacity: $state-layer-opacity,
-    chip-selected-hover-state-layer-color: $state-layer-color,
+    chip-selected-focus-state-layer-color: map.get($system, focus-state-layer-opacity),
+    chip-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    chip-selected-hover-state-layer-color: map.get($system, hover-state-layer-opacity),
     chip-selected-label-text-color: $foreground,
     chip-selected-trailing-icon-color: $foreground,
     chip-with-icon-disabled-icon-color: $foreground,
@@ -110,14 +113,3 @@
     )
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/chips/index.d.ts

@@ -21,12 +21,15 @@ declare class MatChipAction {
         _handlePrimaryActionInteraction(): void;
         remove(): void;
         disabled: boolean;
+        _edit(): void;
         _isEditing?: boolean;
     };
     /** Whether the action is interactive. */
     isInteractive: boolean;
     /** Whether this is the primary action in the chip. */
     _isPrimary: boolean;
+    /** Whether this is the leading action in the chip. */
+    _isLeading: boolean;
     /** Whether the action is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -71,6 +74,31 @@ declare class MatChipTrailingIcon extends MatChipAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive to edit the parent chip when the leading action icon is clicked or
+ * when the ENTER key is pressed on it.
+ *
+ * Recommended for use with the Material Design "edit" icon
+ * available at https://material.io/icons/#ic_edit.
+ *
+ * Example:
+ *
+ * ```
+ * <mat-chip>
+ *   <button matChipEdit aria-label="Edit">
+ *     <mat-icon>edit</mat-icon>
+ *   </button>
+ * </mat-chip>
+ * ```
+ */
+declare class MatChipEdit extends MatChipAction {
+    _isPrimary: boolean;
+    _isLeading: boolean;
+    _handleClick(event: MouseEvent): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipEdit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipEdit, "[matChipEdit]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
  * when the ENTER key is pressed on it.
@@ -132,6 +160,8 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     protected _allLeadingIcons: QueryList<MatChipAvatar>;
     /** All trailing icons present in the chip. */
     protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
+    /** All edit icons present in the chip. */
+    protected _allEditIcons: QueryList<MatChipEdit>;
     /** All remove icons present in the chip. */
     protected _allRemoveIcons: QueryList<MatChipRemove>;
     _hasFocus(): boolean;
@@ -183,6 +213,8 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     protected basicChipAttrName: string;
     /** The chip's leading icon. */
     leadingIcon: MatChipAvatar;
+    /** The chip's leading edit icon. */
+    editIcon: MatChipEdit;
     /** The chip's trailing icon. */
     trailingIcon: MatChipTrailingIcon;
     /** The chip's trailing remove icon. */
@@ -221,10 +253,12 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     _getActions(): MatChipAction[];
     /** Handles interactions with the primary action of the chip. */
     _handlePrimaryActionInteraction(): void;
+    /** Handles interactions with the edit action of the chip. */
+    _edit(event: Event): void;
     /** Starts the focus monitoring process on the chip. */
     private _monitorFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "editIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allEditIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     static ngAcceptInputType_removable: unknown;
     static ngAcceptInputType_highlighted: unknown;
     static ngAcceptInputType_disableRipple: unknown;
@@ -353,13 +387,25 @@ declare class MatChipRow extends MatChip implements AfterViewInit {
     defaultEditInput?: MatChipEditInput;
     /** The projected chip edit input. */
     contentEditInput?: MatChipEditInput;
+    /**
+     * Set on a mousedown when the chip is already focused via mouse or keyboard.
+     *
+     * This allows us to ensure chip is already focused when deciding whether to enter the
+     * edit mode on a subsequent click. Otherwise, the chip appears focused when handling the
+     * first click event.
+     */
+    private _alreadyFocused;
     _isEditing: boolean;
     constructor(...args: unknown[]);
+    ngAfterViewInit(): void;
+    protected _hasLeadingActionIcon(): boolean;
     _hasTrailingIcon(): boolean;
     /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
     _handleFocus(): void;
     _handleKeydown(event: KeyboardEvent): void;
+    _handleClick(event: MouseEvent): void;
     _handleDoubleclick(event: MouseEvent): void;
+    _edit(): void;
     private _startEditing;
     private _onEditFinish;
     _isRippleDisabled(): boolean;
@@ -369,7 +415,7 @@ declare class MatChipRow extends MatChip implements AfterViewInit {
      */
     private _getEditInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["[matChipEdit]", "mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
 }
 
 /**
@@ -888,7 +934,7 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
 
 declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
 }
 
@@ -915,6 +961,12 @@ declare const MAT_CHIP_AVATAR: InjectionToken<unknown>;
  * retention of the class and its directive metadata.
  */
 declare const MAT_CHIP_TRAILING_ICON: InjectionToken<unknown>;
+/**
+ * Injection token that can be used to reference instances of `MatChipEdit`. It serves as
+ * alternative token to the actual `MatChipEdit` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+declare const MAT_CHIP_EDIT: InjectionToken<unknown>;
 /**
  * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
  * alternative token to the actual `MatChipRemove` class which could cause unnecessary
@@ -926,5 +978,5 @@ declare const MAT_CHIP_REMOVE: InjectionToken<unknown>;
  */
 declare const MAT_CHIP: InjectionToken<unknown>;
 
-export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
+export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_EDIT, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEdit, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
 export type { MatChipEditedEvent, MatChipEvent, MatChipInputEvent, MatChipTextControl, MatChipsDefaultOptions };

package/chips/testing/index.d.ts

@@ -31,6 +31,8 @@ interface ChipRowHarnessFilters extends ChipHarnessFilters {
 }
 interface ChipSetHarnessFilters extends BaseHarnessFilters {
 }
+interface ChipEditHarnessFilters extends BaseHarnessFilters {
+}
 interface ChipRemoveHarnessFilters extends BaseHarnessFilters {
 }
 interface ChipAvatarHarnessFilters extends BaseHarnessFilters {
@@ -50,6 +52,20 @@ declare class MatChipAvatarHarness extends ComponentHarness {
     static with<T extends MatChipAvatarHarness>(this: ComponentHarnessConstructor<T>, options?: ChipAvatarHarnessFilters): HarnessPredicate<T>;
 }
 
+/** Harness for interacting with a standard Material chip edit button in tests. */
+declare class MatChipEditHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a chip edit with specific
+     * attributes.
+     * @param options Options for filtering which input instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatChipEditHarness>(this: ComponentHarnessConstructor<T>, options?: ChipEditHarnessFilters): HarnessPredicate<T>;
+    /** Clicks the edit button. */
+    click(): Promise<void>;
+}
+
 /** Harness for interacting with a standard Material chip remove button in tests. */
 declare class MatChipRemoveHarness extends ComponentHarness {
     static hostSelector: string;
@@ -80,6 +96,11 @@ declare class MatChipHarness extends ContentContainerComponentHarness {
     isDisabled(): Promise<boolean>;
     /** Delete a chip from the set. */
     remove(): Promise<void>;
+    /**
+     * Gets the edit button inside of a chip.
+     * @param filter Optionally filters which chips are included.
+     */
+    geEditButton(filter?: ChipEditHarnessFilters): Promise<MatChipEditHarness>;
     /**
      * Gets the remove button inside of a chip.
      * @param filter Optionally filters which chips are included.
@@ -245,5 +266,5 @@ declare class MatChipSetHarness extends ComponentHarness {
     getChips(filter?: ChipHarnessFilters): Promise<MatChipHarness[]>;
 }
 
-export { MatChipAvatarHarness, MatChipEditInputHarness, MatChipGridHarness, MatChipHarness, MatChipInputHarness, MatChipListboxHarness, MatChipOptionHarness, MatChipRemoveHarness, MatChipRowHarness, MatChipSetHarness };
-export type { ChipAvatarHarnessFilters, ChipEditInputHarnessFilters, ChipGridHarnessFilters, ChipHarnessFilters, ChipInputHarnessFilters, ChipListboxHarnessFilters, ChipOptionHarnessFilters, ChipRemoveHarnessFilters, ChipRowHarnessFilters, ChipSetHarnessFilters };
+export { MatChipAvatarHarness, MatChipEditHarness, MatChipEditInputHarness, MatChipGridHarness, MatChipHarness, MatChipInputHarness, MatChipListboxHarness, MatChipOptionHarness, MatChipRemoveHarness, MatChipRowHarness, MatChipSetHarness };
+export type { ChipAvatarHarnessFilters, ChipEditHarnessFilters, ChipEditInputHarnessFilters, ChipGridHarnessFilters, ChipHarnessFilters, ChipInputHarnessFilters, ChipListboxHarnessFilters, ChipOptionHarnessFilters, ChipRemoveHarnessFilters, ChipRowHarnessFilters, ChipSetHarnessFilters };