test(material/slider): add slider dialog demo (#26151)

* test(material/slider): add slider dialog demo * fixup! test(material/slider): add slider dialog demo
angular · Dec 12, 2022 · de6848e · de6848e
1 parent bcd9487
commit de6848e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/src/dev-app/slider/BUILD.bazel b/src/dev-app/slider/BUILD.bazel
@@ -10,8 +10,10 @@ ng_module(
         ":slider_demo_scss",
     ],
     deps = [
+        "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/checkbox",
+        "//src/material/dialog",
         "//src/material/slider",
         "//src/material/tabs",
         "@npm//@angular/forms",

diff --git a/src/dev-app/slider/slider-demo.html b/src/dev-app/slider/slider-demo.html
@@ -180,4 +180,10 @@
         <input matSliderEndThumb #ngEndThumb4 />
       </mat-slider>
   </mat-tab>
+
+  <mat-tab label="Slider in a dialog">
+    <div class="demo-dialog-trigger-container">
+      <button mat-raised-button [color]="colorModel" (click)="openDialog()">Open dialog</button>
+    </div>
+  </mat-tab>
 </mat-tab-group>
diff --git a/src/dev-app/slider/slider-demo.scss b/src/dev-app/slider/slider-demo.scss
@@ -46,3 +46,11 @@
   min-width: 300px;
   margin-top: 30px;
 }
+
+.demo-dialog-trigger-container {
+  padding: 25px 0;
+  text-align: center;
+}
+.demo-dialog-content {
+  overflow: visible;
+}
diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
@@ -6,21 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialog, MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+
+interface DialogData {
+  color: string;
+  discrete: boolean;
+  showTickMarks: boolean;
+}
 
 @Component({
   selector: 'slider-demo',
   templateUrl: 'slider-demo.html',
   standalone: true,
   imports: [
     FormsModule,
-    MatCheckboxModule,
+    MatButtonModule,
     MatButtonToggleModule,
+    MatCheckboxModule,
+    MatDialogModule,
     MatSliderModule,
     MatTabsModule,
     ReactiveFormsModule,
@@ -49,6 +59,8 @@ export class SliderDemo {
 
   control = new FormControl('0');
 
+  constructor(public dialog: MatDialog) {}
+
   updateValue(input: EventTarget | null): void {
     if (!input) {
       return;
@@ -91,4 +103,35 @@ export class SliderDemo {
     }
     (input as HTMLInputElement).checked ? this.control.disable() : this.control.enable();
   }
+  openDialog() {
+    this.dialog.open(SliderDialogDemo, {
+      data: {
+        color: this.colorModel,
+        discrete: this.discrete,
+        showTickMarks: this.showTickMarks,
+      },
+    });
+  }
+}
+
+@Component({
+  selector: 'slider-dialog-demo',
+  styleUrls: ['slider-demo.css'],
+  template: `
+  <h1 mat-dialog-title>Slider in a dialog</h1>
+  <div class="demo-dialog-content" mat-dialog-content>
+  <mat-slider [discrete]="this.data.discrete" [showTickMarks]="this.data.showTickMarks" [color]="this.data.color" step="10">
+      <input value="50" matSliderThumb>
+    </mat-slider>
+    <mat-slider [discrete]="this.data.discrete" [showTickMarks]="this.data.showTickMarks" [color]="this.data.color" step="10">
+      <input value="30" matSliderStartThumb>
+      <input value="70" matSliderEndThumb>
+    </mat-slider>
+  </div>
+  `,
+  standalone: true,
+  imports: [MatDialogModule, MatSliderModule],
+})
+export class SliderDialogDemo {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
 }