refactor(material-experimental/mdc-chips): switch to import deprecated from @material/chips

package.json

@@ -63,6 +63,7 @@
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
+    "material-components-web": "11.0.0-canary.67d780c79.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
@@ -91,53 +92,53 @@
     "@bazel/terser": "3.2.2",
     "@bazel/typescript": "3.2.1",
     "@firebase/app-types": "^0.6.1",
-    "@material/animation": "`11.0.0-canary.f8579b7ea.0`",
-    "@material/auto-init": "11.0.0-canary.f8579b7ea.0",
-    "@material/banner": "11.0.0-canary.f8579b7ea.0",
-    "@material/base": "11.0.0-canary.f8579b7ea.0",
-    "@material/button": "11.0.0-canary.f8579b7ea.0",
-    "@material/card": "11.0.0-canary.f8579b7ea.0",
-    "@material/checkbox": "11.0.0-canary.f8579b7ea.0",
-    "@material/chips": "11.0.0-canary.f8579b7ea.0",
-    "@material/circular-progress": "11.0.0-canary.f8579b7ea.0",
-    "@material/data-table": "11.0.0-canary.f8579b7ea.0",
-    "@material/density": "11.0.0-canary.f8579b7ea.0",
-    "@material/dialog": "11.0.0-canary.f8579b7ea.0",
-    "@material/dom": "11.0.0-canary.f8579b7ea.0",
-    "@material/drawer": "11.0.0-canary.f8579b7ea.0",
-    "@material/elevation": "11.0.0-canary.f8579b7ea.0",
-    "@material/fab": "11.0.0-canary.f8579b7ea.0",
-    "@material/feature-targeting": "11.0.0-canary.f8579b7ea.0",
-    "@material/floating-label": "11.0.0-canary.f8579b7ea.0",
-    "@material/form-field": "11.0.0-canary.f8579b7ea.0",
-    "@material/icon-button": "11.0.0-canary.f8579b7ea.0",
-    "@material/image-list": "11.0.0-canary.f8579b7ea.0",
-    "@material/layout-grid": "11.0.0-canary.f8579b7ea.0",
-    "@material/line-ripple": "11.0.0-canary.f8579b7ea.0",
-    "@material/linear-progress": "11.0.0-canary.f8579b7ea.0",
-    "@material/list": "11.0.0-canary.f8579b7ea.0",
-    "@material/menu": "11.0.0-canary.f8579b7ea.0",
-    "@material/menu-surface": "11.0.0-canary.f8579b7ea.0",
-    "@material/notched-outline": "11.0.0-canary.f8579b7ea.0",
-    "@material/radio": "11.0.0-canary.f8579b7ea.0",
-    "@material/ripple": "11.0.0-canary.f8579b7ea.0",
-    "@material/rtl": "11.0.0-canary.f8579b7ea.0",
-    "@material/segmented-button": "11.0.0-canary.f8579b7ea.0",
-    "@material/select": "11.0.0-canary.f8579b7ea.0",
-    "@material/shape": "11.0.0-canary.f8579b7ea.0",
-    "@material/slider": "11.0.0-canary.f8579b7ea.0",
-    "@material/snackbar": "11.0.0-canary.f8579b7ea.0",
-    "@material/switch": "11.0.0-canary.f8579b7ea.0",
-    "@material/tab": "11.0.0-canary.f8579b7ea.0",
-    "@material/tab-bar": "11.0.0-canary.f8579b7ea.0",
-    "@material/tab-indicator": "11.0.0-canary.f8579b7ea.0",
-    "@material/tab-scroller": "11.0.0-canary.f8579b7ea.0",
-    "@material/textfield": "11.0.0-canary.f8579b7ea.0",
-    "@material/theme": "11.0.0-canary.f8579b7ea.0",
-    "@material/tooltip": "11.0.0-canary.f8579b7ea.0",
-    "@material/top-app-bar": "11.0.0-canary.f8579b7ea.0",
-    "@material/touch-target": "11.0.0-canary.f8579b7ea.0",
-    "@material/typography": "11.0.0-canary.f8579b7ea.0",
+    "@material/animation": "11.0.0-canary.67d780c79.0",
+    "@material/auto-init": "11.0.0-canary.67d780c79.0",
+    "@material/banner": "11.0.0-canary.67d780c79.0",
+    "@material/base": "11.0.0-canary.67d780c79.0",
+    "@material/button": "11.0.0-canary.67d780c79.0",
+    "@material/card": "11.0.0-canary.67d780c79.0",
+    "@material/checkbox": "11.0.0-canary.67d780c79.0",
+    "@material/chips": "11.0.0-canary.67d780c79.0",
+    "@material/circular-progress": "11.0.0-canary.67d780c79.0",
+    "@material/data-table": "11.0.0-canary.67d780c79.0",
+    "@material/density": "11.0.0-canary.67d780c79.0",
+    "@material/dialog": "11.0.0-canary.67d780c79.0",
+    "@material/dom": "11.0.0-canary.67d780c79.0",
+    "@material/drawer": "11.0.0-canary.67d780c79.0",
+    "@material/elevation": "11.0.0-canary.67d780c79.0",
+    "@material/fab": "11.0.0-canary.67d780c79.0",
+    "@material/feature-targeting": "11.0.0-canary.67d780c79.0",
+    "@material/floating-label": "11.0.0-canary.67d780c79.0",
+    "@material/form-field": "11.0.0-canary.67d780c79.0",
+    "@material/icon-button": "11.0.0-canary.67d780c79.0",
+    "@material/image-list": "11.0.0-canary.67d780c79.0",
+    "@material/layout-grid": "11.0.0-canary.67d780c79.0",
+    "@material/line-ripple": "11.0.0-canary.67d780c79.0",
+    "@material/linear-progress": "11.0.0-canary.67d780c79.0",
+    "@material/list": "11.0.0-canary.67d780c79.0",
+    "@material/menu": "11.0.0-canary.67d780c79.0",
+    "@material/menu-surface": "11.0.0-canary.67d780c79.0",
+    "@material/notched-outline": "11.0.0-canary.67d780c79.0",
+    "@material/radio": "11.0.0-canary.67d780c79.0",
+    "@material/ripple": "11.0.0-canary.67d780c79.0",
+    "@material/rtl": "11.0.0-canary.67d780c79.0",
+    "@material/segmented-button": "11.0.0-canary.67d780c79.0",
+    "@material/select": "11.0.0-canary.67d780c79.0",
+    "@material/shape": "11.0.0-canary.67d780c79.0",
+    "@material/slider": "11.0.0-canary.67d780c79.0",
+    "@material/snackbar": "11.0.0-canary.67d780c79.0",
+    "@material/switch": "11.0.0-canary.67d780c79.0",
+    "@material/tab": "11.0.0-canary.67d780c79.0",
+    "@material/tab-bar": "11.0.0-canary.67d780c79.0",
+    "@material/tab-indicator": "11.0.0-canary.67d780c79.0",
+    "@material/tab-scroller": "11.0.0-canary.67d780c79.0",
+    "@material/textfield": "11.0.0-canary.67d780c79.0",
+    "@material/theme": "11.0.0-canary.67d780c79.0",
+    "@material/tooltip": "11.0.0-canary.67d780c79.0",
+    "@material/top-app-bar": "11.0.0-canary.67d780c79.0",
+    "@material/touch-target": "11.0.0-canary.67d780c79.0",
+    "@material/typography": "11.0.0-canary.67d780c79.0",
     "@octokit/rest": "18.3.5",
     "@schematics/angular": "^12.0.0-next.0",
     "@types/autoprefixer": "^9.7.2",
