From bf6f38abd7b8f115413aa9de08b632b017827ba9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 1 Aug 2022 14:43:23 +0200 Subject: [PATCH] feat(material/select): switch implementation to use MDC (#25360) Switches `mat-select` to use MDC by default. BREAKING CHANGE: * DOM and CSS classes for `mat-select` have changes. * TypeScript API is largely the same but may have minor differences. --- .github/CODEOWNERS | 5 +- .ng-dev/commit-message.mts | 2 +- .../size-test/material/select/basic.ts | 4 +- src/components-examples/cdk/a11y/BUILD.bazel | 2 +- src/components-examples/cdk/a11y/index.ts | 4 +- .../cdk/text-field/BUILD.bazel | 2 +- .../cdk/text-field/index.ts | 10 +- .../material/form-field/BUILD.bazel | 2 +- .../material/form-field/index.ts | 4 +- .../material/select/BUILD.bazel | 8 +- .../material/select/index.ts | 4 +- .../select-harness-example.spec.ts | 14 +- .../material/sidenav/BUILD.bazel | 2 +- .../material/sidenav/index.ts | 4 +- .../material/snack-bar/BUILD.bazel | 2 +- .../material/snack-bar/index.ts | 10 +- .../material/tooltip/BUILD.bazel | 2 +- .../material/tooltip/index.ts | 4 +- src/dev-app/baseline/BUILD.bazel | 2 +- src/dev-app/baseline/baseline-demo.ts | 4 +- src/dev-app/bottom-sheet/BUILD.bazel | 2 +- src/dev-app/bottom-sheet/bottom-sheet-demo.ts | 4 +- .../cdk-experimental-listbox/BUILD.bazel | 2 +- .../cdk-listbox-demo.ts | 10 +- src/dev-app/checkbox/BUILD.bazel | 2 +- src/dev-app/checkbox/checkbox-demo.ts | 4 +- src/dev-app/datepicker/BUILD.bazel | 2 +- src/dev-app/datepicker/datepicker-demo.ts | 4 +- src/dev-app/dialog/BUILD.bazel | 2 +- src/dev-app/dialog/dialog-demo.ts | 4 +- src/dev-app/drag-drop/BUILD.bazel | 2 +- src/dev-app/drag-drop/drag-drop-demo.ts | 4 +- src/dev-app/input-modality/BUILD.bazel | 2 +- .../input-modality-detector-demo.ts | 4 +- src/dev-app/input/BUILD.bazel | 2 +- src/dev-app/input/input-demo.ts | 4 +- src/dev-app/mdc-checkbox/BUILD.bazel | 2 +- src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts | 2 +- src/dev-app/mdc-dialog/BUILD.bazel | 2 +- src/dev-app/mdc-dialog/mdc-dialog-demo.ts | 2 +- src/dev-app/mdc-select/BUILD.bazel | 2 +- src/dev-app/mdc-select/mdc-select-demo.ts | 2 +- src/dev-app/mdc-snack-bar/BUILD.bazel | 2 +- .../mdc-snack-bar/mdc-snack-bar-demo.ts | 2 +- src/dev-app/mdc-tooltip/BUILD.bazel | 2 +- src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts | 2 +- src/dev-app/select/BUILD.bazel | 2 +- src/dev-app/select/select-demo.ts | 4 +- src/dev-app/snack-bar/BUILD.bazel | 2 +- src/dev-app/snack-bar/snack-bar-demo.ts | 4 +- src/dev-app/stepper/BUILD.bazel | 2 +- src/dev-app/stepper/stepper-demo.ts | 4 +- src/dev-app/toolbar/BUILD.bazel | 2 +- src/dev-app/toolbar/toolbar-demo.ts | 4 +- src/dev-app/virtual-scroll/BUILD.bazel | 2 +- .../virtual-scroll/virtual-scroll-demo.ts | 4 +- src/material-experimental/_index.scss | 2 - src/material-experimental/config.bzl | 2 - .../mdc-core/density/_all-density.import.scss | 5 - .../mdc-core/theming/BUILD.bazel | 1 - .../mdc-core/theming/_all-theme.import.scss | 6 - .../mdc-core/theming/_all-theme.scss | 3 +- .../typography/_all-typography.import.scss | 5 - .../mdc-paginator/BUILD.bazel | 4 +- .../mdc-paginator/module.ts | 2 +- .../mdc-paginator/paginator.spec.ts | 4 +- .../mdc-paginator/testing/BUILD.bazel | 2 +- .../testing/paginator-harness.ts | 2 +- .../mdc-select/BUILD.bazel | 69 - .../mdc-select/README.md | 109 -- .../mdc-select/_select-theme.import.scss | 7 - .../mdc-select/_select-theme.scss | 99 - .../mdc-select/select.html | 63 - .../mdc-select/select.scss | 178 -- .../mdc-select/select.ts | 199 -- .../mdc-select/testing/select-harness.spec.ts | 8 - .../mdc-select/testing/select-harness.ts | 44 - src/material/_index.scss | 2 + src/material/_theming.scss | 2 +- src/material/config.bzl | 4 +- .../core/density/private/_all-density.scss | 2 + src/material/core/theming/_all-theme.scss | 2 +- .../tests/test-css-variables-theme.scss | 2 - .../core/typography/_all-typography.scss | 2 +- src/material/form-field/testing/BUILD.bazel | 6 +- .../testing/form-field-harness.spec.ts | 4 +- .../form-field/testing/form-field-harness.ts | 2 +- .../legacy-core/theming/_all-theme.scss | 2 + .../typography/_all-typography.scss | 2 + .../legacy-form-field/testing/BUILD.bazel | 6 +- .../testing/form-field-harness.spec.ts | 8 +- .../testing/form-field-harness.ts | 6 +- src/material/legacy-input/input.md | 8 +- src/material/legacy-select/BUILD.bazel | 94 + src/material/legacy-select/README.md | 1 + .../legacy-select/_select-legacy-index.scss | 2 + .../legacy-select/_select-theme.import.scss | 11 + src/material/legacy-select/_select-theme.scss | 101 + .../legacy-select}/index.ts | 0 .../legacy-select}/public-api.ts | 9 +- .../legacy-select}/select-animations.ts | 44 +- .../legacy-select}/select-errors.ts | 3 - .../select-module.ts | 11 +- .../select.e2e.spec.ts | 0 src/material/legacy-select/select.html | 61 + src/material/legacy-select/select.md | 195 ++ src/material/legacy-select/select.scss | 176 ++ .../legacy-select}/select.spec.ts | 1619 +++++++++++++---- src/material/legacy-select/select.ts | 490 +++++ .../legacy-select}/testing/BUILD.bazel | 10 +- .../legacy-select}/testing/index.ts | 0 .../legacy-select}/testing/public-api.ts | 0 .../testing/select-harness-filters.ts | 0 .../testing/select-harness.spec.ts | 8 + .../legacy-select/testing/select-harness.ts | 42 + src/material/paginator/BUILD.bazel | 4 +- src/material/paginator/paginator-module.ts | 4 +- src/material/paginator/paginator.spec.ts | 4 +- src/material/paginator/testing/BUILD.bazel | 2 +- .../paginator/testing/paginator-harness.ts | 4 +- src/material/select/BUILD.bazel | 52 +- src/material/select/README.md | 2 +- src/material/select/_select-legacy-index.scss | 2 - src/material/select/_select-theme.import.scss | 16 +- src/material/select/_select-theme.scss | 108 +- .../mdc-select => material/select}/module.ts | 3 +- src/material/select/public-api.ts | 15 +- src/material/select/select-animations.ts | 44 +- src/material/select/select-errors.ts | 3 + src/material/select/select.html | 58 +- src/material/select/select.md | 8 +- src/material/select/select.scss | 173 +- src/material/select/select.spec.ts | 1562 +++------------- src/material/select/select.ts | 524 ++---- src/material/select/testing/BUILD.bazel | 11 +- .../select/testing/select-harness.spec.ts | 8 +- src/material/select/testing/select-harness.ts | 42 +- src/material/select/testing/shared.spec.ts | 4 +- .../kitchen-sink-mdc/kitchen-sink-mdc.ts | 2 +- .../kitchen-sink/kitchen-sink.ts | 4 +- .../material/form-field/app.module.ts | 4 +- .../material/form-field-testing.md | 2 +- .../material/legacy-form-field-testing.md | 6 +- .../material/legacy-select-testing.md | 34 + .../material/legacy-select.md | 125 ++ .../material/paginator-testing.md | 4 +- tools/public_api_guard/material/paginator.md | 4 +- .../material/select-testing.md | 16 +- tools/public_api_guard/material/select.md | 78 +- 149 files changed, 3553 insertions(+), 3325 deletions(-) delete mode 100644 src/material-experimental/mdc-select/BUILD.bazel delete mode 100644 src/material-experimental/mdc-select/README.md delete mode 100644 src/material-experimental/mdc-select/_select-theme.import.scss delete mode 100644 src/material-experimental/mdc-select/_select-theme.scss delete mode 100644 src/material-experimental/mdc-select/select.html delete mode 100644 src/material-experimental/mdc-select/select.scss delete mode 100644 src/material-experimental/mdc-select/select.ts delete mode 100644 src/material-experimental/mdc-select/testing/select-harness.spec.ts delete mode 100644 src/material-experimental/mdc-select/testing/select-harness.ts create mode 100644 src/material/legacy-select/BUILD.bazel create mode 100644 src/material/legacy-select/README.md create mode 100644 src/material/legacy-select/_select-legacy-index.scss create mode 100644 src/material/legacy-select/_select-theme.import.scss create mode 100644 src/material/legacy-select/_select-theme.scss rename src/{material-experimental/mdc-select => material/legacy-select}/index.ts (100%) rename src/{material-experimental/mdc-select => material/legacy-select}/public-api.ts (71%) rename src/{material-experimental/mdc-select => material/legacy-select}/select-animations.ts (55%) rename src/{material-experimental/mdc-select => material/legacy-select}/select-errors.ts (90%) rename src/material/{select => legacy-select}/select-module.ts (75%) rename src/material/{select => legacy-select}/select.e2e.spec.ts (100%) create mode 100644 src/material/legacy-select/select.html create mode 100644 src/material/legacy-select/select.md create mode 100644 src/material/legacy-select/select.scss rename src/{material-experimental/mdc-select => material/legacy-select}/select.spec.ts (73%) create mode 100644 src/material/legacy-select/select.ts rename src/{material-experimental/mdc-select => material/legacy-select}/testing/BUILD.bazel (80%) rename src/{material-experimental/mdc-select => material/legacy-select}/testing/index.ts (100%) rename src/{material-experimental/mdc-select => material/legacy-select}/testing/public-api.ts (100%) rename src/{material-experimental/mdc-select => material/legacy-select}/testing/select-harness-filters.ts (100%) create mode 100644 src/material/legacy-select/testing/select-harness.spec.ts create mode 100644 src/material/legacy-select/testing/select-harness.ts delete mode 100644 src/material/select/_select-legacy-index.scss rename src/{material-experimental/mdc-select => material/select}/module.ts (87%) create mode 100644 tools/public_api_guard/material/legacy-select-testing.md create mode 100644 tools/public_api_guard/material/legacy-select.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c4f59b555ee2..c39e11661f98 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -25,6 +25,7 @@ /src/material/progress-spinner/** @andrewseguin @crisbeto /src/material/radio/** @andrewseguin @devversion /src/material/schematics/** @devversion @andrewseguin +/src/material/legacy-select/** @crisbeto /src/material/select/** @crisbeto /src/material/sidenav/** @mmalerba /src/material/slide-toggle/** @devversion @@ -119,7 +120,7 @@ /src/material/form-field/** @devversion @mmalerba /src/material-experimental/mdc-list/** @mmalerba @devversion /src/material-experimental/mdc-menu/** @crisbeto -/src/material-experimental/mdc-select/** @crisbeto +/src/material/select/** @crisbeto /src/material-experimental/mdc-paginator/** @crisbeto /src/material-experimental/mdc-progress-spinner/** @andrewseguin /src/material/progress-bar/** @andrewseguin @@ -338,7 +339,7 @@ /tools/public_api_guard/material/legacy-progress-bar** @andrewseguin @crisbeto /tools/public_api_guard/material/progress-spinner**@andrewseguin @crisbeto /tools/public_api_guard/material/radio** @andrewseguin @devversion -/tools/public_api_guard/material/select** @crisbeto +/tools/public_api_guard/material/legacy-select** @crisbeto /tools/public_api_guard/material/sidenav** @mmalerba /tools/public_api_guard/material/slide-toggle** @devversion /tools/public_api_guard/material/slider** @mmalerba diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts index b6614531e2ed..bf2a8bfd5f3f 100644 --- a/.ng-dev/commit-message.mts +++ b/.ng-dev/commit-message.mts @@ -55,7 +55,6 @@ export const commitMessage: CommitMessageConfig = { 'material/progress-bar', 'material-experimental/mdc-progress-spinner', 'material-experimental/mdc-radio', - 'material-experimental/mdc-select', 'material-experimental/mdc-slide-toggle', 'material-experimental/mdc-slider', 'material-experimental/mdc-snack-bar', @@ -97,6 +96,7 @@ export const commitMessage: CommitMessageConfig = { 'material/radio', 'material/schematics', 'material/select', + 'material/legacy-select', 'material/sidenav', 'material/slide-toggle', 'material/slider', diff --git a/integration/size-test/material/select/basic.ts b/integration/size-test/material/select/basic.ts index 405cb0486479..fecbb2fdfaf0 100644 --- a/integration/size-test/material/select/basic.ts +++ b/integration/size-test/material/select/basic.ts @@ -1,5 +1,5 @@ import {Component, NgModule} from '@angular/core'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; /** * Basic component using `MatSelect` and `MatOption`. Other supported parts of the @@ -16,7 +16,7 @@ import {MatSelectModule} from '@angular/material/select'; export class TestComponent {} @NgModule({ - imports: [MatSelectModule], + imports: [MatLegacySelectModule], declarations: [TestComponent], bootstrap: [TestComponent], }) diff --git a/src/components-examples/cdk/a11y/BUILD.bazel b/src/components-examples/cdk/a11y/BUILD.bazel index d17b04aa6f49..8ac94118d06c 100644 --- a/src/components-examples/cdk/a11y/BUILD.bazel +++ b/src/components-examples/cdk/a11y/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ]), deps = [ "//src/cdk/a11y", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/components-examples/cdk/a11y/index.ts b/src/components-examples/cdk/a11y/index.ts index 451808951766..f81ad8de3f0c 100644 --- a/src/components-examples/cdk/a11y/index.ts +++ b/src/components-examples/cdk/a11y/index.ts @@ -1,6 +1,6 @@ import {A11yModule} from '@angular/cdk/a11y'; import {NgModule} from '@angular/core'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {FocusMonitorDirectivesExample} from './focus-monitor-directives/focus-monitor-directives-example'; import {FocusMonitorFocusViaExample} from './focus-monitor-focus-via/focus-monitor-focus-via-example'; import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example'; @@ -14,7 +14,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [A11yModule, MatSelectModule], + imports: [A11yModule, MatLegacySelectModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/cdk/text-field/BUILD.bazel b/src/components-examples/cdk/text-field/BUILD.bazel index 8b9c41b455ea..18c101935ee7 100644 --- a/src/components-examples/cdk/text-field/BUILD.bazel +++ b/src/components-examples/cdk/text-field/BUILD.bazel @@ -13,7 +13,7 @@ ng_module( "//src/cdk/text-field", "//src/material/button", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/components-examples/cdk/text-field/index.ts b/src/components-examples/cdk/text-field/index.ts index 756215589776..d625776cb446 100644 --- a/src/components-examples/cdk/text-field/index.ts +++ b/src/components-examples/cdk/text-field/index.ts @@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example'; import {TextFieldAutofillMonitorExample} from './text-field-autofill-monitor/text-field-autofill-monitor-example'; import {TextFieldAutosizeTextareaExample} from './text-field-autosize-textarea/text-field-autosize-textarea-example'; @@ -21,7 +21,13 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [CommonModule, TextFieldModule, MatButtonModule, MatLegacyInputModule, MatSelectModule], + imports: [ + CommonModule, + TextFieldModule, + MatButtonModule, + MatLegacyInputModule, + MatLegacySelectModule, + ], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel index 7ff074e97bcb..718c92435326 100644 --- a/src/components-examples/material/form-field/BUILD.bazel +++ b/src/components-examples/material/form-field/BUILD.bazel @@ -22,8 +22,8 @@ ng_module( "//src/material/legacy-form-field/testing", "//src/material/legacy-input", "//src/material/legacy-input/testing", + "//src/material/legacy-select", "//src/material/radio", - "//src/material/select", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/form-field/index.ts b/src/components-examples/material/form-field/index.ts index 5c6f65c78abe..8ea4b527ab92 100644 --- a/src/components-examples/material/form-field/index.ts +++ b/src/components-examples/material/form-field/index.ts @@ -7,7 +7,7 @@ import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example'; import { FormFieldCustomControlExample, @@ -55,7 +55,7 @@ const EXAMPLES = [ MatIconModule, MatLegacyInputModule, MatRadioModule, - MatSelectModule, + MatLegacySelectModule, ReactiveFormsModule, ], declarations: [...EXAMPLES, MyTelInput], diff --git a/src/components-examples/material/select/BUILD.bazel b/src/components-examples/material/select/BUILD.bazel index e2bea9f6fb2c..9d6cb34689b9 100644 --- a/src/components-examples/material/select/BUILD.bazel +++ b/src/components-examples/material/select/BUILD.bazel @@ -18,8 +18,8 @@ ng_module( "//src/material/checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", - "//src/material/select/testing", + "//src/material/legacy-select", + "//src/material/legacy-select/testing", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", @@ -43,8 +43,8 @@ ng_test_library( ":select", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/select", - "//src/material/select/testing", + "//src/material/legacy-select", + "//src/material/legacy-select/testing", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", ], diff --git a/src/components-examples/material/select/index.ts b/src/components-examples/material/select/index.ts index 7f6fd529aa7f..eeea74efc717 100644 --- a/src/components-examples/material/select/index.ts +++ b/src/components-examples/material/select/index.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example'; import {SelectDisabledExample} from './select-disabled/select-disabled-example'; import {SelectErrorStateMatcherExample} from './select-error-state-matcher/select-error-state-matcher-example'; @@ -63,7 +63,7 @@ const EXAMPLES = [ FormsModule, MatCheckboxModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, ReactiveFormsModule, MatLegacyFormFieldModule, ], diff --git a/src/components-examples/material/select/select-harness/select-harness-example.spec.ts b/src/components-examples/material/select/select-harness/select-harness-example.spec.ts index 17a3198fb891..7300f439e34a 100644 --- a/src/components-examples/material/select/select-harness/select-harness-example.spec.ts +++ b/src/components-examples/material/select/select-harness/select-harness-example.spec.ts @@ -1,8 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatSelectHarness} from '@angular/material/select/testing'; +import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; import {HarnessLoader} from '@angular/cdk/testing'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {SelectHarnessExample} from './select-harness-example'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -12,7 +12,7 @@ describe('SelectHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatSelectModule, NoopAnimationsModule], + imports: [MatLegacySelectModule, NoopAnimationsModule], declarations: [SelectHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(SelectHarnessExample); @@ -21,18 +21,18 @@ describe('SelectHarnessExample', () => { }); it('should load all select harnesses', async () => { - const selects = await loader.getAllHarnesses(MatSelectHarness); + const selects = await loader.getAllHarnesses(MatLegacySelectHarness); expect(selects.length).toBe(1); }); it('should be able to check whether a select is in multi-selection mode', async () => { - const select = await loader.getHarness(MatSelectHarness); + const select = await loader.getHarness(MatLegacySelectHarness); expect(await select.isMultiple()).toBe(false); }); it('should be able to open and close a select', async () => { - const select = await loader.getHarness(MatSelectHarness); + const select = await loader.getHarness(MatLegacySelectHarness); expect(await select.isOpen()).toBe(false); @@ -44,7 +44,7 @@ describe('SelectHarnessExample', () => { }); it('should be able to get the value text from a select', async () => { - const select = await loader.getHarness(MatSelectHarness); + const select = await loader.getHarness(MatLegacySelectHarness); await select.open(); const options = await select.getOptions(); diff --git a/src/components-examples/material/sidenav/BUILD.bazel b/src/components-examples/material/sidenav/BUILD.bazel index a8fdecada5ad..90a67ac8d8ab 100644 --- a/src/components-examples/material/sidenav/BUILD.bazel +++ b/src/components-examples/material/sidenav/BUILD.bazel @@ -19,9 +19,9 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/icon", + "//src/material/legacy-select", "//src/material/list", "//src/material/radio", - "//src/material/select", "//src/material/sidenav", "//src/material/toolbar", "@npm//@angular/forms", diff --git a/src/components-examples/material/sidenav/index.ts b/src/components-examples/material/sidenav/index.ts index 6b27b61b2d59..1b403339c3d2 100644 --- a/src/components-examples/material/sidenav/index.ts +++ b/src/components-examples/material/sidenav/index.ts @@ -6,7 +6,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; import {MatListModule} from '@angular/material/list'; import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatToolbarModule} from '@angular/material/toolbar'; import {SidenavAutosizeExample} from './sidenav-autosize/sidenav-autosize-example'; @@ -59,7 +59,7 @@ const EXAMPLES = [ MatListModule, MatRadioModule, MatSidenavModule, - MatSelectModule, + MatLegacySelectModule, MatToolbarModule, ReactiveFormsModule, ], diff --git a/src/components-examples/material/snack-bar/BUILD.bazel b/src/components-examples/material/snack-bar/BUILD.bazel index dfbfaf90a4ac..a8b3f60f8ea1 100644 --- a/src/components-examples/material/snack-bar/BUILD.bazel +++ b/src/components-examples/material/snack-bar/BUILD.bazel @@ -17,7 +17,7 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "//src/material/snack-bar", "//src/material/snack-bar/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/snack-bar/index.ts b/src/components-examples/material/snack-bar/index.ts index 25db0b2a3177..f6f1cc1325c9 100644 --- a/src/components-examples/material/snack-bar/index.ts +++ b/src/components-examples/material/snack-bar/index.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import { PizzaPartyComponent, @@ -28,7 +28,13 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [FormsModule, MatButtonModule, MatLegacyInputModule, MatSelectModule, MatSnackBarModule], + imports: [ + FormsModule, + MatButtonModule, + MatLegacyInputModule, + MatLegacySelectModule, + MatSnackBarModule, + ], declarations: [...EXAMPLES, PizzaPartyComponent], exports: EXAMPLES, }) diff --git a/src/components-examples/material/tooltip/BUILD.bazel b/src/components-examples/material/tooltip/BUILD.bazel index eb8aa71f75e0..bca3b84aabb4 100644 --- a/src/components-examples/material/tooltip/BUILD.bazel +++ b/src/components-examples/material/tooltip/BUILD.bazel @@ -19,9 +19,9 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/legacy-input", + "//src/material/legacy-select", "//src/material/legacy-tooltip", "//src/material/legacy-tooltip/testing", - "//src/material/select", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/tooltip/index.ts b/src/components-examples/material/tooltip/index.ts index b5d3e70e9ffd..44c476665d96 100644 --- a/src/components-examples/material/tooltip/index.ts +++ b/src/components-examples/material/tooltip/index.ts @@ -5,7 +5,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example'; import {TooltipCustomClassExample} from './tooltip-custom-class/tooltip-custom-class-example'; @@ -50,7 +50,7 @@ const EXAMPLES = [ MatButtonModule, MatCheckboxModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatLegacyTooltipModule, ReactiveFormsModule, ScrollingModule, // Required for the auto-scrolling example diff --git a/src/dev-app/baseline/BUILD.bazel b/src/dev-app/baseline/BUILD.bazel index 001f350623f1..26606eab853a 100644 --- a/src/dev-app/baseline/BUILD.bazel +++ b/src/dev-app/baseline/BUILD.bazel @@ -14,8 +14,8 @@ ng_module( "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", + "//src/material/legacy-select", "//src/material/radio", - "//src/material/select", "//src/material/toolbar", ], ) diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts index 8b71ceb6f9eb..f4ef54161838 100644 --- a/src/dev-app/baseline/baseline-demo.ts +++ b/src/dev-app/baseline/baseline-demo.ts @@ -13,7 +13,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatToolbarModule} from '@angular/material/toolbar'; @Component({ @@ -28,7 +28,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; MatLegacyFormFieldModule, MatLegacyInputModule, MatRadioModule, - MatSelectModule, + MatLegacySelectModule, MatToolbarModule, ], }) diff --git a/src/dev-app/bottom-sheet/BUILD.bazel b/src/dev-app/bottom-sheet/BUILD.bazel index 1aa027df6717..9781b75ea219 100644 --- a/src/dev-app/bottom-sheet/BUILD.bazel +++ b/src/dev-app/bottom-sheet/BUILD.bazel @@ -17,8 +17,8 @@ ng_module( "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", + "//src/material/legacy-select", "//src/material/list", - "//src/material/select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index 542f6e5f58d1..7659f433e557 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -22,7 +22,7 @@ import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatListModule} from '@angular/material/list'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; const defaultConfig = new MatBottomSheetConfig(); @@ -41,7 +41,7 @@ const defaultConfig = new MatBottomSheetConfig(); MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatListModule, ], }) diff --git a/src/dev-app/cdk-experimental-listbox/BUILD.bazel b/src/dev-app/cdk-experimental-listbox/BUILD.bazel index 78b49e276487..1212a3b71de6 100644 --- a/src/dev-app/cdk-experimental-listbox/BUILD.bazel +++ b/src/dev-app/cdk-experimental-listbox/BUILD.bazel @@ -11,6 +11,6 @@ ng_module( ], deps = [ "//src/cdk-experimental/listbox", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/dev-app/cdk-experimental-listbox/cdk-listbox-demo.ts b/src/dev-app/cdk-experimental-listbox/cdk-listbox-demo.ts index f4da82563b38..e1602ca1307a 100644 --- a/src/dev-app/cdk-experimental-listbox/cdk-listbox-demo.ts +++ b/src/dev-app/cdk-experimental-listbox/cdk-listbox-demo.ts @@ -10,7 +10,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {CdkListboxModule} from '@angular/cdk-experimental/listbox'; import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; function dumbCompare(o1: string, o2: string) { const equiv = new Set(['apple', 'orange']); @@ -21,7 +21,13 @@ function dumbCompare(o1: string, o2: string) { templateUrl: 'cdk-listbox-demo.html', styleUrls: ['cdk-listbox-demo.css'], standalone: true, - imports: [CdkListboxModule, CommonModule, FormsModule, MatSelectModule, ReactiveFormsModule], + imports: [ + CdkListboxModule, + CommonModule, + FormsModule, + MatLegacySelectModule, + ReactiveFormsModule, + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CdkListboxDemo { diff --git a/src/dev-app/checkbox/BUILD.bazel b/src/dev-app/checkbox/BUILD.bazel index b1772f9ea1f5..a759776094c8 100644 --- a/src/dev-app/checkbox/BUILD.bazel +++ b/src/dev-app/checkbox/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/material/core", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts index 112c4e6da080..defe941f7ac0 100644 --- a/src/dev-app/checkbox/checkbox-demo.ts +++ b/src/dev-app/checkbox/checkbox-demo.ts @@ -15,7 +15,7 @@ import {CheckboxExamplesModule} from '@angular/components-examples/material/chec import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; export interface Task { name: string; @@ -113,7 +113,7 @@ export class MatCheckboxDemoNestedChecklist { MatCheckboxModule, MatLegacyFormFieldModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatPseudoCheckboxModule, ReactiveFormsModule, MatCheckboxDemoNestedChecklist, diff --git a/src/dev-app/datepicker/BUILD.bazel b/src/dev-app/datepicker/BUILD.bazel index 08f570057b20..c69dced35188 100644 --- a/src/dev-app/datepicker/BUILD.bazel +++ b/src/dev-app/datepicker/BUILD.bazel @@ -19,7 +19,7 @@ ng_module( "//src/material/icon", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index 7ea2025f430a..c1ee51da576c 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/src/dev-app/datepicker/datepicker-demo.ts @@ -41,7 +41,7 @@ import { import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; @@ -192,7 +192,7 @@ export class CustomHeaderNgContent { MatIconModule, MatLegacyInputModule, MatNativeDateModule, - MatSelectModule, + MatLegacySelectModule, ReactiveFormsModule, CustomHeader, CustomHeaderNgContent, diff --git a/src/dev-app/dialog/BUILD.bazel b/src/dev-app/dialog/BUILD.bazel index 9eecaf5aeb32..0db7f2818791 100644 --- a/src/dev-app/dialog/BUILD.bazel +++ b/src/dev-app/dialog/BUILD.bazel @@ -17,7 +17,7 @@ ng_module( "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index fdd99f5dca6e..06b54fb9cd9a 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -22,7 +22,7 @@ import { } from '@angular/material/dialog'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; const defaultDialogConfig = new MatDialogConfig(); @@ -39,7 +39,7 @@ const defaultDialogConfig = new MatDialogConfig(); MatDialogModule, MatLegacyFormFieldModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, ], }) export class DialogDemo { diff --git a/src/dev-app/drag-drop/BUILD.bazel b/src/dev-app/drag-drop/BUILD.bazel index 110b20dfc20b..98f8f462c3ee 100644 --- a/src/dev-app/drag-drop/BUILD.bazel +++ b/src/dev-app/drag-drop/BUILD.bazel @@ -14,7 +14,7 @@ ng_module( "//src/material/icon", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", ], ) diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index d548297b9a59..33ce3c4f225f 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/src/dev-app/drag-drop/drag-drop-demo.ts @@ -19,7 +19,7 @@ import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; @Component({ selector: 'drag-drop-demo', @@ -35,7 +35,7 @@ import {MatSelectModule} from '@angular/material/select'; MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, ], }) export class DragAndDropDemo { diff --git a/src/dev-app/input-modality/BUILD.bazel b/src/dev-app/input-modality/BUILD.bazel index adab3ab55af9..9d53646f237d 100644 --- a/src/dev-app/input-modality/BUILD.bazel +++ b/src/dev-app/input-modality/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( "//src/material/button", "//src/material/legacy-form-field", "//src/material/legacy-input", + "//src/material/legacy-select", "//src/material/radio", - "//src/material/select", ], ) diff --git a/src/dev-app/input-modality/input-modality-detector-demo.ts b/src/dev-app/input-modality/input-modality-detector-demo.ts index 955006e57db9..b2c7ac59610d 100644 --- a/src/dev-app/input-modality/input-modality-detector-demo.ts +++ b/src/dev-app/input-modality/input-modality-detector-demo.ts @@ -16,7 +16,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; @Component({ selector: 'input-modality-detector-demo', @@ -29,7 +29,7 @@ import {MatSelectModule} from '@angular/material/select'; MatLegacyFormFieldModule, MatLegacyInputModule, MatRadioModule, - MatSelectModule, + MatLegacySelectModule, ], }) export class InputModalityDetectorDemo implements OnDestroy { diff --git a/src/dev-app/input/BUILD.bazel b/src/dev-app/input/BUILD.bazel index 9923e9370c38..c1679ea5121b 100644 --- a/src/dev-app/input/BUILD.bazel +++ b/src/dev-app/input/BUILD.bazel @@ -17,7 +17,7 @@ ng_module( "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "//src/material/tabs", "//src/material/toolbar", "@npm//@angular/forms", diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts index 91c4e03021d7..84a1cf469278 100644 --- a/src/dev-app/input/input-demo.ts +++ b/src/dev-app/input/input-demo.ts @@ -17,7 +17,7 @@ import {ErrorStateMatcher} from '@angular/material/core'; import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatTabsModule} from '@angular/material/tabs'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -41,7 +41,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatTabsModule, MatToolbarModule, ReactiveFormsModule, diff --git a/src/dev-app/mdc-checkbox/BUILD.bazel b/src/dev-app/mdc-checkbox/BUILD.bazel index 7192984efbc5..532d14c163b8 100644 --- a/src/dev-app/mdc-checkbox/BUILD.bazel +++ b/src/dev-app/mdc-checkbox/BUILD.bazel @@ -12,10 +12,10 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-checkbox", - "//src/material-experimental/mdc-select", "//src/material/core", "//src/material/form-field", "//src/material/input", + "//src/material/select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts index 89ae30c4e73c..31f3edbba73b 100644 --- a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts +++ b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts @@ -13,7 +13,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core'; import {MatInputModule} from '@angular/material/input'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectModule} from '@angular/material/select'; import {CommonModule} from '@angular/common'; export interface Task { diff --git a/src/dev-app/mdc-dialog/BUILD.bazel b/src/dev-app/mdc-dialog/BUILD.bazel index d3856fee586b..0ba07ffcc0b3 100644 --- a/src/dev-app/mdc-dialog/BUILD.bazel +++ b/src/dev-app/mdc-dialog/BUILD.bazel @@ -14,10 +14,10 @@ ng_module( "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-dialog", - "//src/material-experimental/mdc-select", "//src/material/card", "//src/material/form-field", "//src/material/input", + "//src/material/select", ], ) diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts index 990816aeab05..127c065ddb34 100644 --- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts +++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts @@ -21,7 +21,7 @@ import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectModule} from '@angular/material/select'; import {DragDropModule} from '@angular/cdk/drag-drop'; const defaultDialogConfig = new MatDialogConfig(); diff --git a/src/dev-app/mdc-select/BUILD.bazel b/src/dev-app/mdc-select/BUILD.bazel index 77645383e204..d1854a5fe474 100644 --- a/src/dev-app/mdc-select/BUILD.bazel +++ b/src/dev-app/mdc-select/BUILD.bazel @@ -11,11 +11,11 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-select", "//src/material/card", "//src/material/form-field", "//src/material/icon", "//src/material/input", + "//src/material/select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-select/mdc-select-demo.ts b/src/dev-app/mdc-select/mdc-select-demo.ts index 0751a2378891..0c53622e6927 100644 --- a/src/dev-app/mdc-select/mdc-select-demo.ts +++ b/src/dev-app/mdc-select/mdc-select-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; -import {MatSelectChange, MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectChange, MatSelectModule} from '@angular/material/select'; import {FloatLabelType} from '@angular/material/form-field'; import {CommonModule} from '@angular/common'; import {MatCardModule} from '@angular/material/card'; diff --git a/src/dev-app/mdc-snack-bar/BUILD.bazel b/src/dev-app/mdc-snack-bar/BUILD.bazel index a54b4d110c44..260e9b0dd802 100644 --- a/src/dev-app/mdc-snack-bar/BUILD.bazel +++ b/src/dev-app/mdc-snack-bar/BUILD.bazel @@ -13,10 +13,10 @@ ng_module( "//src/cdk/bidi", "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-checkbox", - "//src/material-experimental/mdc-select", "//src/material-experimental/mdc-snack-bar", "//src/material/form-field", "//src/material/input", + "//src/material/select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts index 5b669e96c7cd..fc66f4083ff5 100644 --- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts +++ b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts @@ -20,7 +20,7 @@ import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatInputModule} from '@angular/material/input'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectModule} from '@angular/material/select'; @Component({ selector: 'mdc-snack-bar-demo', diff --git a/src/dev-app/mdc-tooltip/BUILD.bazel b/src/dev-app/mdc-tooltip/BUILD.bazel index 0c9f786c28bd..173fa69dc61f 100644 --- a/src/dev-app/mdc-tooltip/BUILD.bazel +++ b/src/dev-app/mdc-tooltip/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-select", "//src/material/form-field", "//src/material/input", + "//src/material/select", "//src/material/tooltip", "@npm//@angular/common", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts index 633b1b9c2137..a36751a6b6e5 100644 --- a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts +++ b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts @@ -12,7 +12,7 @@ import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatInputModule} from '@angular/material/input'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectModule} from '@angular/material/select'; @Component({ selector: 'mdc-tooltip-demo', diff --git a/src/dev-app/select/BUILD.bazel b/src/dev-app/select/BUILD.bazel index 8d47e4282513..d7ff1386c0e3 100644 --- a/src/dev-app/select/BUILD.bazel +++ b/src/dev-app/select/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index 33022825f549..3f5788953dde 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -16,7 +16,7 @@ import {MatDialog, MatDialogModule} from '@angular/material/dialog'; import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectChange, MatSelectModule} from '@angular/material/select'; +import {MatSelectChange, MatLegacySelectModule} from '@angular/material/legacy-select'; /** Error any time control is invalid */ export class MyErrorStateMatcher implements ErrorStateMatcher { @@ -42,7 +42,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, ReactiveFormsModule, ], }) diff --git a/src/dev-app/snack-bar/BUILD.bazel b/src/dev-app/snack-bar/BUILD.bazel index c0a3a0cb5718..de8cbdb51415 100644 --- a/src/dev-app/snack-bar/BUILD.bazel +++ b/src/dev-app/snack-bar/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( "//src/material/checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "//src/material/snack-bar", "@npm//@angular/forms", ], diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts index 2795c0285e04..39d5d9d633f8 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.ts +++ b/src/dev-app/snack-bar/snack-bar-demo.ts @@ -14,7 +14,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import { MatSnackBar, MatSnackBarConfig, @@ -36,7 +36,7 @@ import { MatCheckboxModule, MatLegacyFormFieldModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatSnackBarModule, ], }) diff --git a/src/dev-app/stepper/BUILD.bazel b/src/dev-app/stepper/BUILD.bazel index f628f9adb613..306727503fdb 100644 --- a/src/dev-app/stepper/BUILD.bazel +++ b/src/dev-app/stepper/BUILD.bazel @@ -12,7 +12,7 @@ ng_module( "//src/material/core", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "//src/material/stepper", "@npm//@angular/forms", ], diff --git a/src/dev-app/stepper/stepper-demo.ts b/src/dev-app/stepper/stepper-demo.ts index 05838a49ce83..902001701662 100644 --- a/src/dev-app/stepper/stepper-demo.ts +++ b/src/dev-app/stepper/stepper-demo.ts @@ -20,7 +20,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatStepperModule} from '@angular/material/stepper'; @Component({ @@ -35,7 +35,7 @@ import {MatStepperModule} from '@angular/material/stepper'; MatLegacyFormFieldModule, MatLegacyInputModule, MatStepperModule, - MatSelectModule, + MatLegacySelectModule, ReactiveFormsModule, ], }) diff --git a/src/dev-app/toolbar/BUILD.bazel b/src/dev-app/toolbar/BUILD.bazel index 1e5fc75bc1f3..9f8be5bd9cc4 100644 --- a/src/dev-app/toolbar/BUILD.bazel +++ b/src/dev-app/toolbar/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( "//src/material/icon", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "//src/material/toolbar", ], ) diff --git a/src/dev-app/toolbar/toolbar-demo.ts b/src/dev-app/toolbar/toolbar-demo.ts index e251a8a87c44..9bd62d5c2839 100644 --- a/src/dev-app/toolbar/toolbar-demo.ts +++ b/src/dev-app/toolbar/toolbar-demo.ts @@ -12,7 +12,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatToolbarModule} from '@angular/material/toolbar'; @Component({ @@ -25,7 +25,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatToolbarModule, ToolbarExamplesModule, ], diff --git a/src/dev-app/virtual-scroll/BUILD.bazel b/src/dev-app/virtual-scroll/BUILD.bazel index 6d78e478e9e3..c5739729a2b6 100644 --- a/src/dev-app/virtual-scroll/BUILD.bazel +++ b/src/dev-app/virtual-scroll/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/material/button", "//src/material/legacy-form-field", "//src/material/legacy-input", - "//src/material/select", + "//src/material/legacy-select", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts index 888b5410a9dc..49ed0b57ca86 100644 --- a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts +++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts @@ -14,7 +14,7 @@ import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatSelectModule} from '@angular/material/select'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {BehaviorSubject} from 'rxjs'; import {CdkScrollingExamplesModule} from '@angular/components-examples/cdk/scrolling'; @@ -37,7 +37,7 @@ type State = { MatButtonModule, MatLegacyFormFieldModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, ScrollingModule, CdkScrollingExamplesModule, ], diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index 9a27c548401d..8faab20ba91d 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -42,8 +42,6 @@ mdc-progress-spinner-theme; @forward './mdc-radio/radio-theme' as mdc-radio-* show mdc-radio-color, mdc-radio-typography, mdc-radio-density, mdc-radio-theme; -@forward './mdc-select/select-theme' as mdc-select-* show mdc-select-color, mdc-select-typography, - mdc-select-density, mdc-select-theme; @forward './mdc-slide-toggle/slide-toggle-theme' as mdc-slide-toggle-* show mdc-slide-toggle-color, mdc-slide-toggle-typography, mdc-slide-toggle-density, mdc-slide-toggle-theme; @forward './mdc-slider/slider-theme' as mdc-slider-* show mdc-slider-color, diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl index d4c1f951909d..7fb75ca0e7aa 100644 --- a/src/material-experimental/config.bzl +++ b/src/material-experimental/config.bzl @@ -21,8 +21,6 @@ entryPoints = [ "mdc-progress-spinner/testing", "mdc-radio", "mdc-radio/testing", - "mdc-select", - "mdc-select/testing", "mdc-slide-toggle", "mdc-slide-toggle/testing", "mdc-slider", diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss index 543d38c3ee77..f33da4d614f3 100644 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ b/src/material-experimental/mdc-core/density/_all-density.import.scss @@ -23,11 +23,6 @@ $mat-mdc-chips-mdc-chips-ink-color-default; @forward '../../mdc-radio/radio-theme' as mat-mdc-radio-* hide $mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color, $mat-mdc-radio-mdc-radio-unchecked-color; -@forward '../../mdc-select/select-theme' hide color, density, theme, typography; -@forward '../../mdc-select/select-theme' as mat-mdc-select-* hide -$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, -$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, -$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color; @forward '../../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography; @forward '../../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide $mat-mdc-slide-toggle-mdc-switch-baseline-theme-color, diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index 8a79dfecf093..5706b59eaa14 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -31,7 +31,6 @@ sass_library( "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib", "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib", "//src/material-experimental/mdc-radio:mdc_radio_scss_lib", - "//src/material-experimental/mdc-select:mdc_select_scss_lib", "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib", "//src/material-experimental/mdc-slider:mdc_slider_scss_lib", "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib", diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss index 032dd5ba52a7..e2a37ac84b87 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss @@ -23,11 +23,6 @@ $mat-mdc-chips-mdc-chips-ink-color-default; @forward '../../mdc-radio/radio-theme' as mat-mdc-radio-* hide $mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color, $mat-mdc-radio-mdc-radio-unchecked-color; -@forward '../../mdc-select/select-theme' hide color, density, theme, typography; -@forward '../../mdc-select/select-theme' as mat-mdc-select-* hide -$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, -$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, -$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color; @forward '../../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography; @forward '../../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide $mat-mdc-slide-toggle-mdc-switch-baseline-theme-color, @@ -70,7 +65,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table- @import '../../mdc-list/list-theme'; @import '../../mdc-menu/menu-theme'; @import '../../mdc-radio/radio-theme'; -@import '../../mdc-select/select-theme'; @import '../../mdc-slide-toggle/slide-toggle-theme'; @import '../../mdc-snack-bar/snack-bar-theme'; @import '../../mdc-tabs/tabs-theme'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss index cabc571723f8..7add7f13ce86 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.scss @@ -11,7 +11,6 @@ @use '../../mdc-list/list-theme'; @use '../../mdc-menu/menu-theme'; @use '../../mdc-radio/radio-theme'; -@use '../../mdc-select/select-theme'; @use '../../mdc-slide-toggle/slide-toggle-theme'; @use '../../mdc-slider/slider-theme'; @use '../../mdc-snack-bar/snack-bar-theme'; @@ -38,7 +37,7 @@ @include mat.progress-bar-theme($theme-or-color-config); @include progress-spinner-theme.theme($theme-or-color-config); @include radio-theme.theme($theme-or-color-config); - @include select-theme.theme($theme-or-color-config); + @include mat.select-theme($theme-or-color-config); @include slide-toggle-theme.theme($theme-or-color-config); @include slider-theme.theme($theme-or-color-config); @include snack-bar-theme.theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss index 231fadc3d7af..517976c883e2 100644 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss @@ -23,11 +23,6 @@ $mat-mdc-chips-mdc-chips-ink-color-default; @forward '../../mdc-radio/radio-theme' as mat-mdc-radio-* hide $mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color, $mat-mdc-radio-mdc-radio-unchecked-color; -@forward '../../mdc-select/select-theme' hide color, density, theme, typography; -@forward '../../mdc-select/select-theme' as mat-mdc-select-* hide -$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, -$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, -$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color; @forward '../../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography; @forward '../../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide $mat-mdc-slide-toggle-mdc-switch-baseline-theme-color, diff --git a/src/material-experimental/mdc-paginator/BUILD.bazel b/src/material-experimental/mdc-paginator/BUILD.bazel index a268e3099f1f..f46ace0a0971 100644 --- a/src/material-experimental/mdc-paginator/BUILD.bazel +++ b/src/material-experimental/mdc-paginator/BUILD.bazel @@ -18,8 +18,8 @@ ng_module( assets = [":paginator.css"] + glob(["**/*.html"]), deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-select", "//src/material/paginator", + "//src/material/select", "//src/material/tooltip", "@npm//@angular/common", "@npm//@angular/core", @@ -56,8 +56,8 @@ ng_test_library( deps = [ ":mdc-paginator", "//src/cdk/testing/private", - "//src/material-experimental/mdc-select", "//src/material/core", + "//src/material/select", "@npm//@angular/platform-browser", ], ) diff --git a/src/material-experimental/mdc-paginator/module.ts b/src/material-experimental/mdc-paginator/module.ts index 43770112b595..412d0b5b0b7b 100644 --- a/src/material-experimental/mdc-paginator/module.ts +++ b/src/material-experimental/mdc-paginator/module.ts @@ -10,7 +10,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; +import {MatSelectModule} from '@angular/material/select'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatPaginator} from './paginator'; diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts index af9a86dfebf3..889d5d8b3d00 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material-experimental/mdc-paginator/paginator.spec.ts @@ -1,9 +1,9 @@ import {ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing'; import {Component, ViewChild, Type, Provider} from '@angular/core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {dispatchMouseEvent} from '../../cdk/testing/private'; +import {dispatchMouseEvent} from '@angular/cdk/testing/private'; import {ThemePalette} from '@angular/material/core'; -import {MatSelect} from '@angular/material-experimental/mdc-select'; +import {MatSelect} from '@angular/material/select'; import {By} from '@angular/platform-browser'; import { MatPaginatorModule, diff --git a/src/material-experimental/mdc-paginator/testing/BUILD.bazel b/src/material-experimental/mdc-paginator/testing/BUILD.bazel index 66954e1ac5ff..bad9adc68fe9 100644 --- a/src/material-experimental/mdc-paginator/testing/BUILD.bazel +++ b/src/material-experimental/mdc-paginator/testing/BUILD.bazel @@ -10,8 +10,8 @@ ts_library( ), deps = [ "//src/cdk/testing", - "//src/material-experimental/mdc-select/testing", "//src/material/paginator/testing", + "//src/material/select/testing", ], ) diff --git a/src/material-experimental/mdc-paginator/testing/paginator-harness.ts b/src/material-experimental/mdc-paginator/testing/paginator-harness.ts index 0df6600edeb6..0e47dcc76622 100644 --- a/src/material-experimental/mdc-paginator/testing/paginator-harness.ts +++ b/src/material-experimental/mdc-paginator/testing/paginator-harness.ts @@ -7,7 +7,7 @@ */ import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import {MatSelectHarness} from '@angular/material-experimental/mdc-select/testing'; +import {MatSelectHarness} from '@angular/material/select/testing'; import { PaginatorHarnessFilters, _MatPaginatorHarnessBase, diff --git a/src/material-experimental/mdc-select/BUILD.bazel b/src/material-experimental/mdc-select/BUILD.bazel deleted file mode 100644 index 6d7b83d1acab..000000000000 --- a/src/material-experimental/mdc-select/BUILD.bazel +++ /dev/null @@ -1,69 +0,0 @@ -load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite", "sass_binary", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "mdc-select", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - "harness/**", - ], - ), - assets = [":select_scss"] + glob(["**/*.html"]), - deps = [ - "//src/cdk/overlay", - "//src/material/core", - "//src/material/form-field", - "//src/material/select", - ], -) - -sass_library( - name = "mdc_select_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "select_scss", - src = "select.scss", - deps = [ - "//:mdc_sass_lib", - "//src/cdk:sass_lib", - "//src/material:sass_lib", - ], -) - -ng_test_library( - name = "mdc_select_tests_lib", - srcs = glob(["**/*.spec.ts"]), - deps = [ - ":mdc-select", - "//src/cdk/a11y", - "//src/cdk/bidi", - "//src/cdk/keycodes", - "//src/cdk/overlay", - "//src/cdk/platform", - "//src/cdk/scrolling", - "//src/cdk/testing/private", - "//src/material/core", - "//src/material/form-field", - "//src/material/select", - "@npm//@angular/forms", - "@npm//@angular/platform-browser", - "@npm//rxjs", - ], -) - -ng_web_test_suite( - name = "unit_tests", - deps = [ - ":mdc_select_tests_lib", - ], -) diff --git a/src/material-experimental/mdc-select/README.md b/src/material-experimental/mdc-select/README.md deleted file mode 100644 index 5516a437221c..000000000000 --- a/src/material-experimental/mdc-select/README.md +++ /dev/null @@ -1,109 +0,0 @@ -This is prototype of an alternate version of `` built on top of -[MDC Web](https://github.com/material-components/material-components-web). It demonstrates how -Angular Material could use MDC Web under the hood while still exposing the same API Angular users as -the existing ``. This component is experimental and should not be used in production. - -## How to use -Assuming your application is already up and running using Angular Material, you can add this -component by following these steps: - -1. Install Angular Material Experimental & MDC WEB: - - ```bash - npm i material-components-web @angular/material-experimental - ``` - -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is - needed for the Sass compiler to be able to find the MDC Web Sass files. - - ```json - ... - "styles": [ - "src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] - }, - ... - ``` - -3. Import the experimental `MatSelectModule` and add it to the module that declares your - component: - - ```ts - import {MatSelectModule} from '@angular/material-experimental/mdc-select'; - - @NgModule({ - declarations: [MyComponent], - imports: [MatSelectModule], - }) - export class MyModule {} - ``` - -4. Add use `` in your component's template, just like you would the normal - ``: - - ```html - - Pick a drink - - - Water - Soda - Coffee - - - ``` - -5. Add the theme and typography mixins to your Sass. (There is currently no pre-built CSS option for - the experimental ``): - - ```scss - @use '@angular/material' as mat; - @use '@angular/material-experimental' as mat-experimental; - - $my-primary: mat.define-palette(mat.$indigo-palette); - $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); - $my-theme: mat.define-light-theme(( - color: ( - primary: $my-primary, - accent: $my-accent - ) - )); - - @include mat-experimental.mdc-select-theme($my-theme); - @include mat-experimental.mdc-select-typography($my-theme); - ``` - -## API differences -The experimental select API closely matches the -[API of the standard select](https://material.angular.io/components/select/api). -`@angular/material-experimental/mdc-select` exports symbols with the same name and public interface -as all of the symbols found under `@angular/material/select`, except for the following -differences: - -* The experimental `MatSelect` doesn't implement the logic from the standard select where it -tries to align the selected option on top of the trigger text. Instead, the panel is positioned -either above or below the trigger, depending on how much space is available. As a result, the -`disableOptionCentering` input is essentially a no-op which will be deprecated eventually. - -## Replacing the standard select in an existing app -Because the experimental API mirrors the API for the standard select, it can easily be swapped in -by just changing the import paths. There is currently no schematic for this, but you can run the -following string replace across your TypeScript files: - -```bash -grep -lr --include="*.ts" --exclude-dir="node_modules" \ - --exclude="*.d.ts" "['\"]@angular/material/select['\"]" | xargs sed -i \ - "s/['\"]@angular\/material\/select['\"]/'@angular\/material-experimental\/mdc-select'/g" -``` - -CSS styles and tests that depend on implementation details of `mat-select` (such as getting elements -from the template by class name) will need to be manually updated. - -There are some small visual differences between this select and the standard `mat-select`. This -select matches the Material Design spec closer which makes it slightly taller. Furthermore, the -experimental `mat-select` allows the text inside of `mat-option` to wrap to multiple lines, whereas -previously it was limited to one line. diff --git a/src/material-experimental/mdc-select/_select-theme.import.scss b/src/material-experimental/mdc-select/_select-theme.import.scss deleted file mode 100644 index c3364089dc61..000000000000 --- a/src/material-experimental/mdc-select/_select-theme.import.scss +++ /dev/null @@ -1,7 +0,0 @@ -@forward 'select-theme' hide color, density, theme, typography; -@forward 'select-theme' as mat-mdc-select-* hide -$mat-mdc-select-mdc-select-disabled-dropdown-icon-color, -$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color, -$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color, -mat-mdc-select-get-mdc-focused-text-color; - diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss deleted file mode 100644 index 792240960856..000000000000 --- a/src/material-experimental/mdc-select/_select-theme.scss +++ /dev/null @@ -1,99 +0,0 @@ -@use '@angular/material' as mat; -@use '@material/theme/theme-color' as mdc-theme-color; -@use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list/evolution-mixins' as mdc-list; -@use '@material/typography' as mdc-typography; - - -// Gets the color to use for some text that is highlighted while a select has focus. -@function _get-mdc-focused-text-color($palette) { - @return rgba(mdc-theme-color.prop-value($palette), 0.87); -} - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - - @include mat.private-using-mdc-theme($config) { - $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38); - @include mdc-menu-surface.core-styles(mat.$private-mdc-theme-styles-query); - @include mdc-list.without-ripple(mat.$private-mdc-theme-styles-query); - - .mat-mdc-select-value { - color: rgba(mdc-theme-color.prop-value(on-surface), 0.87); - } - - .mat-mdc-select-placeholder { - color: rgba(mdc-theme-color.prop-value(on-surface), 0.6); - } - - .mat-mdc-select-disabled .mat-mdc-select-value { - color: $disabled-color; - } - - .mat-mdc-select-arrow { - color: rgba(mdc-theme-color.prop-value(on-surface), 0.54); - } - - .mat-mdc-form-field { - &.mat-focused { - &.mat-primary .mat-mdc-select-arrow { - color: _get-mdc-focused-text-color(primary); - } - - &.mat-accent .mat-mdc-select-arrow { - color: _get-mdc-focused-text-color(secondary); - } - - &.mat-warn .mat-mdc-select-arrow { - color: _get-mdc-focused-text-color(error); - } - } - - .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow { - color: _get-mdc-focused-text-color(error); - } - - .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow { - color: $disabled-color; - } - } - } -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - @include mat.private-using-mdc-typography($config) { - @include mdc-menu-surface.core-styles(mat.$private-mdc-typography-styles-query); - - .mat-mdc-select-panel { - @include mdc-list.list-base(mat.$private-mdc-typography-styles-query); - } - - .mat-mdc-select { - @include mdc-typography.typography(body1, $query: mat.$private-mdc-typography-styles-query); - } - } -} - -@mixin density($config-or-theme) {} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-select') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} - diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html deleted file mode 100644 index 3a1c41419414..000000000000 --- a/src/material-experimental/mdc-select/select.html +++ /dev/null @@ -1,63 +0,0 @@ - -
-
- {{placeholder}} - - {{triggerValue}} - - -
- -
-
- - - - -
-
-
- - -
- -
- diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss deleted file mode 100644 index 367f4b5ab029..000000000000 --- a/src/material-experimental/mdc-select/select.scss +++ /dev/null @@ -1,178 +0,0 @@ -@use 'sass:math'; -@use '@angular/cdk'; -@use '@angular/material' as mat; -@use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list/evolution-mixins' as mdc-list; - -$mat-select-arrow-size: 5px !default; -$mat-select-arrow-margin: 4px !default; -$mat-select-panel-max-height: 275px !default; -$mat-select-placeholder-arrow-space: 2 * - ($mat-select-arrow-size + $mat-select-arrow-margin); -$leading-width: 12px !default; -$scale: 0.75 !default; - -// We base the select panel styling on top of MDC's menu styles and we -// implement the trigger ourselves since MDC doesn't provide an equivalent. - -@include mdc-menu-surface.core-styles($query: structure); - -.mat-mdc-select { - display: inline-block; - width: 100%; - outline: none; -} - -.mat-mdc-select-trigger { - display: inline-flex; - align-items: center; - cursor: pointer; - position: relative; - box-sizing: border-box; - width: 100%; - - .mat-mdc-select-disabled & { - @include mat.private-user-select(none); - cursor: default; - } -} - -.mat-mdc-select-value { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mat-mdc-select-value-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.mat-mdc-select-arrow-wrapper { - height: 24px; - flex-shrink: 0; - display: inline-flex; - align-items: center; - - // When used in a box appearance form-field the arrow should be shifted up 40%. - .mat-form-field-appearance-fill & { - transform: translateY(-40%); - } -} - -.mat-mdc-select-arrow { - width: $mat-select-arrow-size * 2; - height: $mat-select-arrow-size; - position: relative; - - svg { - fill: currentColor; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - @include cdk.high-contrast(active, off) { - // On Chromium browsers the `currentColor` blends in with the - // background for SVGs so we have to fall back to `CanvasText`. - fill: CanvasText; - - .mat-mdc-select-disabled & { - fill: GrayText; - } - } - } -} - -// Note that the `.mdc-menu-surface` is here in order to bump up the specificity -// and avoid interference with `mat-menu` which uses the same mixins from MDC. -.mdc-menu-surface.mat-mdc-select-panel { - width: 100%; // Ensures that the panel matches the overlay width. - max-height: $mat-select-panel-max-height; - position: static; // MDC uses `absolute` by default which will throw off our positioning. - outline: 0; - - @include mdc-list.list-base($query: structure); - @include cdk.high-contrast(active, off) { - outline: solid 1px; - } - - .cdk-overlay-pane:not(.mat-mdc-select-panel-above) & { - border-top-left-radius: 0; - border-top-right-radius: 0; - transform-origin: top center; - } - - .mat-mdc-select-panel-above & { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - transform-origin: bottom center; - } -} - -.mat-mdc-select-placeholder { - // Delay the transition until the label has animated about a third of the way through, in - // order to prevent the placeholder from overlapping for a split second. - transition: color mat.$private-swift-ease-out-duration - math.div(mat.$private-swift-ease-out-duration, 3) - mat.$private-swift-ease-out-timing-function; - - ._mat-animation-noopable & { - transition: none; - } - - .mat-form-field-hide-placeholder & { - color: transparent; - - // Overwrite browser specific CSS properties that can overwrite the `color` property. - // Some developers seem to use this approach to easily overwrite the placeholder / label color. - -webkit-text-fill-color: transparent; - - // Remove the transition to prevent the placeholder - // from overlapping when the label comes back down. - transition: none; - // Prevents the '...' from showing on the parent element. - display: block; - } -} - -// Our MDC form field implementation is based on the MDC text field which doesn't include styles -// for select. The select specific styles are not present as they don't use their text field as a -// container. Below are the styles to account for the select arrow icon at the end. -.mat-mdc-form-field-type-mat-select { - &.mat-form-field-appearance-fill { - .mat-mdc-floating-label { - max-width: calc(100% - #{$mat-select-placeholder-arrow-space}); - } - - .mdc-floating-label--float-above { - $arrow-scale: math.div($mat-select-placeholder-arrow-space, $scale); - max-width: calc(100% / #{$scale} - #{$arrow-scale}); - } - } - &.mat-form-field-appearance-outline { - .mdc-notched-outline__notch { - max-width: calc(100% - #{2 * ($mat-select-placeholder-arrow-space + $leading-width)}); - } - - .mdc-text-field--label-floating .mdc-notched-outline__notch { - max-width: calc(100% - #{$leading-width * 2}); - } - } -} - -// Used to prevent inline elements from collapsing if their text bindings -// become empty. This is preferrable to inserting a blank space, because the -// space can be read out by screen readers (see #21725). -.mat-mdc-select-min-line:empty::before { - content: ' '; - white-space: pre; - width: 1px; - display: inline-block; - - // Prevents some browsers from rendering the element in high contrast mode. Use `visibility` - // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter. - visibility: hidden; -} diff --git a/src/material-experimental/mdc-select/select.ts b/src/material-experimental/mdc-select/select.ts deleted file mode 100644 index f20d585fc37d..000000000000 --- a/src/material-experimental/mdc-select/select.ts +++ /dev/null @@ -1,199 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - AfterViewInit, - ChangeDetectionStrategy, - Component, - ContentChild, - ContentChildren, - Directive, - ElementRef, - OnInit, - QueryList, - ViewEncapsulation, -} from '@angular/core'; -import {MAT_SELECT_TRIGGER, _MatSelectBase} from '@angular/material/select'; -import { - MatOptgroup, - MatOption, - MAT_OPTGROUP, - MAT_OPTION_PARENT_COMPONENT, - _countGroupLabelsBeforeOption, - _getOptionScrollPosition, -} from '@angular/material/core'; -import {CdkOverlayOrigin, ConnectedPosition} from '@angular/cdk/overlay'; -import {MatFormFieldControl} from '@angular/material/form-field'; -import {takeUntil} from 'rxjs/operators'; -import {matSelectAnimations} from './select-animations'; - -/** Change event object that is emitted when the select value has changed. */ -export class MatSelectChange { - constructor( - /** Reference to the select that emitted the change event. */ - public source: MatSelect, - /** Current value of the select that emitted the event. */ - public value: any, - ) {} -} - -/** - * Allows the user to customize the trigger that is displayed when the select has a value. - */ -@Directive({ - selector: 'mat-select-trigger', - providers: [{provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger}], -}) -export class MatSelectTrigger {} - -@Component({ - selector: 'mat-select', - exportAs: 'matSelect', - templateUrl: 'select.html', - styleUrls: ['select.css'], - inputs: ['disabled', 'disableRipple', 'tabIndex'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - 'role': 'combobox', - 'aria-autocomplete': 'none', - 'aria-haspopup': 'listbox', - 'class': 'mat-mdc-select', - '[attr.id]': 'id', - '[attr.tabindex]': 'tabIndex', - '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null', - '[attr.aria-expanded]': 'panelOpen', - '[attr.aria-label]': 'ariaLabel || null', - '[attr.aria-required]': 'required.toString()', - '[attr.aria-disabled]': 'disabled.toString()', - '[attr.aria-invalid]': 'errorState', - '[attr.aria-activedescendant]': '_getAriaActiveDescendant()', - '[class.mat-mdc-select-disabled]': 'disabled', - '[class.mat-mdc-select-invalid]': 'errorState', - '[class.mat-mdc-select-required]': 'required', - '[class.mat-mdc-select-empty]': 'empty', - '[class.mat-mdc-select-multiple]': 'multiple', - '(keydown)': '_handleKeydown($event)', - '(focus)': '_onFocus()', - '(blur)': '_onBlur()', - }, - animations: [matSelectAnimations.transformPanel], - providers: [ - {provide: MatFormFieldControl, useExisting: MatSelect}, - {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect}, - ], -}) -export class MatSelect extends _MatSelectBase implements OnInit, AfterViewInit { - @ContentChildren(MatOption, {descendants: true}) options: QueryList; - @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList; - @ContentChild(MAT_SELECT_TRIGGER) customTrigger: MatSelectTrigger; - - _positions: ConnectedPosition[] = [ - { - originX: 'start', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top', - }, - { - originX: 'start', - originY: 'top', - overlayX: 'start', - overlayY: 'bottom', - panelClass: 'mat-mdc-select-panel-above', - }, - ]; - - /** Ideal origin for the overlay panel. */ - _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined; - - /** Width of the overlay panel. */ - _overlayWidth: number; - - override get shouldLabelFloat(): boolean { - // Since the panel doesn't overlap the trigger, we - // want the label to only float when there's a value. - return this.panelOpen || !this.empty || (this.focused && !!this.placeholder); - } - - override ngOnInit() { - super.ngOnInit(); - this._viewportRuler - .change() - .pipe(takeUntil(this._destroy)) - .subscribe(() => { - if (this.panelOpen) { - this._overlayWidth = this._getOverlayWidth(); - this._changeDetectorRef.detectChanges(); - } - }); - } - - ngAfterViewInit() { - // Note that it's important that we read this in `ngAfterViewInit`, because - // reading it earlier will cause the form field to return a different element. - if (this._parentFormField) { - this._preferredOverlayOrigin = this._parentFormField.getConnectedOverlayOrigin(); - } - } - - override open() { - this._overlayWidth = this._getOverlayWidth(); - super.open(); - // Required for the MDC form field to pick up when the overlay has been opened. - this.stateChanges.next(); - } - - override close() { - super.close(); - // Required for the MDC form field to pick up when the overlay has been closed. - this.stateChanges.next(); - } - - /** Scrolls the active option into view. */ - protected _scrollOptionIntoView(index: number): void { - const option = this.options.toArray()[index]; - - if (option) { - const panel: HTMLElement = this.panel.nativeElement; - const labelCount = _countGroupLabelsBeforeOption(index, this.options, this.optionGroups); - const element = option._getHostElement(); - - if (index === 0 && labelCount === 1) { - // If we've got one group label before the option and we're at the top option, - // scroll the list to the top. This is better UX than scrolling the list to the - // top of the option, because it allows the user to read the top group's label. - panel.scrollTop = 0; - } else { - panel.scrollTop = _getOptionScrollPosition( - element.offsetTop, - element.offsetHeight, - panel.scrollTop, - panel.offsetHeight, - ); - } - } - } - - protected _positioningSettled() { - this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0); - } - - protected _getChangeEvent(value: any) { - return new MatSelectChange(this, value); - } - - /** Gets how wide the overlay panel should be. */ - private _getOverlayWidth() { - const refToMeasure = - this._preferredOverlayOrigin instanceof CdkOverlayOrigin - ? this._preferredOverlayOrigin.elementRef - : this._preferredOverlayOrigin || this._elementRef; - return refToMeasure.nativeElement.getBoundingClientRect().width; - } -} diff --git a/src/material-experimental/mdc-select/testing/select-harness.spec.ts b/src/material-experimental/mdc-select/testing/select-harness.spec.ts deleted file mode 100644 index af2288f16e48..000000000000 --- a/src/material-experimental/mdc-select/testing/select-harness.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {runHarnessTests} from '@angular/material/select/testing/shared.spec'; -import {MatSelectHarness} from './index'; - -describe('MDC-based MatSelectHarness', () => { - runHarnessTests(MatFormFieldModule, MatSelectModule, MatSelectHarness as any); -}); diff --git a/src/material-experimental/mdc-select/testing/select-harness.ts b/src/material-experimental/mdc-select/testing/select-harness.ts deleted file mode 100644 index 75fda22f08af..000000000000 --- a/src/material-experimental/mdc-select/testing/select-harness.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import {_MatSelectHarnessBase} from '@angular/material/select/testing'; -import { - MatOptionHarness, - MatOptgroupHarness, - OptionHarnessFilters, - OptgroupHarnessFilters, -} from '@angular/material/core/testing'; -import {SelectHarnessFilters} from './select-harness-filters'; - -/** Harness for interacting with an MDC-based mat-select in tests. */ -export class MatSelectHarness extends _MatSelectHarnessBase< - typeof MatOptionHarness, - MatOptionHarness, - OptionHarnessFilters, - typeof MatOptgroupHarness, - MatOptgroupHarness, - OptgroupHarnessFilters -> { - static hostSelector = '.mat-mdc-select'; - protected _prefix = 'mat-mdc'; - protected _optionClass = MatOptionHarness; - protected _optionGroupClass = MatOptgroupHarness; - - /** - * Gets a `HarnessPredicate` that can be used to search for a select with specific attributes. - * @param options Options for filtering which select instances are considered a match. - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: SelectHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} diff --git a/src/material/_index.scss b/src/material/_index.scss index f21e6930bfad..f5f5544d387e 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -115,6 +115,8 @@ progress-spinner-theme, progress-spinner-color, progress-spinner-typography; @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography; @forward './select/select-theme' as select-* show select-theme, select-color, select-typography; +@forward './legacy-select/select-theme' as legacy-select-* show legacy-select-theme, + legacy-select-color, legacy-select-typography; @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color, sidenav-typography; @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, diff --git a/src/material/_theming.scss b/src/material/_theming.scss index 5d144286c123..97a03f94bf32 100644 --- a/src/material/_theming.scss +++ b/src/material/_theming.scss @@ -29,7 +29,7 @@ @forward './legacy-progress-bar/progress-bar-legacy-index'; @forward './progress-spinner/progress-spinner-legacy-index'; @forward './radio/radio-legacy-index'; -@forward './select/select-legacy-index'; +@forward './legacy-select/select-legacy-index'; @forward './sidenav/sidenav-legacy-index'; @forward './slide-toggle/slide-toggle-legacy-index'; @forward './slider/slider-legacy-index'; diff --git a/src/material/config.bzl b/src/material/config.bzl index 7d98bd2b95cb..c845e248eb50 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -57,6 +57,9 @@ entryPoints = [ "radio", "radio/testing", "select", + "select/testing", + "legacy-select", + "legacy-select/testing", "sidenav", "sidenav/testing", "slide-toggle", @@ -81,7 +84,6 @@ entryPoints = [ "tooltip/testing", "tree", "tree/testing", - "select/testing", ] # List of all non-testing entry-points of the Angular Material package. diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index 822fbbec18d7..8146a37adda5 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -12,6 +12,7 @@ @use '../../../input/input-theme'; @use '../../../core/option/option-theme'; @use '../../../core/option/optgroup-theme'; +@use '../../../select/select-theme'; @mixin private-all-unmigrated-component-densities($config) { @include expansion-theme.density($config); @@ -45,6 +46,7 @@ @include input-theme.density($config); @include option-theme.density($config); @include optgroup-theme.density($config); + @include select-theme.density($config); @include private-all-unmigrated-component-densities($config); } diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 0b083d51a1aa..17cfa24211ba 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -56,7 +56,6 @@ @include paginator-theme.theme($theme-or-color-config); @include progress-spinner-theme.theme($theme-or-color-config); @include radio-theme.theme($theme-or-color-config); - @include select-theme.theme($theme-or-color-config); @include sidenav-theme.theme($theme-or-color-config); @include slide-toggle-theme.theme($theme-or-color-config); @include slider-theme.theme($theme-or-color-config); @@ -78,6 +77,7 @@ @include tooltip-theme.theme($theme-or-color-config); @include form-field-theme.theme($theme-or-color-config); @include input-theme.theme($theme-or-color-config); + @include select-theme.theme($theme-or-color-config); @include private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index cfc88e6ce3db..8839abeaf9b4 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -22,7 +22,6 @@ @use '../../../paginator/paginator-theme'; @use '../../../progress-spinner/progress-spinner-theme'; @use '../../../radio/radio-theme'; -@use '../../../select/select-theme'; @use '../../../sidenav/sidenav-theme'; @use '../../../slide-toggle/slide-toggle-theme'; @use '../../../slider/slider-theme'; @@ -80,7 +79,6 @@ @include paginator-theme.theme($css-var-theme); @include progress-spinner-theme.theme($css-var-theme); @include radio-theme.theme($css-var-theme); - @include select-theme.theme($css-var-theme); @include sidenav-theme.theme($css-var-theme); @include slide-toggle-theme.theme($css-var-theme); @include slider-theme.theme($css-var-theme); diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index 0f408e22b333..0b66607ff9d4 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -57,7 +57,6 @@ @include paginator-theme.typography($config); @include progress-spinner-theme.typography($config); @include radio-theme.typography($config); - @include select-theme.typography($config); @include sidenav-theme.typography($config); @include slide-toggle-theme.typography($config); @include slider-theme.typography($config); @@ -94,6 +93,7 @@ @include tooltip-theme.typography($config); @include form-field-theme.typography($config); @include input-theme.typography($config); + @include select-theme.typography($config); } // @deprecated Use `all-component-typographies`. diff --git a/src/material/form-field/testing/BUILD.bazel b/src/material/form-field/testing/BUILD.bazel index 8d0c7f620c92..ef35aa3f1c7c 100644 --- a/src/material/form-field/testing/BUILD.bazel +++ b/src/material/form-field/testing/BUILD.bazel @@ -10,10 +10,10 @@ ts_library( ), deps = [ "//src/cdk/testing", - "//src/material-experimental/mdc-select/testing", "//src/material/datepicker/testing", "//src/material/form-field/testing/control", "//src/material/input/testing", + "//src/material/select/testing", ], ) @@ -45,14 +45,14 @@ ng_test_library( ":harness_tests_lib", ":testing", "//src/material-experimental/mdc-autocomplete", - "//src/material-experimental/mdc-select", - "//src/material-experimental/mdc-select/testing", "//src/material/core", "//src/material/datepicker", "//src/material/datepicker/testing", "//src/material/form-field", "//src/material/input", "//src/material/input/testing", + "//src/material/select", + "//src/material/select/testing", ], ) diff --git a/src/material/form-field/testing/form-field-harness.spec.ts b/src/material/form-field/testing/form-field-harness.spec.ts index a0528d7c0218..451e32cb9f5c 100644 --- a/src/material/form-field/testing/form-field-harness.spec.ts +++ b/src/material/form-field/testing/form-field-harness.spec.ts @@ -2,8 +2,8 @@ import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatInputHarness} from '@angular/material/input/testing'; -import {MatSelectModule} from '@angular/material-experimental/mdc-select'; -import {MatSelectHarness} from '@angular/material-experimental/mdc-select/testing'; +import {MatSelectModule} from '@angular/material/select'; +import {MatSelectHarness} from '@angular/material/select/testing'; import {runHarnessTests} from './shared.spec'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/core'; diff --git a/src/material/form-field/testing/form-field-harness.ts b/src/material/form-field/testing/form-field-harness.ts index 804b50ff6221..2d3eb579a710 100644 --- a/src/material/form-field/testing/form-field-harness.ts +++ b/src/material/form-field/testing/form-field-harness.ts @@ -17,7 +17,7 @@ import { } from '@angular/cdk/testing'; import {MatInputHarness} from '@angular/material/input/testing'; import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control'; -import {MatSelectHarness} from '@angular/material-experimental/mdc-select/testing'; +import {MatSelectHarness} from '@angular/material/select/testing'; import { MatDatepickerInputHarness, MatDateRangeInputHarness, diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss index f851b9a6cbc8..35b35c239232 100644 --- a/src/material/legacy-core/theming/_all-theme.scss +++ b/src/material/legacy-core/theming/_all-theme.scss @@ -6,6 +6,7 @@ @use '../../legacy-tooltip/tooltip-theme'; @use '../../legacy-input/input-theme'; @use '../../legacy-form-field/form-field-theme'; +@use '../../legacy-select/select-theme'; // Create a theme. @mixin all-legacy-component-themes($theme-or-color-config) { @@ -17,6 +18,7 @@ @include tooltip-theme.theme($theme-or-color-config); @include input-theme.theme($theme-or-color-config); @include form-field-theme.theme($theme-or-color-config); + @include select-theme.theme($theme-or-color-config); @include all-theme.private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss index 0d04df7384a6..72120e1e513a 100644 --- a/src/material/legacy-core/typography/_all-typography.scss +++ b/src/material/legacy-core/typography/_all-typography.scss @@ -8,6 +8,7 @@ @use '../../legacy-tooltip/tooltip-theme'; @use '../../legacy-input/input-theme'; @use '../../legacy-form-field/form-field-theme'; +@use '../../legacy-select/select-theme'; // Includes all of the typographic styles. @mixin all-legacy-component-typographies($config-or-theme: null) { @@ -33,6 +34,7 @@ @include tooltip-theme.typography($config); @include input-theme.typography($config); @include form-field-theme.typography($config); + @include select-theme.typography($config); } // @deprecated Use `all-legacy-component-typographies`. diff --git a/src/material/legacy-form-field/testing/BUILD.bazel b/src/material/legacy-form-field/testing/BUILD.bazel index 7cc4437f875b..0f657ec36720 100644 --- a/src/material/legacy-form-field/testing/BUILD.bazel +++ b/src/material/legacy-form-field/testing/BUILD.bazel @@ -14,7 +14,7 @@ ts_library( "//src/material/form-field/testing", "//src/material/form-field/testing/control", "//src/material/legacy-input/testing", - "//src/material/select/testing", + "//src/material/legacy-select/testing", ], ) @@ -36,8 +36,8 @@ ng_test_library( "//src/material/legacy-form-field", "//src/material/legacy-input", "//src/material/legacy-input/testing", - "//src/material/select", - "//src/material/select/testing", + "//src/material/legacy-select", + "//src/material/legacy-select/testing", ], ) diff --git a/src/material/legacy-form-field/testing/form-field-harness.spec.ts b/src/material/legacy-form-field/testing/form-field-harness.spec.ts index cb9adc9884b8..214e7868be9a 100644 --- a/src/material/legacy-form-field/testing/form-field-harness.spec.ts +++ b/src/material/legacy-form-field/testing/form-field-harness.spec.ts @@ -8,8 +8,8 @@ import { import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSelectHarness} from '@angular/material/select/testing'; +import {MatLegacySelectModule} from '@angular/material/legacy-select'; +import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; import {MatLegacyFormFieldHarness} from './form-field-harness'; import {runHarnessTests} from '@angular/material/form-field/testing/shared.spec'; @@ -20,14 +20,14 @@ describe('Non-MDC-based MatFormFieldHarness', () => { MatLegacyFormFieldModule, MatAutocompleteModule, MatLegacyInputModule, - MatSelectModule, + MatLegacySelectModule, MatNativeDateModule, MatDatepickerModule, ], { formFieldHarness: MatLegacyFormFieldHarness as any, inputHarness: MatLegacyInputHarness, - selectHarness: MatSelectHarness, + selectHarness: MatLegacySelectHarness, datepickerInputHarness: MatDatepickerInputHarness, dateRangeInputHarness: MatDateRangeInputHarness, isMdcImplementation: false, diff --git a/src/material/legacy-form-field/testing/form-field-harness.ts b/src/material/legacy-form-field/testing/form-field-harness.ts index 02c73467b5c4..2e1aadc34259 100644 --- a/src/material/legacy-form-field/testing/form-field-harness.ts +++ b/src/material/legacy-form-field/testing/form-field-harness.ts @@ -16,13 +16,13 @@ import { _MatFormFieldHarnessBase, } from '@angular/material/form-field/testing'; import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing'; -import {MatSelectHarness} from '@angular/material/select/testing'; +import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; // TODO(devversion): support support chip list harness /** Possible harnesses of controls which can be bound to a form-field. */ export type FormFieldControlHarness = | MatLegacyInputHarness - | MatSelectHarness + | MatLegacySelectHarness | MatDatepickerInputHarness | MatDateRangeInputHarness; @@ -54,7 +54,7 @@ export class MatLegacyFormFieldHarness extends _MatFormFieldHarnessBase` and `