feat(material/slide-toggle): Switch slide-toggle implementation to us…

…e MDC (#25404)

Old implementation is still available under @angular/material/legacy-slide-toggle

BREAKING CHANGE:

- DOM and CSS classes for mat-slide-toggle have changes
- Typescript API is largely the same but may have minor differences
- See the MDC migration guide for more information about the changes and
how to migrate your app (TODO: link when available)

.github/CODEOWNERS

@@ -28,7 +28,7 @@
 /src/material/legacy-select/**                     @crisbeto
 /src/material/select/**                            @crisbeto
 /src/material/sidenav/**                           @mmalerba
-/src/material/slide-toggle/**                      @devversion
+/src/material/legacy-slide-toggle/**                      @devversion
 /src/material/slider/**                            @mmalerba
 /src/material/snack-bar/**                         @andrewseguin @crisbeto
 /src/material/sort/**                              @andrewseguin
@@ -126,7 +126,7 @@
 /src/material/progress-bar/**         @andrewseguin
 /src/material-experimental/mdc-radio/**                @mmalerba
 /src/material-experimental/mdc-snack-bar/**            @andrewseguin
-/src/material-experimental/mdc-slide-toggle/**         @crisbeto
+/src/material/slide-toggle/**         @crisbeto
 /src/material-experimental/mdc-slider/**               @devversion
 /src/material-experimental/mdc-tabs/**                 @crisbeto
 /src/material-experimental/mdc-tooltip/**              @crisbeto
@@ -341,7 +341,7 @@
 /tools/public_api_guard/material/radio**           @andrewseguin @devversion
 /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/legacy-slide-toggle**    @devversion
 /tools/public_api_guard/material/slider**          @mmalerba
 /tools/public_api_guard/material/snack-bar**       @andrewseguin @crisbeto
 /tools/public_api_guard/material/sort**            @andrewseguin

.ng-dev/commit-message.mts

@@ -53,7 +53,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material-experimental/mdc-radio',
-    'material-experimental/mdc-slide-toggle',
+    'material/slide-toggle',
     'material-experimental/mdc-slider',
     'material-experimental/mdc-snack-bar',
     'material-experimental/mdc-table',
@@ -99,7 +99,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/select',
     'material/legacy-select',
     'material/sidenav',
-    'material/slide-toggle',
+    'material/legacy-slide-toggle',
     'material/slider',
     'material/snack-bar',
     'material/sort',

goldens/tsec-exemption.json

@@ -6,7 +6,7 @@
     "../src/material/checkbox/checkbox.ts",
     "../src/material-experimental/mdc-list/interactive-list-base.ts",
     "../src/material-experimental/mdc-progress-spinner/progress-spinner.ts",
-    "../src/material-experimental/mdc-slide-toggle/slide-toggle.ts",
+    "../src/material/slide-toggle/slide-toggle.ts",
     "../src/material/icon/icon-registry.ts",
     "../src/material/icon/icon.ts"
   ]

integration/mdc-migration/golden/src/app/app.module.ts

@@ -19,7 +19,7 @@ import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
-import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';

integration/mdc-migration/golden/src/app/components/slide-toggle/slide-toggle.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleComponent} from './slide-toggle.component';
 
 describe('SlideToggleComponent', () => {

integration/mdc-migration/golden/src/styles.scss

@@ -62,8 +62,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-select-typography($sample-project-theme);
 @include mat.mdc-core-theme($sample-project-theme);
 @include mat.mdc-core-typography($sample-project-theme);
-@include mat.mdc-slide-toggle-theme($sample-project-theme);
-@include mat.mdc-slide-toggle-typography($sample-project-theme);
+@include mat.slide-toggle-theme($sample-project-theme);
+@include mat.slide-toggle-typography($sample-project-theme);
 @include mat.mdc-slider-theme($sample-project-theme);
 @include mat.mdc-slider-typography($sample-project-theme);
 @include mat.mdc-snack-bar-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -19,7 +19,7 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';

integration/mdc-migration/sample-project/src/app/components/slide-toggle/slide-toggle.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleComponent} from './slide-toggle.component';
 
 describe('SlideToggleComponent', () => {

integration/mdc-migration/sample-project/src/styles.scss

@@ -42,7 +42,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.progress-spinner-theme($sample-project-theme);
 @include mat.radio-theme($sample-project-theme);
 @include mat.select-theme($sample-project-theme);
-@include mat.slide-toggle-theme($sample-project-theme);
+@include mat.legacy-slide-toggle-theme($sample-project-theme);
 @include mat.slider-theme($sample-project-theme);
 @include mat.snack-bar-theme($sample-project-theme);
 @include mat.table-theme($sample-project-theme);

integration/size-test/material/chips/BUILD.bazel

@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "basic",
     file = "basic.ts",
-    deps = ["//src/material/chips"],
+    deps = ["//src/material/legacy-chips"],
 )

src/components-examples/material/autocomplete/BUILD.bazel

@@ -20,7 +20,7 @@ ng_module(
         "//src/material/legacy-autocomplete/testing",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
-        "//src/material/slide-toggle",
+        "//src/material/legacy-slide-toggle",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material/autocomplete/index.ts

@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {AutocompleteAutoActiveFirstOptionExample} from './autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example';
 import {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-display-example';
 import {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example';
@@ -42,7 +42,7 @@ const EXAMPLES = [
     MatLegacyAutocompleteModule,
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
-    MatSlideToggleModule,
+    MatLegacySlideToggleModule,
     FormsModule,
     ReactiveFormsModule,
   ],

src/components-examples/material/slide-toggle/BUILD.bazel

@@ -18,9 +18,9 @@ ng_module(
         "//src/material/button",
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-slide-toggle",
+        "//src/material/legacy-slide-toggle/testing",
         "//src/material/radio",
-        "//src/material/slide-toggle",
-        "//src/material/slide-toggle/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
         ":slide-toggle",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/slide-toggle",
-        "//src/material/slide-toggle/testing",
+        "//src/material/legacy-slide-toggle",
+        "//src/material/legacy-slide-toggle/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/slide-toggle/index.ts

@@ -4,7 +4,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
 import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
@@ -31,7 +31,7 @@ const EXAMPLES = [
     MatLegacyCardModule,
     MatLegacyCheckboxModule,
     MatRadioModule,
-    MatSlideToggleModule,
+    MatLegacySlideToggleModule,
     ReactiveFormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/slide-toggle/slide-toggle-harness/slide-toggle-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';
+import {MatLegacySlideToggleHarness} from '@angular/material/legacy-slide-toggle/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleHarnessExample} from './slide-toggle-harness-example';
 import {ReactiveFormsModule} from '@angular/forms';
 
@@ -12,7 +12,7 @@ describe('SlideToggleHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatSlideToggleModule, ReactiveFormsModule],
+      imports: [MatLegacySlideToggleModule, ReactiveFormsModule],
       declarations: [SlideToggleHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SlideToggleHarnessExample);
@@ -21,33 +21,37 @@ describe('SlideToggleHarnessExample', () => {
   });
 
   it('should load all slide-toggle harnesses', async () => {
-    const slideToggles = await loader.getAllHarnesses(MatSlideToggleHarness);
+    const slideToggles = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
     expect(slideToggles.length).toBe(2);
   });
 
   it('should load slide-toggle with name', async () => {
     const slideToggles = await loader.getAllHarnesses(
-      MatSlideToggleHarness.with({name: 'first-name'}),
+      MatLegacySlideToggleHarness.with({name: 'first-name'}),
     );
     expect(slideToggles.length).toBe(1);
     expect(await slideToggles[0].getLabelText()).toBe('First');
   });
 
   it('should get disabled state', async () => {
-    const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(
+      MatLegacySlideToggleHarness,
+    );
     expect(await enabledToggle.isDisabled()).toBe(false);
     expect(await disabledToggle.isDisabled()).toBe(true);
   });
 
   it('should get label text', async () => {
-    const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
     expect(await firstToggle.getLabelText()).toBe('First');
     expect(await secondToggle.getLabelText()).toBe('Second');
   });
 
   it('should toggle slide-toggle', async () => {
     fixture.componentInstance.disabled = false;
-    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(
+      MatLegacySlideToggleHarness,
+    );
     await checkedToggle.toggle();
     await uncheckedToggle.toggle();
     expect(await checkedToggle.isChecked()).toBe(false);

src/dev-app/expansion/BUILD.bazel

@@ -16,8 +16,8 @@ ng_module(
         "//src/material/legacy-checkbox",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-slide-toggle",
         "//src/material/radio",
-        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/expansion/expansion-demo.ts

@@ -21,7 +21,7 @@ import {
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 
 @Component({
   selector: 'expansion-demo',
@@ -38,7 +38,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
     MatRadioModule,
-    MatSlideToggleModule,
+    MatLegacySlideToggleModule,
   ],
 })
 export class ExpansionDemo {

src/dev-app/mdc-paginator/BUILD.bazel

@@ -11,10 +11,10 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-paginator",
-        "//src/material-experimental/mdc-slide-toggle",
         "//src/material/card",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/mdc-paginator/mdc-paginator-demo.ts

@@ -12,7 +12,7 @@ import {MatPaginatorModule, PageEvent} from '@angular/material-experimental/mdc-
 import {FormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material/card';
 import {MatInputModule} from '@angular/material/input';
-import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'mdc-paginator-demo',

src/dev-app/mdc-slide-toggle/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
         ":mdc_slide_toggle_demo_scss",
     ],
     deps = [
-        "//src/material-experimental/mdc-slide-toggle",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {FormsModule} from '@angular/forms';
 
 @Component({

src/dev-app/paginator/BUILD.bazel

@@ -13,8 +13,8 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-slide-toggle",
         "//src/material/paginator",
-        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/paginator/paginator-demo.ts

@@ -13,7 +13,7 @@ import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 
 @Component({
   selector: 'paginator-demo',
@@ -27,7 +27,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
     MatPaginatorModule,
-    MatSlideToggleModule,
+    MatLegacySlideToggleModule,
   ],
 })
 export class PaginatorDemo {

src/dev-app/slide-toggle/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ],
     deps = [
         "//src/material/button",
-        "//src/material/slide-toggle",
+        "//src/material/legacy-slide-toggle",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/slide-toggle/slide-toggle-demo.ts

@@ -9,14 +9,14 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 
 @Component({
   selector: 'slide-toggle-demo',
   templateUrl: 'slide-toggle-demo.html',
   styleUrls: ['slide-toggle-demo.css'],
   standalone: true,
-  imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
+  imports: [FormsModule, MatButtonModule, MatLegacySlideToggleModule],
 })
 export class SlideToggleDemo {
   firstToggle: boolean;

src/e2e-app/BUILD.bazel

@@ -46,7 +46,6 @@ ng_module(
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
-        "//src/material-experimental/mdc-slide-toggle",
         "//src/material-experimental/mdc-slider",
         "//src/material-experimental/mdc-table",
         "//src/material-experimental/mdc-tabs",
@@ -64,6 +63,7 @@ ng_module(
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
         "//src/material/legacy-progress-bar",
+        "//src/material/legacy-slide-toggle",
         "//src/material/list",
         "//src/material/menu",
         "//src/material/progress-bar",

src/e2e-app/mdc-slide-toggle/mdc-slide-toggle-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MdcSlideToggleE2e} from './mdc-slide-toggle-e2e';
 
 @NgModule({