refactor(multiple): switch remaining directives to standalone (#28202)

Switches all remaining directives to standalone and updates the linter to enforce that all directives and components are standalone.

Author: crisbeto

src/cdk/menu/menu-base.ts

@@ -47,6 +47,7 @@ let nextId = 0;
     '(focusin)': 'menuStack.setHasFocus(true)',
     '(focusout)': 'menuStack.setHasFocus(false)',
   },
+  standalone: true,
 })
 export abstract class CdkMenuBase
   extends CdkMenuGroup

src/cdk/menu/menu-item-selectable.ts

@@ -15,6 +15,7 @@ import {CdkMenuItem} from './menu-item';
     '[attr.aria-checked]': '!!checked',
     '[attr.aria-disabled]': 'disabled || null',
   },
+  standalone: true,
 })
 export abstract class CdkMenuItemSelectable extends CdkMenuItem {
   /** Whether the element is checked */

src/cdk/menu/menu-trigger-base.ts

@@ -34,6 +34,7 @@ export const MENU_TRIGGER = new InjectionToken<CdkMenuTriggerBase>('cdk-menu-tri
     '[attr.aria-controls]': 'childMenu?.id',
     '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
   },
+  standalone: true,
 })
 export abstract class CdkMenuTriggerBase implements OnDestroy {
   /** The DI injector for this component. */

src/cdk/testing/tests/index.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './test-components-module';
 export * from './test-main-component';
 export * from './test-sub-component';
 export * from './test-shadow-boundary';

src/cdk/testing/tests/test-components-module.ts

@@ -8,7 +8,7 @@
 
 import {ENTER} from '@angular/cdk/keycodes';
 import {_supportsShadowDom} from '@angular/cdk/platform';
-import {FormControl} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -19,12 +19,16 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import {TestShadowBoundary} from './test-shadow-boundary';
+import {TestSubComponent} from './test-sub-component';
 
 @Component({
   selector: 'test-main',
   templateUrl: 'test-main-component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TestShadowBoundary, TestSubComponent, FormsModule, ReactiveFormsModule],
 })
 export class TestMainComponent implements OnDestroy {
   username: string;
@@ -54,7 +58,10 @@ export class TestMainComponent implements OnDestroy {
 
   private _fakeOverlayElement: HTMLElement;
 
-  constructor(private _cdr: ChangeDetectorRef, private _zone: NgZone) {
+  constructor(
+    private _cdr: ChangeDetectorRef,
+    private _zone: NgZone,
+  ) {
     this.username = 'Yi';
     this.counter = 0;
     this.asyncCounter = 0;

src/cdk/testing/tests/test-main-component.ts

@@ -9,22 +9,25 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
-  selector: 'test-shadow-boundary',
-  template: `
-    <div class="in-the-shadows">Shadow 1</div>
-    <test-sub-shadow-boundary></test-sub-shadow-boundary>
-  `,
+  selector: 'test-sub-shadow-boundary',
+  template: '<div class="in-the-shadows">Shadow 2</div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:validate-decorators
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
-export class TestShadowBoundary {}
+export class TestSubShadowBoundary {}
 
 @Component({
-  selector: 'test-sub-shadow-boundary',
-  template: '<div class="in-the-shadows">Shadow 2</div>',
+  selector: 'test-shadow-boundary',
+  template: `
+    <div class="in-the-shadows">Shadow 1</div>
+    <test-sub-shadow-boundary></test-sub-shadow-boundary>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:validate-decorators
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
+  imports: [TestSubShadowBoundary],
 })
-export class TestSubShadowBoundary {}
+export class TestShadowBoundary {}

src/cdk/testing/tests/test-shadow-boundary.ts

@@ -19,6 +19,7 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
       </ul>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class TestSubComponent {
   @Input() title: string;

src/cdk/testing/tests/test-sub-component.ts

@@ -6,14 +6,12 @@ import {querySelectorAll as piercingQuerySelectorAll} from 'kagekiri';
 import {crossEnvironmentSpecs} from './cross-environment.spec';
 import {FakeOverlayHarness} from './harnesses/fake-overlay-harness';
 import {MainComponentHarness} from './harnesses/main-component-harness';
-import {TestComponentsModule} from './test-components-module';
 import {TestMainComponent} from './test-main-component';
 
 describe('TestbedHarnessEnvironment', () => {
   let fixture: ComponentFixture<{}>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({imports: [TestComponentsModule]}).compileComponents();
+  beforeEach(() => {
     fixture = TestBed.createComponent(TestMainComponent);
   });
 
@@ -38,9 +36,10 @@ describe('TestbedHarnessEnvironment', () => {
       });
 
       it('should be able to load harness through document root loader', async () => {
-        const documentRootHarnesses = await TestbedHarnessEnvironment.documentRootLoader(
-          fixture,
-        ).getAllHarnesses(FakeOverlayHarness);
+        const documentRootHarnesses =
+          await TestbedHarnessEnvironment.documentRootLoader(fixture).getAllHarnesses(
+            FakeOverlayHarness,
+          );
         const fixtureHarnesses = await loader.getAllHarnesses(FakeOverlayHarness);
         expect(fixtureHarnesses.length).toBe(0);
         expect(documentRootHarnesses.length).toBe(1);

src/cdk/testing/tests/testbed.spec.ts

@@ -1,12 +1,12 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {TestComponentsModule} from '@angular/cdk/testing/tests';
+import {TestMainComponent} from '@angular/cdk/testing/tests';
 
 @Component({
   selector: 'component-harness-e2e',
   template: `<test-main></test-main>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [TestComponentsModule],
+  imports: [TestMainComponent],
 })
 export class ComponentHarnessE2e {}

src/e2e-app/components/component-harness-e2e.ts

@@ -42,6 +42,7 @@ import {MAT_LIST_CONFIG} from './tokens';
   host: {
     '[attr.aria-disabled]': 'disabled',
   },
+  standalone: true,
 })
 /** @docs-private */
 export abstract class MatListBase {
@@ -79,6 +80,7 @@ export abstract class MatListBase {
     '[attr.aria-disabled]': 'disabled',
     '[attr.disabled]': '(_isButtonElement && disabled) || null',
   },
+  standalone: true,
 })
 /** @docs-private */
 export abstract class MatListItemBase implements AfterViewInit, OnDestroy, RippleTarget {

src/material/list/list-base.ts

@@ -69,6 +69,7 @@ export class MatListItemMeta {}
     '[class.mdc-list-item__start]': '_isAlignedAtStart()',
     '[class.mdc-list-item__end]': '!_isAlignedAtStart()',
   },
+  standalone: true,
 })
 export class _MatListItemGraphicBase {
   constructor(@Optional() @Inject(LIST_OPTION) public _listOption: ListOption) {}

src/material/list/list-item-sections.ts

@@ -101,7 +101,7 @@ export abstract class CdkMenuBase extends CdkMenuGroup implements Menu, AfterCon
     protected pointerTracker?: PointerFocusTracker<CdkMenuItem>;
     protected triggerItem?: CdkMenuItem;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuBase, never, never, { "id": { "alias": "id"; "required": false; }; }, {}, ["items"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuBase, never, never, { "id": { "alias": "id"; "required": false; }; }, {}, ["items"], never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuBase, never>;
 }
@@ -183,7 +183,7 @@ export abstract class CdkMenuItemSelectable extends CdkMenuItem {
     // (undocumented)
     static ngAcceptInputType_checked: unknown;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuItemSelectable, never, never, { "checked": { "alias": "cdkMenuItemChecked"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuItemSelectable, never, never, { "checked": { "alias": "cdkMenuItemChecked"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuItemSelectable, never>;
 }
@@ -235,7 +235,7 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
     protected readonly stopOutsideClicksListener: Observable<void>;
     protected readonly viewContainerRef: ViewContainerRef;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuTriggerBase, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuTriggerBase, never, never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuTriggerBase, never>;
 }

tools/public_api_guard/cdk/menu.md

@@ -104,7 +104,7 @@ export class _MatListItemGraphicBase {
     // (undocumented)
     _listOption: ListOption;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatListItemGraphicBase, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatListItemGraphicBase, never, never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatListItemGraphicBase, [{ optional: true; }]>;
 }

tools/public_api_guard/material/list.md

@@ -97,13 +97,15 @@
             "!styles": ".*",
             "!moduleId": ".*",
             "changeDetection": "\\.OnPush$",
-            "encapsulation": "\\.None$"
+            "encapsulation": "\\.None$",
+            "standalone": "^true$"
           }
         },
         "Directive": {
           "argument": 0,
           "properties": {
-            "!host": "\\[class\\]"
+            "!host": "\\[class\\]",
+            "standalone": "^true$"
           }
         },
         "NgModule": {