@angular/material-experimental 13.2.0-next.0 → 13.2.1

package/mdc-checkbox/_checkbox-private.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+// Configuration used to define the theme-related CSS variables.
+$private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
+  // Exclude all of the ripple-related styles.
+  selected-focus-state-layer-color: null,
+  selected-focus-state-layer-opacity: null,
+  selected-hover-state-layer-color: null,
+  selected-hover-state-layer-opacity: null,
+  selected-pressed-state-layer-color: null,
+  selected-pressed-state-layer-opacity: null,
+  unselected-focus-state-layer-color: null,
+  unselected-focus-state-layer-opacity: null,
+  unselected-hover-state-layer-color: null,
+  unselected-hover-state-layer-opacity: null,
+  unselected-pressed-state-layer-color: null,
+  unselected-pressed-state-layer-opacity: null,
+));
+
+// Mixin that includes the checkbox theme styles with a given palette.
+// By default, the MDC checkbox always uses the `secondary` palette.
+@mixin private-checkbox-styles-with-color($color, $mdc-color) {
+  $on-surface: mdc-theme-color.prop-value(on-surface);
+  $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
+  $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
+
+  @include mdc-checkbox-theme.theme((
+    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
+
+    selected-focus-icon-color: $color,
+    selected-hover-icon-color: $color,
+    selected-icon-color: $color,
+    selected-pressed-icon-color: $color,
+    unselected-focus-icon-color: $color,
+    unselected-hover-icon-color: $color,
+
+    disabled-selected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
+
+    unselected-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
+  ));
+}

package/mdc-checkbox/_checkbox-theme.scss

@@ -4,33 +4,21 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme';
 @use 'sass:map';
+@use 'sass:color';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
 @use '../../material/core/ripple/ripple-theme';
-
-
-// Mixin that includes the checkbox theme styles with a given palette.
-// By default, the MDC checkbox always uses the `secondary` palette.
-@mixin private-checkbox-styles-with-color($color) {
-  @include mdc-checkbox-theme.theme-deprecated(
-    (
-      checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
-      container-checked-color: $color,
-      container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
-      outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
-    )
-  );
-}
+@use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
 // checkbox is selected.
-@mixin _selected-ripple-colors($theme, $mdcColor) {
+@mixin _selected-ripple-colors($theme, $mdc-color) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
       @include ripple-theme.color((
           foreground: (
-              base: mdc-theme-color.prop-value($mdcColor)
+              base: mdc-theme-color.prop-value($mdc-color)
           ),
       ));
     }
@@ -47,21 +35,7 @@
   $accent: theming.get-color-from-palette(map.get($config, accent));
   $warn: theming.get-color-from-palette(map.get($config, warn));
 
