Skip to content

Commit 1ff8b79

Browse files
zarendzarend
committed
docs(slide-toggle): migrate examples to MDC
Migrate slide-toggle example to use mdc-based components.
1 parent 9be94a0 commit 1ff8b79

File tree

16 files changed

+72
-121
lines changed

16 files changed

+72
-121
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/legacy-button",
19-
"//src/material/legacy-card",
20-
"//src/material/legacy-checkbox",
21-
"//src/material/legacy-radio",
22-
"//src/material/legacy-slide-toggle",
23-
"//src/material/legacy-slide-toggle/testing",
18+
"//src/material/button",
19+
"//src/material/card",
20+
"//src/material/checkbox",
21+
"//src/material/radio",
22+
"//src/material/slide-toggle",
23+
"//src/material/slide-toggle/testing",
2424
"@npm//@angular/forms",
2525
"@npm//@angular/platform-browser",
2626
"@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
4444
":slide-toggle",
4545
"//src/cdk/testing",
4646
"//src/cdk/testing/testbed",
47-
"//src/material/legacy-slide-toggle",
48-
"//src/material/legacy-slide-toggle/testing",
47+
"//src/material/slide-toggle",
48+
"//src/material/slide-toggle/testing",
4949
"@npm//@angular/forms",
5050
"@npm//@angular/platform-browser-dynamic",
5151
],

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {NgModule} from '@angular/core';
22
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
3-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
4-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
5-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
6-
import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
7-
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
3+
import {MatButtonModule} from '@angular/material/button';
4+
import {MatCardModule} from '@angular/material/card';
5+
import {MatCheckboxModule} from '@angular/material/checkbox';
6+
import {MatRadioModule} from '@angular/material/radio';
7+
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
88
import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
99
import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
1010
import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
@@ -27,11 +27,11 @@ const EXAMPLES = [
2727
@NgModule({
2828
imports: [
2929
FormsModule,
30-
MatLegacyButtonModule,
31-
MatLegacyCardModule,
32-
MatLegacyCheckboxModule,
33-
MatLegacyRadioModule,
34-
MatLegacySlideToggleModule,
30+
MatButtonModule,
31+
MatCardModule,
32+
MatCheckboxModule,
33+
MatRadioModule,
34+
MatSlideToggleModule,
3535
ReactiveFormsModule,
3636
],
3737
declarations: EXAMPLES,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<p>Slide Toggle inside of a Template-driven form</p>
66

7-
<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
7+
<form class="example-form" #form="ngForm" (ngSubmit)="alertFormValues(form.form)">
88

99
<mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
1010
<mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>
@@ -14,7 +14,7 @@
1414

1515
<p>Slide Toggle inside of a Reactive form</p>
1616

17-
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
17+
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="alertFormValues(formGroup)" ngNativeValidate>
1818

1919
<mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
2020
<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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {FormBuilder, Validators} from '@angular/forms';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
33

44
/**
55
* @title Slide-toggle with forms
@@ -18,7 +18,7 @@ export class SlideToggleFormsExample {
1818

1919
constructor(private _formBuilder: FormBuilder) {}
2020

21-
onFormSubmit() {
22-
alert(JSON.stringify(this.formGroup.value, null, 2));
21+
alertFormValues(formGroup: FormGroup) {
22+
alert(JSON.stringify(formGroup.value, null, 2));
2323
}
2424
}

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ ng_module(
6060
"//src/dev-app/legacy-progress-spinner",
6161
"//src/dev-app/legacy-radio",
6262
"//src/dev-app/legacy-select",
63+
"//src/dev-app/legacy-slide-toggle",
6364
"//src/dev-app/legacy-slider",
6465
"//src/dev-app/legacy-snack-bar",
6566
"//src/dev-app/legacy-table",
@@ -68,7 +69,6 @@ ng_module(
6869
"//src/dev-app/list",
6970
"//src/dev-app/live-announcer",
7071
"//src/dev-app/mdc-chips",
71-
"//src/dev-app/mdc-slide-toggle",
7272
"//src/dev-app/menu",
7373
"//src/dev-app/menubar",
7474
"//src/dev-app/paginator",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ export class DevAppLayout {
104104
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
105105
{name: 'YouTube Player', route: '/youtube-player'},
106106
{name: 'MDC Chips', route: '/mdc-chips'},
107-
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
108107
{name: 'MDC Slider', route: '/mdc-slider'},
109108
{name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
110109
{name: 'Legacy Button', route: '/legacy-button'},
@@ -120,6 +119,7 @@ export class DevAppLayout {
120119
{name: 'Legacy Radio', route: '/legacy-radio'},
121120
{name: 'Legacy Select', route: '/legacy-select'},
122121
{name: 'Legacy Slider', route: '/legacy-slider'},
122+
{name: 'Legacy Slide Toggle', route: '/legacy-slide-toggle'},
123123
{name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
124124
{name: 'Legacy Table', route: '/legacy-table'},
125125
{name: 'Legacy Tabs', route: '/legacy-tabs'},

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-slide-toggle",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"legacy-slide-toggle-demo.html",
10+
":legacy_slide_toggle_demo_scss",
11+
],
12+
deps = [
13+
"//src/material/legacy-button",
14+
"//src/material/legacy-slide-toggle",
15+
"@npm//@angular/forms",
16+
],
17+
)
18+
19+
sass_binary(
20+
name = "legacy_slide_toggle_demo_scss",
21+
src = "legacy-slide-toggle-demo.scss",
22+
)

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.html renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
Disabled Slide Toggle
99
</mat-slide-toggle>
1010

11-
<mat-slide-toggle disabled>
12-
Always disabled (no value binding)
13-
</mat-slide-toggle>
14-
1511
<mat-slide-toggle [disabled]="firstToggle">
1612
Disable Bound
1713
</mat-slide-toggle>

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.scss renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.scss

File renamed without changes.

‎src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.ts renamed to ‎src/dev-app/legacy-slide-toggle/legacy-slide-toggle-demo.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
1110
import {FormsModule} from '@angular/forms';
11+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
12+
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
1213

1314
@Component({
14-
selector: 'mdc-slide-toggle-demo',
15-
templateUrl: 'mdc-slide-toggle-demo.html',
16-
styleUrls: ['mdc-slide-toggle-demo.css'],
15+
selector: 'slide-toggle-demo',
16+
templateUrl: 'legacy-slide-toggle-demo.html',
17+
styleUrls: ['legacy-slide-toggle-demo.css'],
1718
standalone: true,
18-
imports: [FormsModule, MatSlideToggleModule],
19+
imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule],
1920
})
20-
export class MdcSlideToggleDemo {
21+
export class LegacySlideToggleDemo {
2122
firstToggle: boolean;
2223

2324
onFormSubmit() {

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/dev-app/routes.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,8 @@ export const DEV_APP_ROUTES: Routes = [
208208
loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
209209
},
210210
{
211-
path: 'mdc-slide-toggle',
212-
loadComponent: () =>
213-
import('./mdc-slide-toggle/mdc-slide-toggle-demo').then(m => m.MdcSlideToggleDemo),
211+
path: 'slide-toggle',
212+
loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
214213
},
215214
{
216215
path: 'slider',
@@ -276,8 +275,9 @@ export const DEV_APP_ROUTES: Routes = [
276275
loadComponent: () => import('./sidenav/sidenav-demo').then(m => m.SidenavDemo),
277276
},
278277
{
279-
path: 'slide-toggle',
280-
loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
278+
path: 'legacy-slide-toggle',
279+
loadComponent: () =>
280+
import('./legacy-slide-toggle/legacy-slide-toggle-demo').then(m => m.LegacySlideToggleDemo),
281281
},
282282
{
283283
path: 'legacy-slider',

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
load("//tools:defaults.bzl", "ng_module", "sass_binary")
1+
load("//tools:defaults.bzl", "ng_module")
22

33
package(default_visibility = ["//visibility:public"])
44

@@ -7,16 +7,8 @@ ng_module(
77
srcs = glob(["**/*.ts"]),
88
assets = [
99
"slide-toggle-demo.html",
10-
":slide_toggle_demo_scss",
1110
],
1211
deps = [
13-
"//src/material/legacy-button",
14-
"//src/material/legacy-slide-toggle",
15-
"@npm//@angular/forms",
12+
"//src/components-examples/material/slide-toggle",
1613
],
1714
)
18-
19-
sass_binary(
20-
name = "slide_toggle_demo_scss",
21-
src = "slide-toggle-demo.scss",
22-
)

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

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
1-
<div class="demo-slide-toggle">
2-
3-
<mat-slide-toggle color="primary" [(ngModel)]="firstToggle">
4-
Default Slide Toggle
5-
</mat-slide-toggle>
6-
7-
<mat-slide-toggle [(ngModel)]="firstToggle" disabled>
8-
Disabled Slide Toggle
9-
</mat-slide-toggle>
10-
11-
<mat-slide-toggle [disabled]="firstToggle">
12-
Disable Bound
13-
</mat-slide-toggle>
14-
15-
<p>Example where the slide toggle is required inside of a form.</p>
16-
17-
<form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
18-
19-
<mat-slide-toggle name="slideToggle" required ngModel>
20-
Slide Toggle
21-
</mat-slide-toggle>
22-
23-
<p>
24-
<button mat-raised-button type="submit">Submit Form</button>
25-
</p>
26-
27-
</form>
28-
29-
</div>
1+
<h3>Slide Toggle Overview</h3>
2+
<slide-toggle-overview-example></slide-toggle-overview-example>
3+
<h3>Configurable Slide Toggle</h3>
4+
<slide-toggle-configurable-example></slide-toggle-configurable-example>
5+
<h3>Slide Toggle Forms</h3>
6+
<slide-toggle-forms-example></slide-toggle-forms-example>
7+
<h3>Slide Toggle Harness</h3>
8+
<slide-toggle-harness-example></slide-toggle-harness-example>

‎src/dev-app/slide-toggle/slide-toggle-demo.scss

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,12 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {FormsModule} from '@angular/forms';
11-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
12-
import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
10+
import {SlideToggleExamplesModule} from '@angular/components-examples/material/slide-toggle';
1311

1412
@Component({
1513
selector: 'slide-toggle-demo',
1614
templateUrl: 'slide-toggle-demo.html',
17-
styleUrls: ['slide-toggle-demo.css'],
1815
standalone: true,
19-
imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule],
16+
imports: [SlideToggleExamplesModule],
2017
})
21-
export class SlideToggleDemo {
22-
firstToggle: boolean;
23-
24-
onFormSubmit() {
25-
alert(`You submitted the form.`);
26-
}
27-
}
18+
export class SlideToggleDemo {}

0 commit comments

Comments
 (0)