feat(material/slide-toggle): add full-width support (#33424)

Adds support for a `fullWidth` input on the slide toggle that'll make it stretch to fill its container. This is useful for mobile-focused UIs.

Fixes #24754.

Author: crisbeto

goldens/material/slide-toggle/index.api.md

@@ -46,6 +46,7 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     _focused: boolean;
     // (undocumented)
     protected _focusMonitor: FocusMonitor;
+    fullWidth: boolean;
     // (undocumented)
     _getAriaLabelledBy(): string | null;
     _handleClick(): void;
@@ -64,6 +65,8 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     // (undocumented)
     static ngAcceptInputType_disableRipple: unknown;
     // (undocumented)
+    static ngAcceptInputType_fullWidth: unknown;
+    // (undocumented)
     static ngAcceptInputType_hideIcon: unknown;
     // (undocumented)
     static ngAcceptInputType_required: unknown;
@@ -88,7 +91,7 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     validate(control: AbstractControl<boolean>): ValidationErrors | null;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, never>;
 }

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

@@ -2,3 +2,4 @@ export {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-
 export {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
 export {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
 export {SlideToggleHarnessExample} from './slide-toggle-harness/slide-toggle-harness-example';
+export {SlideToggleFullWidthExample} from './slide-toggle-full-width/slide-toggle-full-width-example';

src/components-examples/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.css

@@ -0,0 +1,6 @@
+.example-full-width-container {
+  width: 300px;
+  border: 1px solid #ccc;
+  padding: 16px;
+  border-radius: 4px;
+}

src/components-examples/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.html

@@ -0,0 +1,4 @@
+<div class="example-full-width-container">
+  <mat-slide-toggle fullWidth labelPosition="before">Full width slide toggle</mat-slide-toggle>
+  <mat-slide-toggle fullWidth>Full width slide toggle</mat-slide-toggle>
+</div>

src/components-examples/material/slide-toggle/slide-toggle-full-width/slide-toggle-full-width-example.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {MatSlideToggle} from '@angular/material/slide-toggle';
+
+/**
+ * @title Full-width slide toggle
+ */
+@Component({
+  selector: 'slide-toggle-full-width-example',
+  templateUrl: 'slide-toggle-full-width-example.html',
+  styleUrl: 'slide-toggle-full-width-example.css',
+  imports: [MatSlideToggle],
+})
+export class SlideToggleFullWidthExample {}

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

@@ -26,6 +26,12 @@
 
   <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />
 
+  <p>With full width</p>
+  <div class="demo-full-width-container">
+    <mat-slide-toggle fullWidth labelPosition="before" [(ngModel)]="firstToggle">Full Width Before</mat-slide-toggle>
+    <mat-slide-toggle fullWidth labelPosition="after" [(ngModel)]="firstToggle">Full Width After</mat-slide-toggle>
+  </div>
+
   <p>Example where the slide toggle is required inside of a form.</p>
 
   <form #form="ngForm" (ngSubmit)="onFormSubmit()">

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

@@ -7,3 +7,9 @@
     margin: 6px 0;
   }
 }
+
+.demo-full-width-container {
+  width: 300px;
+  border: 1px solid #ccc;
+  padding: 16px;
+}

src/material/slide-toggle/slide-toggle.md

@@ -13,6 +13,13 @@ If you don't want the label to appear next to the slide-toggle, you can use
 [`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to
 specify an appropriate label.
 
+### Full-width slide-toggle
+The `fullWidth` input can be used to make the slide-toggle stretch to fill its container.
+When applied, the slide-toggle will distribute the switch and the label to opposite ends of the
+container.
+
+<!-- example(slide-toggle-full-width) -->
+
 ### Use with `@angular/forms`
 `<mat-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule`
 and `ReactiveFormsModule`.

src/material/slide-toggle/slide-toggle.scss

@@ -557,6 +557,25 @@ $fallbacks: m3-slide-toggle.get-tokens();
   }
 }
 
+.mat-slide-toggle-full-width {
+  width: 100%;
+
+  .mat-internal-form-field {
+    width: 100%;
+    justify-content: space-between;
+
+    label {
+      margin: 0;
+      flex-grow: 1;
+      text-align: end;
+    }
+  }
+
+  .mdc-form-field--align-end label {
+    text-align: start;
+  }
+}
+
 // Element used to provide a larger tap target for users on touch devices.
 .mat-mdc-slide-toggle-touch-target {
   position: absolute;

src/material/slide-toggle/slide-toggle.spec.ts

@@ -374,6 +374,16 @@ describe('MatSlideToggle without forms', () => {
 
       expect(slideToggle.checked).toBe(false);
     });
+
+    it('should add the full-width class if fullWidth is true', () => {
+      expect(slideToggleElement.classList).not.toContain('mat-slide-toggle-full-width');
+
+      slideToggle.fullWidth = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(slideToggleElement.classList).toContain('mat-slide-toggle-full-width');
+    });
   });
 
   describe('custom template', () => {