@@ -189,7 +190,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "madge": "^4.0.0",
     "marked": "^2.0.0",
-    "material-components-web": "11.0.0-canary.f8579b7ea.0",
     "merge2": "^1.2.3",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",

src/material-experimental/mdc-chips/chip-icons.ts

@@ -16,10 +16,9 @@ import {
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material-experimental/mdc-core';
-import {MDCChipTrailingActionAdapter, MDCChipTrailingActionFoundation} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {Subject} from 'rxjs';
 
-
 /**
  * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
  * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
@@ -73,8 +72,8 @@ export const MAT_CHIP_TRAILING_ICON =
   providers: [{provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon}],
 })
 export class MatChipTrailingIcon implements OnDestroy {
-  private _foundation: MDCChipTrailingActionFoundation;
-  private _adapter: MDCChipTrailingActionAdapter = {
+  private _foundation: deprecated.MDCChipTrailingActionFoundation;
+  private _adapter: deprecated.MDCChipTrailingActionAdapter = {
     focus: () => this._elementRef.nativeElement.focus(),
     getAttribute: (name: string) =>
         this._elementRef.nativeElement.getAttribute(name),
@@ -106,7 +105,7 @@ export class MatChipTrailingIcon implements OnDestroy {
       // method is removed, we can't use the chip here, because it causes a
       // circular import. private _chip: MatChip
   ) {
-    this._foundation = new MDCChipTrailingActionFoundation(this._adapter);
+    this._foundation = new deprecated.MDCChipTrailingActionFoundation(this._adapter);
   }
 
   ngOnDestroy() {

src/material-experimental/mdc-chips/chip-listbox.ts

@@ -25,7 +25,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MDCChipSetFoundation} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {merge, Observable, Subscription} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';
@@ -211,7 +211,7 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
       this._setSelected(index, selected);
     };
     // Reinitialize the foundation with our overridden adapter
-    this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
+    this._chipSetFoundation = new deprecated.MDCChipSetFoundation(this._chipSetAdapter);
     this._updateMdcSelectionClasses();
   }
 

src/material-experimental/mdc-chips/chip-option.spec.ts

@@ -8,7 +8,7 @@ import {
   RippleGlobalOptions,
 } from '@angular/material-experimental/mdc-core';
 import {By} from '@angular/platform-browser';
-import {chipCssClasses} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {Subject} from 'rxjs';
 import {
   MatChipEvent,
@@ -307,7 +307,7 @@ describe('MDC-based Option Chips', () => {
       chipInstance = chipDebugElement.injector.get<MatChipOption>(MatChipOption);
 
       const avatar = fixture.nativeElement.querySelector('.avatar');
-      expect(avatar.classList).toContain(chipCssClasses.HIDDEN_LEADING_ICON);
+      expect(avatar.classList).toContain(deprecated.chipCssClasses.HIDDEN_LEADING_ICON);
     });
 
     it('should have a focus indicator', () => {

src/material-experimental/mdc-chips/chip-option.ts

@@ -17,7 +17,7 @@ import {
   ViewEncapsulation,
   AfterContentInit
 } from '@angular/core';
-import {chipCssClasses} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {take} from 'rxjs/operators';
 import {MatChip} from './chip';
 
@@ -123,7 +123,7 @@ export class MatChipOption extends MatChip implements AfterContentInit {
     super.ngAfterContentInit();
 
     if (this.selected && this.leadingIcon) {
-      this.leadingIcon.setClass(chipCssClasses.HIDDEN_LEADING_ICON, true);
+      this.leadingIcon.setClass(deprecated.chipCssClasses.HIDDEN_LEADING_ICON, true);
     }
   }
 

src/material-experimental/mdc-chips/chip-set.ts

@@ -23,7 +23,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {HasTabIndex, HasTabIndexCtor, mixinTabIndex} from '@angular/material-experimental/mdc-core';
-import {MDCChipSetAdapter, MDCChipSetFoundation} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';
@@ -81,7 +81,7 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   protected _lastDestroyedChipIndex: number | null = null;
 
   /** The MDC foundation containing business logic for MDC chip-set. */
-  protected _chipSetFoundation: MDCChipSetFoundation;
+  protected _chipSetFoundation: deprecated.MDCChipSetFoundation;
 
   /** Subject that emits when the component has been destroyed. */
   protected _destroyed = new Subject<void>();
@@ -90,7 +90,7 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
    * Implementation of the MDC chip-set adapter interface.
    * These methods are called by the chip set foundation.
    */
-  protected _chipSetAdapter: MDCChipSetAdapter = {
+  protected _chipSetAdapter: deprecated.MDCChipSetAdapter = {
     hasClass: (className) => this._hasMdcClass(className),
     // No-op. We keep track of chips via ContentChildren, which will be updated when a chip is
     // removed.
@@ -175,7 +175,7 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
               protected _changeDetectorRef: ChangeDetectorRef,
               @Optional() protected _dir: Directionality) {
     super(_elementRef);
-    this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
+    this._chipSetFoundation = new deprecated.MDCChipSetFoundation(this._chipSetAdapter);
   }
 
   ngAfterViewInit() {

src/material-experimental/mdc-chips/chip.ts

@@ -44,7 +44,7 @@ import {
   RippleAnimationConfig,
   RippleGlobalOptions,
 } from '@angular/material-experimental/mdc-core';
-import {MDCChipAdapter, MDCChipFoundation} from '@material/chips';
+import {deprecated} from '@material/chips';
 import {numbers} from '@material/ripple';
 import {SPACE, ENTER, hasModifierKey} from '@angular/cdk/keycodes';
 import {Subject} from 'rxjs';
@@ -223,7 +223,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   @Output() readonly removed: EventEmitter<MatChipEvent> = new EventEmitter<MatChipEvent>();
 
   /** The MDC foundation containing business logic for MDC chip. */
-  _chipFoundation: MDCChipFoundation;
+  _chipFoundation: deprecated.MDCChipFoundation;
 
   /** The unstyled chip selector for this component. */
   protected basicChipAttrName = 'mat-basic-chip';
@@ -244,7 +244,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   * Implementation of the MDC chip adapter interface.
   * These methods are called by the chip foundation.
   */
-  protected _chipAdapter: MDCChipAdapter = {
+  protected _chipAdapter: deprecated.MDCChipAdapter = {
     addClass: (className) => this._setMdcClass(className, true),
     removeClass: (className) => this._setMdcClass(className, false),
     hasClass: (className) =>
@@ -343,7 +343,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
         private _globalRippleOptions?: RippleGlobalOptions) {
     super(_elementRef);
-    this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
+    this._chipFoundation = new deprecated.MDCChipFoundation(this._chipAdapter);
     this._animationsDisabled = animationMode === 'NoopAnimations';
     this._isBasicChip = _elementRef.nativeElement.hasAttribute(this.basicChipAttrName) ||
                         _elementRef.nativeElement.tagName.toLowerCase() === this.basicChipAttrName;