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

package/mdc-checkbox/_checkbox-theme.scss

@@ -4,6 +4,7 @@
 @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';
@@ -12,15 +13,34 @@
 
 // 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),
-    )
-  );
+@mixin private-checkbox-styles-with-color($color, $mdcColor) {
+  $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-#{$mdcColor}),
+
+    selected-focus-icon-color: $color,
+    selected-hover-icon-color: $color,
+    selected-hover-state-layer-color: $color,
+    selected-icon-color: $color,
+    selected-pressed-icon-color: $color,
+    unselected-focus-icon-color: $color,
+    unselected-hover-icon-color: $color,
+
+    selected-focus-state-layer-color: $on-surface,
+    selected-pressed-state-layer-color: $on-surface,
+    unselected-focus-state-layer-color: $on-surface,
+    unselected-hover-state-layer-color: $on-surface,
+    unselected-pressed-state-layer-color: $on-surface,
+
+    disabled-selected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
+
+    unselected-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
+  ));
 }
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
@@ -47,21 +67,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 +84,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 private-checkbox-styles-with-color($primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include private-checkbox-styles-with-color(secondary);
+        @include private-checkbox-styles-with-color($accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include private-checkbox-styles-with-color(error);
+        @include 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) {

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 */
@@ -206,7 +190,7 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
     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"], ["*"]>;
 }

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

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter, AfterContentInit } from '@angular/core';
+import { EventEmitter, AfterViewInit, OnInit } from '@angular/core';
+import { ActionInteractionEvent } from '@material/chips';
 import { MatChip } from './chip';
 import * as i0 from "@angular/core";
 /** Event object emitted by MatChipOption when selected or deselected. */
@@ -29,7 +30,14 @@ export declare class MatChipSelectionChange {
  * An extension of the MatChip component that supports chip selection.
  * Used with MatChipListbox.
  */
-export declare class MatChipOption extends MatChip implements AfterContentInit {
+export declare class MatChipOption extends MatChip implements OnInit, AfterViewInit {
+    /** Whether the component is done initializing. */
+    private _isInitialized;
+    /**
+     * Selected state that was assigned before the component was initializing
+     * and which needs to be synced back up with the foundation.
+     */
+    private _pendingSelectedState;
     /** Whether the chip list is selectable. */
     chipListSelectable: boolean;
     /** Whether the chip list is in multi-selection mode. */
@@ -53,7 +61,8 @@ export declare class MatChipOption extends MatChip implements AfterContentInit {
     protected basicChipAttrName: string;
     /** Emitted when the chip is selected or deselected. */
     readonly selectionChange: EventEmitter<MatChipSelectionChange>;
-    ngAfterContentInit(): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
     /** Selects the chip. */
     select(): void;
     /** Deselects the chip. */
@@ -62,16 +71,11 @@ export declare class MatChipOption extends MatChip implements AfterContentInit {
     selectViaInteraction(): void;
     /** Toggles the current selected state of this chip. */
     toggleSelected(isUserInput?: boolean): boolean;
-    /** Emits a selection change event. */
-    private _dispatchSelectionChange;
-    /** Allows for programmatic focusing of the chip. */
-    focus(): void;
     /** Resets the state of the chip when it loses focus. */
     _blur(): void;
-    /** Handles click events on the chip. */
-    _click(event: MouseEvent): void;
-    /** Handles custom key presses. */
-    _keydown(event: KeyboardEvent): void;
+    protected _onChipInteraction(event: ActionInteractionEvent): void;
+    _hasLeadingGraphic(): import("@angular/material-experimental/mdc-chips").MatChipAvatar;
+    private _setSelectedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipOption, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, mat-chip-option", never, { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selectable": "selectable"; "selected": "selected"; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
 }