docs(material/slide-toggle): migrate examples to MDC (#25643)

Migrate slide-toggle example to use mdc-based components.

.github/CODEOWNERS

@@ -192,6 +192,7 @@
 /src/dev-app/legacy-paginator/**                            @crisbeto
 /src/dev-app/legacy-radio/**                                @andrewseguin @devversion
 /src/dev-app/legacy-select/**                               @crisbeto
+/src/dev-app/legacy-slide-toggle/**                         @devversion
 /src/dev-app/legacy-snack-bar/**                            @andrewseguin
 /src/dev-app/legacy-tabs/**                                 @andrewseguin
 /src/dev-app/legacy-table/**                                @andrewseguin
@@ -204,7 +205,6 @@
 /src/dev-app/mdc-chips/**                                   @mmalerba
 /src/dev-app/legacy-progress-bar/**                         @crisbeto
 /src/dev-app/legacy-progress-spinner/**                     @mmalerba
-/src/dev-app/mdc-slide-toggle/**                            @crisbeto
 /src/dev-app/legacy-slider/**                               @devversion
 /src/dev-app/mdc-snack-bar/**                               @andrewseguin
 /src/dev-app/mdc-tabs/**                                    @crisbeto
@@ -223,8 +223,8 @@
 /src/dev-app/select/**                                      @crisbeto
 /src/dev-app/selection/**                                   @andrewseguin
 /src/dev-app/sidenav/**                                     @mmalerba
-/src/dev-app/slide-toggle/**                                @devversion
 /src/dev-app/slider/**                                      @mmalerba
+/src/dev-app/slide-toggle/**                                @crisbeto
 /src/dev-app/snack-bar/**                                   @andrewseguin @crisbeto
 /src/dev-app/stepper/**                                     @mmalerba
 /src/dev-app/table-scroll-container/**                      @andrewseguin

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

@@ -15,12 +15,12 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-button",
-        "//src/material/legacy-card",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-slide-toggle",
-        "//src/material/legacy-slide-toggle/testing",
+        "//src/material/button",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//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/legacy-slide-toggle",
-        "//src/material/legacy-slide-toggle/testing",
+        "//src/material/slide-toggle",
+        "//src/material/slide-toggle/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

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

@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSlideToggleModule} from '@angular/material/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';
@@ -27,11 +27,11 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCardModule,
-    MatLegacyCheckboxModule,
-    MatLegacyRadioModule,
-    MatLegacySlideToggleModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    MatSlideToggleModule,
     ReactiveFormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html

@@ -4,7 +4,7 @@
 
 <p>Slide Toggle inside of a Template-driven form</p>
 
-<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
+<form class="example-form" #form="ngForm" (ngSubmit)="alertFormValues(form.form)">
 
   <mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
   <mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>
@@ -14,7 +14,7 @@
 
 <p>Slide Toggle inside of a Reactive form</p>
 
-<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
+<form class="example-form" [formGroup]="formGroup" (ngSubmit)="alertFormValues(formGroup)" ngNativeValidate>
 
   <mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
   <mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle>

src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, Validators} from '@angular/forms';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 /**
  * @title Slide-toggle with forms
@@ -18,7 +18,7 @@ export class SlideToggleFormsExample {
 
   constructor(private _formBuilder: FormBuilder) {}
 
-  onFormSubmit() {
-    alert(JSON.stringify(this.formGroup.value, null, 2));
+  alertFormValues(formGroup: FormGroup) {
+    alert(JSON.stringify(formGroup.value, null, 2));
   }
 }

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 {MatLegacySlideToggleHarness} from '@angular/material/legacy-slide-toggle/testing';
+import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/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: [MatLegacySlideToggleModule, ReactiveFormsModule],
+      imports: [MatSlideToggleModule, ReactiveFormsModule],
       declarations: [SlideToggleHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SlideToggleHarnessExample);
@@ -21,37 +21,33 @@ describe('SlideToggleHarnessExample', () => {
   });
 
   it('should load all slide-toggle harnesses', async () => {
-    const slideToggles = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
+    const slideToggles = await loader.getAllHarnesses(MatSlideToggleHarness);
     expect(slideToggles.length).toBe(2);
   });
 
   it('should load slide-toggle with name', async () => {
     const slideToggles = await loader.getAllHarnesses(
-      MatLegacySlideToggleHarness.with({name: 'first-name'}),
+      MatSlideToggleHarness.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(
-      MatLegacySlideToggleHarness,
-    );
+    const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
     expect(await enabledToggle.isDisabled()).toBe(false);
     expect(await disabledToggle.isDisabled()).toBe(true);
   });
 
   it('should get label text', async () => {
-    const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatLegacySlideToggleHarness);
+    const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
     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(
-      MatLegacySlideToggleHarness,
-    );
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
     await checkedToggle.toggle();
     await uncheckedToggle.toggle();
     expect(await checkedToggle.isChecked()).toBe(false);

src/dev-app/BUILD.bazel

@@ -60,6 +60,7 @@ ng_module(
         "//src/dev-app/legacy-progress-spinner",
         "//src/dev-app/legacy-radio",
         "//src/dev-app/legacy-select",
+        "//src/dev-app/legacy-slide-toggle",
         "//src/dev-app/legacy-slider",
         "//src/dev-app/legacy-snack-bar",
         "//src/dev-app/legacy-table",
@@ -68,7 +69,6 @@ ng_module(
         "//src/dev-app/list",
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-chips",
-        "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/menu",
         "//src/dev-app/menubar",
         "//src/dev-app/paginator",

src/dev-app/dev-app/dev-app-layout.ts

@@ -104,7 +104,6 @@ export class DevAppLayout {
     {name: 'Virtual Scrolling', route: '/virtual-scroll'},
     {name: 'YouTube Player', route: '/youtube-player'},
     {name: 'MDC Chips', route: '/mdc-chips'},
-    {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
     {name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
     {name: 'Legacy Button', route: '/legacy-button'},
@@ -120,6 +119,7 @@ export class DevAppLayout {
     {name: 'Legacy Radio', route: '/legacy-radio'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Slider', route: '/legacy-slider'},
+    {name: 'Legacy Slide Toggle', route: '/legacy-slide-toggle'},
     {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
     {name: 'Legacy Table', route: '/legacy-table'},
     {name: 'Legacy Tabs', route: '/legacy-tabs'},

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

@@ -0,0 +1,22 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-slide-toggle",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-slide-toggle-demo.html",
+        ":legacy_slide_toggle_demo_scss",
+    ],
+    deps = [
+        "//src/material/legacy-button",
+        "//src/material/legacy-slide-toggle",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "legacy_slide_toggle_demo_scss",
+    src = "legacy-slide-toggle-demo.scss",
+)

src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.html → src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.html

@@ -8,10 +8,6 @@
     Disabled Slide Toggle
   </mat-slide-toggle>
 
-  <mat-slide-toggle disabled>
-    Always disabled (no value binding)
-  </mat-slide-toggle>
-
   <mat-slide-toggle [disabled]="firstToggle">
     Disable Bound
   </mat-slide-toggle>

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

@@ -7,17 +7,18 @@
  */
 
 import {Component} from '@angular/core';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {FormsModule} from '@angular/forms';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 
 @Component({
-  selector: 'mdc-slide-toggle-demo',
-  templateUrl: 'mdc-slide-toggle-demo.html',
-  styleUrls: ['mdc-slide-toggle-demo.css'],
+  selector: 'slide-toggle-demo',
+  templateUrl: 'legacy-slide-toggle-demo.html',
+  styleUrls: ['legacy-slide-toggle-demo.css'],
   standalone: true,
-  imports: [FormsModule, MatSlideToggleModule],
+  imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule],
 })
-export class MdcSlideToggleDemo {
+export class LegacySlideToggleDemo {
   firstToggle: boolean;
 
   onFormSubmit() {

src/dev-app/routes.ts

@@ -208,9 +208,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
   },
   {
-    path: 'mdc-slide-toggle',
-    loadComponent: () =>
-      import('./mdc-slide-toggle/mdc-slide-toggle-demo').then(m => m.MdcSlideToggleDemo),
+    path: 'slide-toggle',
+    loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
   },
   {
     path: 'slider',
@@ -276,8 +275,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./sidenav/sidenav-demo').then(m => m.SidenavDemo),
   },
   {
-    path: 'slide-toggle',
-    loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
+    path: 'legacy-slide-toggle',
+    loadComponent: () =>
+      import('./legacy-slide-toggle/legacy-slide-toggle-demo').then(m => m.LegacySlideToggleDemo),
   },
   {
     path: 'legacy-slider',

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

@@ -10,8 +10,8 @@ ng_module(
         ":slide_toggle_demo_scss",
     ],
     deps = [
-        "//src/material/legacy-button",
-        "//src/material/legacy-slide-toggle",
+        "//src/material/button",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )

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

@@ -26,4 +26,4 @@
 
   </form>
 
-</div>
+</div>

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

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