refactor(material/select): convert to standalone

Converts `material/select` to standalone.

Author: crisbeto

src/material/select/module.ts

@@ -15,7 +15,14 @@ import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatSelect, MatSelectTrigger, MAT_SELECT_SCROLL_STRATEGY_PROVIDER} from './select';
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, MatOptionModule, MatCommonModule],
+  imports: [
+    CommonModule,
+    OverlayModule,
+    MatOptionModule,
+    MatCommonModule,
+    MatSelect,
+    MatSelectTrigger,
+  ],
   exports: [
     CdkScrollableModule,
     MatFormFieldModule,
@@ -24,7 +31,6 @@ import {MatSelect, MatSelectTrigger, MAT_SELECT_SCROLL_STRATEGY_PROVIDER} from '
     MatOptionModule,
     MatCommonModule,
   ],
-  declarations: [MatSelect, MatSelectTrigger],
   providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER],
 })
 export class MatSelectModule {}

src/material/select/public-api.ts

@@ -9,3 +9,15 @@
 export * from './module';
 export * from './select';
 export * from './select-animations';
+
+// Re-export these since they're required to be used together with `mat-select`.
+// Also they used to be provided implicitly with `MatSelectModule`.
+export {MatOption, MatOptgroup} from '@angular/material/core';
+export {
+  MatFormField,
+  MatLabel,
+  MatHint,
+  MatError,
+  MatPrefix,
+  MatSuffix,
+} from '@angular/material/form-field';

src/material/select/select.spec.ts

@@ -99,7 +99,6 @@ describe('MDC-based MatSelect', () => {
         NoopAnimationsModule,
         OverlayModule,
       ],
-      declarations: declarations,
       providers: [
         {provide: Directionality, useFactory: () => (dir = {value: 'ltr', change: EMPTY})},
         {
@@ -110,6 +109,7 @@ describe('MDC-based MatSelect', () => {
         },
         ...providers,
       ],
+      declarations: declarations,
     }).compileComponents();
 
     overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
@@ -2868,8 +2868,8 @@ describe('MDC-based MatSelect', () => {
           FormsModule,
           NoopAnimationsModule,
         ],
-        declarations: [FloatLabelSelect],
         providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}],
+        declarations: [FloatLabelSelect],
       });
 
       const fixture = TestBed.createComponent(FloatLabelSelect);

src/material/select/select.ts

@@ -59,6 +59,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   booleanAttribute,
+  inject,
   numberAttribute,
 } from '@angular/core';
 import {
@@ -97,12 +98,20 @@ import {
   getMatSelectNonArrayValueError,
   getMatSelectNonFunctionValueError,
 } from './select-errors';
+import {NgClass} from '@angular/common';
 
 let nextUniqueId = 0;
 
 /** Injection token that determines the scroll handling while a select is open. */
 export const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   'mat-select-scroll-strategy',
+  {
+    providedIn: 'root',
+    factory: () => {
+      const overlay = inject(Overlay);
+      return () => overlay.scrollStrategies.reposition();
+    },
+  },
 );
 
 /** @docs-private */
@@ -196,6 +205,8 @@ export class MatSelectChange {
     {provide: MatFormFieldControl, useExisting: MatSelect},
     {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect},
   ],
+  standalone: true,
+  imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass],
 })
 export class MatSelect
   implements
@@ -1414,5 +1425,6 @@ export class MatSelect
 @Directive({
   selector: 'mat-select-trigger',
   providers: [{provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger}],
+  standalone: true,
 })
 export class MatSelectTrigger {}

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

@@ -16,8 +16,13 @@ describe('MatSelectHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatSelectModule, MatFormFieldModule, NoopAnimationsModule, ReactiveFormsModule],
-      declarations: [SelectHarnessTest],
+      imports: [
+        MatSelectModule,
+        MatFormFieldModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+        SelectHarnessTest,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(SelectHarnessTest);
@@ -301,6 +306,8 @@ describe('MatSelectHarness', () => {
       </mat-select>
     </mat-form-field>
   `,
+  standalone: true,
+  imports: [MatSelectModule, MatFormFieldModule, ReactiveFormsModule],
 })
 class SelectHarnessTest {
   formControl = new FormControl(undefined as string | undefined, [Validators.required]);

tools/public_api_guard/material/select.md

@@ -19,18 +19,23 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { EventEmitter } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/common';
-import * as i3 from '@angular/cdk/overlay';
-import * as i4 from '@angular/material/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import * as i3 from '@angular/material/core';
 import * as i5 from '@angular/cdk/scrolling';
 import * as i6 from '@angular/material/form-field';
 import { InjectionToken } from '@angular/core';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatError } from '@angular/material/form-field';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatHint } from '@angular/material/form-field';
+import { MatLabel } from '@angular/material/form-field';
 import { MatOptgroup } from '@angular/material/core';
 import { MatOption } from '@angular/material/core';
 import { MatOptionSelectionChange } from '@angular/material/core';
+import { MatPrefix } from '@angular/material/form-field';
+import { MatSuffix } from '@angular/material/form-field';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
@@ -65,6 +70,20 @@ export function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): (
 // @public
 export const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;
 
+export { MatError }
+
+export { MatFormField }
+
+export { MatHint }
+
+export { MatLabel }
+
+export { MatOptgroup }
+
+export { MatOption }
+
+export { MatPrefix }
+
 // @public (undocumented)
 export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, MatFormFieldControl<any> {
     constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, defaultErrorStateMatcher: ErrorStateMatcher, _elementRef: ElementRef, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer, _defaultOptions?: MatSelectConfig | undefined);
@@ -197,7 +216,7 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
     protected _viewportRuler: ViewportRuler;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableOptionCentering": { "alias": "disableOptionCentering"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "id": { "alias": "id"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableOptionCentering": { "alias": "disableOptionCentering"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "id": { "alias": "id"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
 }
@@ -233,17 +252,19 @@ export class MatSelectModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectModule, [typeof i1.MatSelect, typeof i1.MatSelectTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.MatOptionModule, typeof i4.MatCommonModule], [typeof i5.CdkScrollableModule, typeof i6.MatFormFieldModule, typeof i1.MatSelect, typeof i1.MatSelectTrigger, typeof i4.MatOptionModule, typeof i4.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.MatOptionModule, typeof i3.MatCommonModule, typeof i4.MatSelect, typeof i4.MatSelectTrigger], [typeof i5.CdkScrollableModule, typeof i6.MatFormFieldModule, typeof i4.MatSelect, typeof i4.MatSelectTrigger, typeof i3.MatOptionModule, typeof i3.MatCommonModule]>;
 }
 
 // @public
 export class MatSelectTrigger {
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectTrigger, never>;
 }
 
+export { MatSuffix }
+
 // (No @packageDocumentation comment for this package)
 
 ```