refactor(material/autocomplete): convert to standalone

Converts `material/autocomplete` to standalone.

Author: crisbeto

src/material/autocomplete/autocomplete-origin.ts

@@ -15,6 +15,7 @@ import {Directive, ElementRef} from '@angular/core';
 @Directive({
   selector: '[matAutocompleteOrigin]',
   exportAs: 'matAutocompleteOrigin',
+  standalone: true,
 })
 export class MatAutocompleteOrigin {
   constructor(

src/material/autocomplete/autocomplete-trigger.ts

@@ -15,6 +15,7 @@ import {
   ElementRef,
   forwardRef,
   Host,
+  inject,
   Inject,
   InjectionToken,
   Input,
@@ -82,6 +83,13 @@ export function getMatAutocompleteMissingPanelError(): Error {
 /** Injection token that determines the scroll handling while the autocomplete panel is open. */
 export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   'mat-autocomplete-scroll-strategy',
+  {
+    providedIn: 'root',
+    factory: () => {
+      const overlay = inject(Overlay);
+      return () => overlay.scrollStrategies.reposition();
+    },
+  },
 );
 
 /** @docs-private */
@@ -118,6 +126,7 @@ export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
   },
   exportAs: 'matAutocompleteTrigger',
   providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR],
+  standalone: true,
 })
 export class MatAutocompleteTrigger
   implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy

src/material/autocomplete/autocomplete.spec.ts

@@ -12,7 +12,7 @@ import {
   dispatchMouseEvent,
   MockNgZone,
   typeInElement,
-} from '../../cdk/testing/private';
+} from '@angular/cdk/testing/private';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -72,8 +72,8 @@ describe('MDC-based MatAutocomplete', () => {
         NoopAnimationsModule,
         OverlayModule,
       ],
-      declarations: [component],
       providers: [{provide: NgZone, useFactory: () => (zone = new MockNgZone())}, ...providers],
+      declarations: [component],
     });
 
     TestBed.compileComponents();

src/material/autocomplete/autocomplete.ts

@@ -38,6 +38,7 @@ import {coerceStringArray} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {panelAnimation} from './animations';
 import {Subscription} from 'rxjs';
+import {NgClass} from '@angular/common';
 
 /**
  * Autocomplete IDs need to be unique across components, so this counter exists outside of
@@ -118,6 +119,8 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   },
   providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],
   animations: [panelAnimation],
+  standalone: true,
+  imports: [NgClass],
 })
 export class MatAutocomplete implements AfterContentInit, OnDestroy {
   private _activeOptionChanges = Subscription.EMPTY;

src/material/autocomplete/module.ts

@@ -19,7 +19,15 @@ import {
 import {MatAutocompleteOrigin} from './autocomplete-origin';
 
 @NgModule({
-  imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule],
+  imports: [
+    OverlayModule,
+    MatOptionModule,
+    MatCommonModule,
+    CommonModule,
+    MatAutocomplete,
+    MatAutocompleteTrigger,
+    MatAutocompleteOrigin,
+  ],
   exports: [
     CdkScrollableModule,
     MatAutocomplete,
@@ -28,7 +36,6 @@ import {MatAutocompleteOrigin} from './autocomplete-origin';
     MatAutocompleteTrigger,
     MatAutocompleteOrigin,
   ],
-  declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin],
   providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER],
 })
 export class MatAutocompleteModule {}

src/material/autocomplete/public-api.ts

@@ -10,3 +10,6 @@ export * from './module';
 export * from './autocomplete';
 export * from './autocomplete-origin';
 export * from './autocomplete-trigger';
+
+// Re-export these since they're required to be used together with `mat-autocomplete`.
+export {MatOption, MatOptgroup} from '@angular/material/core';

src/material/autocomplete/testing/autocomplete-harness.spec.ts

@@ -12,8 +12,7 @@ describe('MatAutocompleteHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MatAutocompleteModule],
-      declarations: [AutocompleteHarnessTest],
+      imports: [NoopAnimationsModule, MatAutocompleteModule, AutocompleteHarnessTest],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AutocompleteHarnessTest);
@@ -177,6 +176,8 @@ describe('MatAutocompleteHarness', () => {
     <input id="prefilled" [matAutocomplete]="autocomplete" value="Prefilled value">
     <input id="grouped" [matAutocomplete]="groupedAutocomplete">
   `,
+  standalone: true,
+  imports: [MatAutocompleteModule],
 })
 class AutocompleteHarnessTest {
   states = [

tools/public_api_guard/material/autocomplete.md

@@ -14,9 +14,9 @@ import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i4 from '@angular/cdk/overlay';
-import * as i5 from '@angular/material/core';
-import * as i6 from '@angular/common';
+import * as i1 from '@angular/cdk/overlay';
+import * as i2 from '@angular/material/core';
+import * as i3 from '@angular/common';
 import * as i7 from '@angular/cdk/scrolling';
 import { InjectionToken } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
@@ -122,7 +122,7 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
     _syncParentProperties(): void;
     template: TemplateRef<any>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
 }
@@ -149,7 +149,7 @@ export class MatAutocompleteModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, [typeof i1.MatAutocomplete, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin], [typeof i4.OverlayModule, typeof i5.MatOptionModule, typeof i5.MatCommonModule, typeof i6.CommonModule], [typeof i7.CdkScrollableModule, typeof i1.MatAutocomplete, typeof i5.MatOptionModule, typeof i5.MatCommonModule, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i1.OverlayModule, typeof i2.MatOptionModule, typeof i2.MatCommonModule, typeof i3.CommonModule, typeof i4.MatAutocomplete, typeof i5.MatAutocompleteTrigger, typeof i6.MatAutocompleteOrigin], [typeof i7.CdkScrollableModule, typeof i4.MatAutocomplete, typeof i2.MatOptionModule, typeof i2.MatCommonModule, typeof i5.MatAutocompleteTrigger, typeof i6.MatAutocompleteOrigin]>;
 }
 
 // @public
@@ -158,7 +158,7 @@ export class MatAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>);
     elementRef: ElementRef<HTMLElement>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteOrigin, never>;
 }
@@ -214,11 +214,15 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     // (undocumented)
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
 }
 
+export { MatOptgroup }
+
+export { MatOption }
+
 // (No @packageDocumentation comment for this package)
 
 ```