-  // Save original values of MDC global variables. We need to save these so we can restore the
-  // variables to their original values and prevent unintended side effects from using this mixin.
-  $orig-border-color: mdc-checkbox-theme.$border-color;
-  $orig-disabled-color: mdc-checkbox-theme.$disabled-color;
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    mdc-checkbox-theme.$border-color: rgba(
-      mdc-theme-color.prop-value(on-surface),
-      0.54
-    );
-    mdc-checkbox-theme.$disabled-color: rgba(
-      mdc-theme-color.prop-value(on-surface),
-      0.26
-    );
-
     .mat-mdc-checkbox {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include ripple-theme.color((
@@ -78,25 +52,21 @@
       // class for accent and warn style, and applying the appropriate overrides below. Since we
       // don't use MDC's ripple, we also need to set the color for our replacement ripple.
       &.mat-primary {
-        @include private-checkbox-styles-with-color(primary);
+        @include checkbox-private.private-checkbox-styles-with-color($primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include private-checkbox-styles-with-color(secondary);
+        @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include private-checkbox-styles-with-color(error);
+        @include checkbox-private.private-checkbox-styles-with-color($warn, error);
         @include _selected-ripple-colors($warn, error);
       }
     }
   }
-
-  // Restore original values of MDC global variables.
-  mdc-checkbox-theme.$border-color: $orig-border-color;
-  mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
 }
 
 @mixin typography($config-or-theme) {
@@ -110,16 +80,19 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  .mat-mdc-checkbox .mdc-checkbox {
-    @include mdc-checkbox-theme.density(
-      $density-scale,
-      $query: mdc-helpers.$mat-base-styles-query
-    );
-  }
 
-  @if ($density-scale == -2 or $density-scale == 'minimum') {
-    .mat-mdc-checkbox-touch-target {
-      display: none;
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-checkbox .mdc-checkbox {
+      @include mdc-checkbox-theme.density(
+        $density-scale,
+        $query: mdc-helpers.$mat-base-styles-query
+      );
+    }
+
+    @if ($density-scale == -2 or $density-scale == 'minimum') {
+      .mat-mdc-checkbox-touch-target {
+        display: none;
+      }
     }
   }
 }

package/mdc-checkbox/checkbox.d.ts

@@ -87,10 +87,6 @@ export declare class MatCheckbox extends _MatCheckboxBase implements AfterViewIn
     get inputId(): string;
     /** The `MDCCheckboxFoundation` instance for this checkbox. */
     _checkboxFoundation: MDCCheckboxFoundation;
-    /** The set of classes that should be applied to the native input. */
-    _classes: {
-        [key: string]: boolean;
-    };
     /** ControlValueAccessor onChange */
     private _cvaOnChange;
     /** ControlValueAccessor onTouch */
@@ -144,8 +140,6 @@ export declare class MatCheckbox extends _MatCheckboxBase implements AfterViewIn
     _onClick(): void;
     /** Gets the value for the `aria-checked` attribute of the native input. */
     _getAriaChecked(): 'true' | 'false' | 'mixed';
-    /** Sets whether the given CSS class should be applied to the native input. */
-    private _setClass;
     /**
      * Syncs the indeterminate value with the checkbox DOM node.
      *

package/mdc-checkbox/module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./checkbox";
 import * as i2 from "@angular/material-experimental/mdc-core";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/checkbox";
+import * as i3 from "@angular/material/checkbox";
 export declare class MatCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i1.MatCheckbox], [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof i3.CommonModule, typeof i4._MatCheckboxRequiredValidatorModule], [typeof i1.MatCheckbox, typeof i2.MatCommonModule, typeof i4._MatCheckboxRequiredValidatorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i1.MatCheckbox], [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof i3._MatCheckboxRequiredValidatorModule], [typeof i1.MatCheckbox, typeof i2.MatCommonModule, typeof i3._MatCheckboxRequiredValidatorModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }

package/mdc-chips/_chips-theme.scss

@@ -1,93 +1,93 @@
-@use '@material/chips/deprecated' as mdc-chips;
+@use '@material/chips/chip' as mdc-chip;
+@use '@material/chips/chip-theme' as mdc-chip-theme;
+@use '@material/chips/chip-set' as mdc-chip-set;
 @use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/color-palette' as mdc-color-palette;
 @use 'sass:color';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
 
-@mixin _selected-color($color) {
-  @include mdc-chips.fill-color($color, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chips.ink-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chips.selected-ink-color-without-ripple_(
-                  text-primary-on-dark,
-                  $query: mdc-helpers.$mat-theme-styles-query
-  );
-  @include mdc-chips.leading-icon-color(text-primary-on-dark,
-    $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chips.trailing-icon-color(text-primary-on-dark,
-    $query: mdc-helpers.$mat-theme-styles-query);
+// Customizes the appearance of a chip. Note that ideally we would be doing this using the
+// `theme-styles` mixin, however it has the following problems:
+// 1. Some of MDC's base styles have **very** high specificity. E.g. setting the background of a
+// non-selected, enabled chip uses a selector like `.chip:not(.selected):not(.disabled)` instead of
+// just `.chip`. This specificity increase has a ripple effect over all other components that are
+// built on top of ours, making overrides extremely difficult and brittle.
+// 2. Including the individual mixins allows us to avoid a lot of unnecessary CSS (~35kb in the
+// dev app theme).
+@mixin _chip-variant($background, $foreground) {
+  @include mdc-chip-theme.container-color($background);
+  @include mdc-chip-theme.icon-color($foreground);
+  @include mdc-chip-theme.trailing-action-color($foreground);
+  @include mdc-chip-theme.checkmark-color($foreground);
+  @include mdc-chip-theme.text-label-color($foreground);
+
+  // Technically the avatar is only supposed to have an image, but we also allow for icons.
+  // Set the color so the icons inherit the correct color.
+  .mat-mdc-chip-avatar {
+    color: $foreground;
+  }
+}
+
+@mixin _colored-chip($palette) {
+  $background: theming.get-color-from-palette($palette);
+  $foreground: theming.get-color-from-palette($palette, default-contrast);
+
+  &.mat-mdc-chip-selected,
+  &.mat-mdc-chip-highlighted {
+    @include _chip-variant($background, $foreground);
+  }
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
-  $background: map.get($config, background);
-  $unselected-background: theming.get-color-from-palette($background, unselected-chip);
-
-  // Save original values of MDC global variables. We need to save these so we can restore the
-  // variables to their original values and prevent unintended side effects from using this mixin.
-  $orig-mdc-chips-fill-color-default: mdc-chips.$fill-color-default;
-  $orig-mdc-chips-ink-color-default: mdc-chips.$ink-color-default;
-  $orig-mdc-chips-icon-color: mdc-chips.$icon-color;
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $foreground: map.get($config, foreground);
+  $is-dark: map.get($config, is-dark);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    mdc-chips.$fill-color-default:
-        color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%);
-    mdc-chips.$ink-color-default: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-chips.$icon-color: mdc-theme-color.prop-value(on-surface);
-
-    @include mdc-chips.set-core-styles($query: mdc-helpers.$mat-theme-styles-query);
-    @include mdc-chips.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    .mat-mdc-standard-chip {
+      @include _chip-variant(
+        color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%),
+        if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
+      );
 
-    .mat-mdc-chip {
-      @include mdc-chips.fill-color-accessible($unselected-background,
-        $query: mdc-helpers.$mat-theme-styles-query);
-
-      // mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the
-      // opacity so selected chips always show a ripple.
-      // Include the same mixins but use mdc-chip-selected-ink-color-without-ripple
       &.mat-primary {
-        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include _selected-color($primary);
-        }
+        @include _colored-chip($primary);
       }
 
       &.mat-accent {
-        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include _selected-color($accent);
-        }
+        @include _colored-chip($accent);
       }
 
       &.mat-warn {
-        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include _selected-color($warn);
-        }
+        @include _colored-chip($warn);
       }
     }
   }
 
-  // Restore original values of MDC global variables.
-  mdc-chips.$fill-color-default: $orig-mdc-chips-fill-color-default;
-  mdc-chips.$ink-color-default: $orig-mdc-chips-ink-color-default;
-  mdc-chips.$icon-color: $orig-mdc-chips-icon-color;
+  .mat-mdc-chip-focus-overlay {
+    background: map.get($foreground, base);
+  }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-chips.set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+  @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chips.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-chip {
-    @include mdc-chips.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { MDCChipActionAdapter, MDCChipActionFoundation } from '@material/chips';
+import { CanDisable, HasTabIndex } from '@angular/material-experimental/mdc-core';
+import * as i0 from "@angular/core";
+declare const _MatChipActionMixinBase: import("@angular/material-experimental/mdc-core")._Constructor<HasTabIndex> & import("@angular/material-experimental/mdc-core")._AbstractConstructor<HasTabIndex> & import("@angular/material-experimental/mdc-core")._Constructor<CanDisable> & import("@angular/material-experimental/mdc-core")._AbstractConstructor<CanDisable> & {
+    new (): {};
+};
+/**
+ * Interactive element within a chip.
+ * @docs-private
+ */
+export declare class MatChipAction extends _MatChipActionMixinBase implements AfterViewInit, OnDestroy, CanDisable, HasTabIndex, OnChanges {
+    _elementRef: ElementRef;
+    private _changeDetectorRef;
+    private _document;
+    private _foundation;
+    private _adapter;
+    /** Whether the action is interactive. */
+    isInteractive: boolean;
+    _handleClick(_event: MouseEvent): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    protected _createFoundation(adapter: MDCChipActionAdapter): MDCChipActionFoundation;
+    constructor(_elementRef: ElementRef, _document: any, _changeDetectorRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    focus(): void;
+    _getFoundation(): MDCChipActionFoundation;
+    _updateTabindex(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; "isInteractive": "isInteractive"; }, {}, never>;
+}
+export {};

package/mdc-chips/chip-grid.d.ts

@@ -5,18 +5,17 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material-experimental/mdc-core';
 import { MatFormFieldControl } from '@angular/material-experimental/mdc-form-field';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { MatChipTextControl } from './chip-text-control';
 import { Observable } from 'rxjs';
 import { MatChipEvent } from './chip';
 import { MatChipRow } from './chip-row';
 import { MatChipSet } from './chip-set';
-import { GridFocusKeyManager } from './grid-focus-key-manager';
 import * as i0 from "@angular/core";
 /** Change event object that is emitted when the chip grid value has changed. */
 export declare class MatChipGridChange {
@@ -40,7 +39,7 @@ declare class MatChipGridBase extends MatChipSet {
     _parentFormGroup: FormGroupDirective;
     /** @docs-private */
     ngControl: NgControl;
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, 
+    constructor(liveAnnouncer: LiveAnnouncer, document: any, elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, 
     /** @docs-private */
     ngControl: NgControl);
 }
@@ -55,10 +54,6 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * @docs-private
      */
     readonly controlType: string;
-    /** Subscription to focus changes in the chips. */
-    private _chipFocusSubscription;
-    /** Subscription to blur changes in the chips. */
-    private _chipBlurSubscription;
     /** The chip input to add more chips */
     protected _chipInput: MatChipTextControl;
     /**
@@ -71,8 +66,6 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * @docs-private
      */
     _onChange: (value: any) => void;
-    /** The GridFocusKeyManager which handles focus. */
-    _keyManager: GridFocusKeyManager;
     /**
      * Implemented as part of MatFormFieldControl.
      * @docs-private
@@ -134,7 +127,7 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      */
     readonly valueChange: EventEmitter<any>;
     _chips: QueryList<MatChipRow>;
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
+    constructor(liveAnnouncer: LiveAnnouncer, document: any, elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
@@ -183,19 +176,10 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * user to tab out of it. This prevents the grid from capturing focus and redirecting
      * it back to the first chip, creating a focus trap, if it user tries to tab away.
      */
-    _allowFocusEscape(): void;
+    protected _allowFocusEscape(): void;
     /** Handles custom keyboard events. */
     _keydown(event: KeyboardEvent): void;
-    /** Unsubscribes from all chip events. */
-    protected _dropSubscriptions(): void;
-    /** Subscribes to events on the child chips. */
-    protected _subscribeToChipEvents(): void;
-    /** Initializes the key manager to manage focus. */
-    private _initKeyManager;
-    /** Subscribes to chip focus events. */
-    private _listenToChipsFocus;
-    /** Subscribes to chip blur events. */
-    private _listenToChipsBlur;
+    _focusLastChip(): void;
     /** Emits change event to set the model value. */
     private _propagateChanges;
     /** Mark the field as touched */
@@ -204,9 +188,7 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * If the amount of chips changed, we need to focus the next closest chip.
      */
     private _updateFocusForDestroyedChips;
-    /** Focus input element. */
-    private _focusInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, null, null, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "tabIndex": "tabIndex"; "disabled": "disabled"; "placeholder": "placeholder"; "required": "required"; "value": "value"; "errorStateMatcher": "errorStateMatcher"; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"]>;
 }
 export {};

package/mdc-chips/chip-icons.d.ts

@@ -5,9 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy } from '@angular/core';
-import { CanDisable, HasTabIndex } from '@angular/material-experimental/mdc-core';
-import { Subject } from 'rxjs';
+import { InjectionToken } from '@angular/core';
+import { MDCChipActionAdapter, MDCChipTrailingActionFoundation } from '@material/chips';
+import { MatChipAction } from './chip-action';
 import * as i0 from "@angular/core";
 /**
  * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
@@ -20,11 +20,6 @@ export declare const MAT_CHIP_AVATAR: InjectionToken<MatChipAvatar>;
  * @docs-private
  */
 export declare class MatChipAvatar {
-    private _changeDetectorRef;
-    private _elementRef;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
-    /** Sets whether the given CSS class should be applied to the leading icon. */
-    setClass(cssClass: string, active: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAvatar, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never>;
 }
@@ -38,16 +33,13 @@ export declare const MAT_CHIP_TRAILING_ICON: InjectionToken<MatChipTrailingIcon>
  * Directive to add CSS classes to and configure attributes for chip trailing icon.
  * @docs-private
  */
-export declare class MatChipTrailingIcon implements OnDestroy {
-    _elementRef: ElementRef;
-    private _foundation;
-    private _adapter;
-    constructor(_elementRef: ElementRef);
-    ngOnDestroy(): void;
-    focus(): void;
-    /** Sets an attribute on the icon. */
-    setAttribute(name: string, value: string): void;
-    isNavigable(): boolean;
+export declare class MatChipTrailingIcon extends MatChipAction {
+    /**
+     * MDC considers all trailing actions as a remove icon,
+     * but we support non-interactive trailing icons.
+     */
+    isInteractive: boolean;
+    protected _createFoundation(adapter: MDCChipActionAdapter): MDCChipTrailingActionFoundation;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never>;
 }
@@ -57,14 +49,6 @@ export declare class MatChipTrailingIcon implements OnDestroy {
  * retention of the class and its directive metadata.
  */
 export declare const MAT_CHIP_REMOVE: InjectionToken<MatChipRemove>;
-/**
- * Boilerplate for applying mixins to MatChipRemove.
- * @docs-private
- */
-declare class MatChipRemoveBase extends MatChipTrailingIcon {
-    constructor(elementRef: ElementRef);
-}
-declare const _MatChipRemoveMixinBase: import("@angular/material-experimental/mdc-core")._Constructor<HasTabIndex> & import("@angular/material-experimental/mdc-core")._AbstractConstructor<HasTabIndex> & import("@angular/material-experimental/mdc-core")._Constructor<CanDisable> & import("@angular/material-experimental/mdc-core")._AbstractConstructor<CanDisable> & typeof MatChipRemoveBase;
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
  * when the ENTER key is pressed on it.
@@ -80,17 +64,10 @@ declare const _MatChipRemoveMixinBase: import("@angular/material-experimental/md
  * </mat-chip>
  * ```
  */
-export declare class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex {
-    /**
-     * Emits when the user interacts with the icon.
-     * @docs-private
-     */
-    readonly interaction: Subject<MouseEvent | KeyboardEvent>;
-    constructor(elementRef: ElementRef);
-    /** Emits a MouseEvent when the user clicks on the remove icon. */
+export declare class MatChipRemove extends MatChipAction {
+    protected _createFoundation(adapter: MDCChipActionAdapter): MDCChipTrailingActionFoundation;
     _handleClick(event: MouseEvent): void;
-    focus(): void;
+    _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRemove, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipRemove, "[matChipRemove]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipRemove, "[matChipRemove]", never, {}, {}, never>;
 }
-export {};

package/mdc-chips/chip-listbox.d.ts

@@ -5,13 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, QueryList } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
-import { MatChip, MatChipEvent } from './chip';
+import { MatChipEvent } from './chip';
 import { MatChipOption, MatChipSelectionChange } from './chip-option';
 import { MatChipSet } from './chip-set';
 import * as i0 from "@angular/core";
@@ -37,15 +35,7 @@ export declare const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any;
  * An extension of the MatChipSet component that supports chip selection.
  * Used with MatChipOption chips.
  */
-export declare class MatChipListbox extends MatChipSet implements AfterContentInit, ControlValueAccessor {
-    /** Subscription to selection changes in the chips. */
-    private _chipSelectionSubscription;
-    /** Subscription to blur changes in the chips. */
-    private _chipBlurSubscription;
-    /** Subscription to focus changes in the chips. */
-    private _chipFocusSubscription;
-    /** The FocusKeyManager which handles focus. */
-    _keyManager: FocusKeyManager<MatChip>;
+export declare class MatChipListbox extends MatChipSet implements AfterContentInit, OnDestroy, ControlValueAccessor {
     /**
      * Function when touched. Set as part of ControlValueAccessor implementation.
      * @docs-private
@@ -100,7 +90,6 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
     /** Event emitted when the selected chip listbox value has been changed by the user. */
     readonly change: EventEmitter<MatChipListboxChange>;
     _chips: QueryList<MatChipOption>;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _dir: Directionality);
     ngAfterContentInit(): void;
     /**
      * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
@@ -129,19 +118,8 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
     setDisabledState(isDisabled: boolean): void;
     /** Selects all chips with value. */
     _setSelectionByValue(value: any, isUserInput?: boolean): void;
-    /** Selects or deselects a chip by id. */
-    _setSelected(index: number, selected: boolean): void;
     /** When blurred, marks the field as touched when focus moved outside the chip listbox. */
     _blur(): void;
-    /**
-     * Removes the `tabindex` from the chip listbox and resets it back afterwards, allowing the
-     * user to tab out of it. This prevents the listbox from capturing focus and redirecting
-     * it back to the first chip, creating a focus trap, if it user tries to tab away.
-     */
-    _allowFocusEscape(): void;
-    /**
-     * Handles custom keyboard shortcuts, and passes other keyboard events to the keyboard manager.
-     */
     _keydown(event: KeyboardEvent): void;
     /** Marks the field as touched */
     private _markAsTouched;
@@ -163,27 +141,13 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
     private _selectValue;
     /** Syncs the chip-listbox selection state with the individual chips. */
     private _syncListboxProperties;
-    /** Sets the mdc classes for single vs multi selection. */
-    private _updateMdcSelectionClasses;
-    /** Initializes the key manager to manage focus. */
-    private _initKeyManager;
     /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
     private _getFirstSelectedChip;
-    /** Unsubscribes from all chip events. */
-    protected _dropSubscriptions(): void;
-    /** Subscribes to events on the child chips. */
-    protected _subscribeToChipEvents(): void;
-    /** Subscribes to chip focus events. */
-    private _listenToChipsFocus;
-    /** Subscribes to chip blur events. */
-    private _listenToChipsBlur;
-    /** Subscribes to selection changes in the option chips. */
-    private _listenToChipsSelection;
     /**
      * If the amount of chips changed, we need to update the
      * key manager state and focus the next closest chip.
      */
     private _updateFocusForDestroyedChips;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "tabIndex": "tabIndex"; "multiple": "multiple"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "compareWith": "compareWith"; "required": "required"; "value": "value"; }, { "change": "change"; }, ["_chips"], ["*"]>;
 }