refactor(material/chips): convert to standalone

crisbeto · crisbeto · commit af4a9a761341 · 2023-11-27T17:18:08.000+01:00
Converts `material/chips` to standalone.
diff --git a/src/material/chips/chip-action.ts b/src/material/chips/chip-action.ts
@@ -34,6 +34,7 @@ import {MAT_CHIP} from './tokens';
     '(click)': '_handleClick($event)',
     '(keydown)': '_handleKeydown($event)',
   },
+  standalone: true,
 })
 export class MatChipAction {
   /** Whether the action is interactive. */
diff --git a/src/material/chips/chip-edit-input.spec.ts b/src/material/chips/chip-edit-input.spec.ts
@@ -12,8 +12,7 @@ describe('MDC-based MatChipEditInput', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule],
-      declarations: [ChipEditInputContainer],
+      imports: [MatChipsModule, ChipEditInputContainer],
     });
 
     TestBed.compileComponents();
@@ -45,5 +44,7 @@ describe('MDC-based MatChipEditInput', () => {
 
 @Component({
   template: `<mat-chip><span matChipEditInput></span></mat-chip>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class ChipEditInputContainer {}
diff --git a/src/material/chips/chip-edit-input.ts b/src/material/chips/chip-edit-input.ts
@@ -21,6 +21,7 @@ import {DOCUMENT} from '@angular/common';
     'tabindex': '-1',
     'contenteditable': 'true',
   },
+  standalone: true,
 })
 export class MatChipEditInput {
   constructor(
diff --git a/src/material/chips/chip-grid.spec.ts b/src/material/chips/chip-grid.spec.ts
@@ -1007,11 +1007,11 @@ describe('MDC-based MatChipGrid', () => {
         MatInputModule,
         animationsModule,
       ],
-      declarations: [component],
       providers: [
         {provide: NgZone, useFactory: () => (zone = new MockNgZone())},
         {provide: Directionality, useValue: directionality},
       ],
+      declarations: [component],
     }).compileComponents();
 
     const fixture = TestBed.createComponent<T>(component);
diff --git a/src/material/chips/chip-grid.ts b/src/material/chips/chip-grid.ts
@@ -80,6 +80,7 @@ export class MatChipGridChange {
   providers: [{provide: MatFormFieldControl, useExisting: MatChipGrid}],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class MatChipGrid
   extends MatChipSet
diff --git a/src/material/chips/chip-icons.ts b/src/material/chips/chip-icons.ts
@@ -19,6 +19,7 @@ import {MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens
     'role': 'img',
   },
   providers: [{provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar}],
+  standalone: true,
 })
 export class MatChipAvatar {}
 
@@ -31,6 +32,7 @@ export class MatChipAvatar {}
     'aria-hidden': 'true',
   },
   providers: [{provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon}],
+  standalone: true,
 })
 export class MatChipTrailingIcon extends MatChipAction {
   /**
@@ -68,6 +70,7 @@ export class MatChipTrailingIcon extends MatChipAction {
     '[attr.aria-hidden]': 'null',
   },
   providers: [{provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove}],
+  standalone: true,
 })
 export class MatChipRemove extends MatChipAction {
   override _isPrimary = false;
diff --git a/src/material/chips/chip-input.spec.ts b/src/material/chips/chip-input.spec.ts
@@ -1,7 +1,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes';
 import {PlatformModule} from '@angular/cdk/platform';
-import {dispatchKeyboardEvent} from '../../cdk/testing/private';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, fakeAsync, TestBed, flush} from '@angular/core/testing';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -28,7 +28,6 @@ describe('MDC-based MatChipInput', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
-      declarations: [TestChipInput],
       providers: [
         {
           provide: Directionality,
@@ -40,6 +39,7 @@ describe('MDC-based MatChipInput', () => {
           },
         },
       ],
+      declarations: [TestChipInput],
     });
 
     TestBed.compileComponents();
diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts
@@ -68,6 +68,7 @@ let nextUniqueId = 0;
     '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
     '[attr.required]': '_chipGrid && _chipGrid.required || null',
   },
+  standalone: true,
 })
 export class MatChipInput implements MatChipTextControl, AfterContentInit, OnChanges, OnDestroy {
   /** Used to prevent focus moving to chips while user is holding backspace */
diff --git a/src/material/chips/chip-listbox.spec.ts b/src/material/chips/chip-listbox.spec.ts
@@ -517,14 +517,17 @@ describe('MDC-based MatChipListbox', () => {
 
         primaryActions[1].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['false', 'true', 'false']);
 
         primaryActions[2].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['false', 'false', 'true']);
 
         primaryActions[0].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['true', 'false', 'false']);
       }));
 
@@ -552,18 +555,22 @@ describe('MDC-based MatChipListbox', () => {
 
         primaryActions[1].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['false', 'true', 'false']);
 
         primaryActions[2].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['false', 'true', 'true']);
 
         primaryActions[0].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['true', 'true', 'true']);
 
         primaryActions[1].click();
         fixture.detectChanges();
+        flush();
         expect(getAriaSelected()).toEqual(['true', 'false', 'true']);
       }));
     });
@@ -843,11 +850,11 @@ describe('MDC-based MatChipListbox', () => {
 
     TestBed.configureTestingModule({
       imports: [FormsModule, ReactiveFormsModule, MatChipsModule],
-      declarations: [component],
       providers: [
         {provide: NgZone, useFactory: () => (zone = new MockNgZone())},
         {provide: Directionality, useValue: directionality},
       ],
+      declarations: [component],
     }).compileComponents();
 
     fixture = TestBed.createComponent<T>(component);
diff --git a/src/material/chips/chip-listbox.ts b/src/material/chips/chip-listbox.ts
@@ -84,6 +84,7 @@ export const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
   providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class MatChipListbox
   extends MatChipSet
diff --git a/src/material/chips/chip-option.spec.ts b/src/material/chips/chip-option.spec.ts
@@ -36,7 +36,6 @@ describe('MDC-based Option Chips', () => {
 
     TestBed.configureTestingModule({
       imports: [MatChipsModule],
-      declarations: [SingleChip],
       providers: [
         {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions},
         {
@@ -48,6 +47,7 @@ describe('MDC-based Option Chips', () => {
         },
         {provide: MAT_CHIPS_DEFAULT_OPTIONS, useFactory: () => defaultOptions},
       ],
+      declarations: [SingleChip],
     });
 
     TestBed.compileComponents();
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
@@ -19,6 +19,7 @@ import {
 } from '@angular/core';
 import {MatChip} from './chip';
 import {MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS} from './tokens';
+import {MatChipAction} from './chip-action';
 
 /** Event object emitted by MatChipOption when selected or deselected. */
 export class MatChipSelectionChange {
@@ -76,6 +77,8 @@ export class MatChipSelectionChange {
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatChipAction],
 })
 export class MatChipOption extends MatChip implements OnInit {
   /** Default chip options. */
diff --git a/src/material/chips/chip-remove.spec.ts b/src/material/chips/chip-remove.spec.ts
@@ -12,8 +12,7 @@ describe('MDC-based Chip Remove', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule],
-      declarations: [TestChip],
+      imports: [MatChipsModule, TestChip],
     });
 
     TestBed.compileComponents();
@@ -116,6 +115,8 @@ describe('MDC-based Chip Remove', () => {
       </mat-chip>
     </mat-chip-set>
   `,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class TestChip {
   removable: boolean;
diff --git a/src/material/chips/chip-row.spec.ts b/src/material/chips/chip-row.spec.ts
@@ -5,7 +5,7 @@ import {
   dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
-} from '../../cdk/testing/private';
+} from '@angular/cdk/testing/private';
 import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed, flush, fakeAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -29,8 +29,7 @@ describe('MDC-based Row Chips', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule],
-      declarations: [SingleChip],
+      imports: [MatChipsModule, SingleChip],
       providers: [
         {
           provide: Directionality,
@@ -401,6 +400,8 @@ describe('MDC-based Row Chips', () => {
         </div>
       }
     </mat-chip-grid>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class SingleChip {
   @ViewChild(MatChipGrid) chipList: MatChipGrid;
diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts
@@ -32,6 +32,7 @@ import {MatChip, MatChipEvent} from './chip';
 import {MatChipEditInput} from './chip-edit-input';
 import {takeUntil} from 'rxjs/operators';
 import {MAT_CHIP} from './tokens';
+import {MatChipAction} from './chip-action';
 
 /** Represents an event fired on an individual `mat-chip` when it is edited. */
 export interface MatChipEditedEvent extends MatChipEvent {
@@ -76,6 +77,8 @@ export interface MatChipEditedEvent extends MatChipEvent {
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatChipAction, MatChipEditInput],
 })
 export class MatChipRow extends MatChip implements AfterViewInit {
   protected override basicChipAttrName = 'mat-basic-chip-row';
diff --git a/src/material/chips/chip-set.spec.ts b/src/material/chips/chip-set.spec.ts
@@ -7,8 +7,7 @@ import {MatChip, MatChipSet, MatChipsModule} from './index';
 describe('MDC-based MatChipSet', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule, CommonModule],
-      declarations: [BasicChipSet, IndirectDescendantsChipSet],
+      imports: [MatChipsModule, CommonModule, BasicChipSet, IndirectDescendantsChipSet],
     });
 
     TestBed.compileComponents();
@@ -114,6 +113,8 @@ describe('MDC-based MatChipSet', () => {
         }
       </mat-chip-set>
   `,
+  standalone: true,
+  imports: [MatChipsModule, CommonModule],
 })
 class BasicChipSet {
   name: string = 'Test';
@@ -130,5 +131,7 @@ class BasicChipSet {
       }
     </mat-chip-set>
   `,
+  standalone: true,
+  imports: [MatChipsModule, CommonModule],
 })
 class IndirectDescendantsChipSet extends BasicChipSet {}
diff --git a/src/material/chips/chip-set.ts b/src/material/chips/chip-set.ts
@@ -48,6 +48,7 @@ import {MatChipAction} from './chip-action';
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class MatChipSet implements AfterViewInit, OnDestroy {
   /** Index of the last destroyed chip that had focus. */
diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts
@@ -15,8 +15,8 @@ describe('MDC-based MatChip', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule],
-      declarations: [
+      imports: [
+        MatChipsModule,
         BasicChip,
         SingleChip,
         BasicChipWithStaticTabindex,
@@ -196,6 +196,8 @@ describe('MDC-based MatChip', () => {
         </div>
       }
     </mat-chip-set>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class SingleChip {
   @ViewChild(MatChipSet) chipList: MatChipSet;
@@ -213,16 +215,22 @@ class SingleChip {
 
 @Component({
   template: `<mat-basic-chip>Hello</mat-basic-chip>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class BasicChip {}
 
 @Component({
   template: `<mat-basic-chip role="button" tabindex="3">Hello</mat-basic-chip>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class BasicChipWithStaticTabindex {}
 
 @Component({
   template: `<mat-basic-chip role="button" [tabIndex]="tabindex">Hello</mat-basic-chip>`,
+  standalone: true,
+  imports: [MatChipsModule],
 })
 class BasicChipWithBoundTabindex {
   tabindex = 12;
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
@@ -91,6 +91,8 @@ export interface MatChipEvent {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MAT_CHIP, useExisting: MatChip}],
+  standalone: true,
+  imports: [MatChipAction],
 })
 export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
   protected _document: Document;
diff --git a/src/material/chips/module.ts b/src/material/chips/module.ts
@@ -36,9 +36,8 @@ const CHIP_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [MatCommonModule, MatRippleModule],
+  imports: [MatCommonModule, MatRippleModule, MatChipAction, CHIP_DECLARATIONS],
   exports: [MatCommonModule, CHIP_DECLARATIONS],
-  declarations: [MatChipAction, CHIP_DECLARATIONS],
   providers: [
     ErrorStateMatcher,
     {
diff --git a/src/material/chips/testing/chip-grid-harness.spec.ts b/src/material/chips/testing/chip-grid-harness.spec.ts
@@ -12,8 +12,7 @@ describe('MatChipGridHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatChipsModule, ReactiveFormsModule],
-      declarations: [ChipGridHarnessTest],
+      imports: [MatChipsModule, ReactiveFormsModule, ChipGridHarnessTest],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChipGridHarnessTest);
@@ -132,6 +131,8 @@ describe('MatChipGridHarness', () => {
       <input [matChipInputFor]="grid"/>
     </mat-chip-grid>
   `,
+  standalone: true,
+  imports: [MatChipsModule, ReactiveFormsModule],
 })
 class ChipGridHarnessTest {
   control = new FormControl('value', [Validators.required]);
diff --git a/src/material/chips/testing/chip-harness.spec.ts b/src/material/chips/testing/chip-harness.spec.ts
diff --git a/src/material/chips/testing/chip-input-harness.spec.ts b/src/material/chips/testing/chip-input-harness.spec.ts
diff --git a/src/material/chips/testing/chip-listbox-harness.spec.ts b/src/material/chips/testing/chip-listbox-harness.spec.ts
diff --git a/src/material/chips/testing/chip-option-harness.spec.ts b/src/material/chips/testing/chip-option-harness.spec.ts
diff --git a/src/material/chips/testing/chip-row-harness.spec.ts b/src/material/chips/testing/chip-row-harness.spec.ts
diff --git a/src/material/chips/testing/chip-set-harness.spec.ts b/src/material/chips/testing/chip-set-harness.spec.ts
diff --git a/src/material/chips/tokens.ts b/src/material/chips/tokens.ts
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
