feat(material/slider): switch implementation to use MDC (#25420)

Switches the slider module to use MDC by default.

BREAKING CHANGE:
* `mat-slider` has a new API that requires a `<input matSliderThumb>` element.

Author: crisbeto

.github/CODEOWNERS

@@ -29,7 +29,7 @@
 /src/material/select/**                            @crisbeto
 /src/material/sidenav/**                           @mmalerba
 /src/material/legacy-slide-toggle/**                      @devversion
-/src/material/slider/**                            @mmalerba
+/src/material/legacy-slider/**                     @mmalerba
 /src/material/snack-bar/**                         @andrewseguin @crisbeto
 /src/material/sort/**                              @andrewseguin
 /src/material/stepper/**                           @mmalerba
@@ -126,8 +126,8 @@
 /src/material/progress-bar/**         @andrewseguin
 /src/material/radio/**                                 @mmalerba
 /src/material-experimental/mdc-snack-bar/**            @andrewseguin
-/src/material/slide-toggle/**         @crisbeto
-/src/material-experimental/mdc-slider/**               @devversion
+/src/material/slide-toggle/**                          @crisbeto
+/src/material/slider/**                                @devversion
 /src/material-experimental/mdc-tabs/**                 @crisbeto
 /src/material-experimental/mdc-tooltip/**              @crisbeto
 /src/material-experimental/mdc-table/**                @andrewseguin

.ng-dev/commit-message.mts

@@ -53,7 +53,6 @@ export const commitMessage: CommitMessageConfig = {
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material/slide-toggle',
-    'material-experimental/mdc-slider',
     'material-experimental/mdc-snack-bar',
     'material-experimental/mdc-table',
     'material-experimental/mdc-tabs',
@@ -101,6 +100,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/sidenav',
     'material/legacy-slide-toggle',
     'material/slider',
+    'material/legacy-slider',
     'material/snack-bar',
     'material/sort',
     'material/stepper',

src/components-examples/material/progress-bar/BUILD.bazel

@@ -19,7 +19,7 @@ ng_module(
         "//src/material/legacy-progress-bar",
         "//src/material/legacy-progress-bar/testing",
         "//src/material/legacy-radio",
-        "//src/material/slider",
+        "//src/material/legacy-slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material/progress-bar/index.ts

@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
 import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
 import {ProgressBarDeterminateExample} from './progress-bar-determinate/progress-bar-determinate-example';
@@ -36,7 +36,7 @@ const EXAMPLES = [
     MatLegacyCardModule,
     MatLegacyProgressBarModule,
     MatLegacyRadioModule,
-    MatSliderModule,
+    MatLegacySliderModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/progress-spinner/BUILD.bazel

@@ -17,9 +17,9 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/legacy-card",
         "//src/material/legacy-radio",
+        "//src/material/legacy-slider",
         "//src/material/progress-spinner",
         "//src/material/progress-spinner/testing",
-        "//src/material/slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material/progress-spinner/index.ts

@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
 import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
 import {ProgressSpinnerHarnessExample} from './progress-spinner-harness/progress-spinner-harness-example';
@@ -27,7 +27,7 @@ const EXAMPLES = [
     MatLegacyCardModule,
     MatProgressSpinnerModule,
     MatLegacyRadioModule,
-    MatSliderModule,
+    MatLegacySliderModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

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

@@ -18,8 +18,8 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
-        "//src/material/slider",
-        "//src/material/slider/testing",
+        "//src/material/legacy-slider",
+        "//src/material/legacy-slider/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":slider",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/slider",
-        "//src/material/slider/testing",
+        "//src/material/legacy-slider",
+        "//src/material/legacy-slider/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

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

@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example';
 import {SliderFormattingExample} from './slider-formatting/slider-formatting-example';
 import {SliderOverviewExample} from './slider-overview/slider-overview-example';
@@ -31,7 +31,7 @@ const EXAMPLES = [
     MatLegacyCardModule,
     MatLegacyCheckboxModule,
     MatLegacyInputModule,
-    MatSliderModule,
+    MatLegacySliderModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

src/components-examples/material/slider/slider-harness/slider-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatSliderHarness} from '@angular/material/slider/testing';
+import {MatLegacySliderHarness} from '@angular/material/legacy-slider/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {SliderHarnessExample} from './slider-harness-example';
 
 describe('SliderHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('SliderHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatSliderModule],
+      imports: [MatLegacySliderModule],
       declarations: [SliderHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SliderHarnessExample);
@@ -20,27 +20,27 @@ describe('SliderHarnessExample', () => {
   });
 
   it('should load all slider harnesses', async () => {
-    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    const sliders = await loader.getAllHarnesses(MatLegacySliderHarness);
     expect(sliders.length).toBe(1);
   });
 
   it('should get value of slider', async () => {
-    const slider = await loader.getHarness(MatSliderHarness);
+    const slider = await loader.getHarness(MatLegacySliderHarness);
     expect(await slider.getValue()).toBe(50);
   });
 
   it('should get percentage of slider', async () => {
-    const slider = await loader.getHarness(MatSliderHarness);
+    const slider = await loader.getHarness(MatLegacySliderHarness);
     expect(await slider.getPercentage()).toBe(0.5);
   });
 
   it('should get max value of slider', async () => {
-    const slider = await loader.getHarness(MatSliderHarness);
+    const slider = await loader.getHarness(MatLegacySliderHarness);
     expect(await slider.getMaxValue()).toBe(100);
   });
 
   it('should be able to set value of slider', async () => {
-    const slider = await loader.getHarness(MatSliderHarness);
+    const slider = await loader.getHarness(MatLegacySliderHarness);
     expect(await slider.getValue()).toBe(50);
 
     await slider.setValue(33);

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

@@ -9,8 +9,8 @@ ng_module(
         "mdc-slider-demo.html",
     ],
     deps = [
-        "//src/material-experimental/mdc-slider",
         "//src/material-experimental/mdc-tabs",
+        "//src/material/slider",
         "@npm//@angular/forms",
     ],
 )

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

@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
 
 @Component({

src/dev-app/slider/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     assets = ["slider-demo.html"],
     deps = [
-        "//src/material/slider",
+        "//src/material/legacy-slider",
         "//src/material/tabs",
         "@npm//@angular/forms",
     ],

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

@@ -8,14 +8,14 @@
 
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'slider-demo',
   templateUrl: 'slider-demo.html',
   standalone: true,
-  imports: [FormsModule, MatSliderModule, MatTabsModule],
+  imports: [FormsModule, MatLegacySliderModule, MatTabsModule],
 })
 export class SliderDemo {
   demo: number;

src/e2e-app/BUILD.bazel

@@ -45,7 +45,6 @@ ng_module(
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-spinner",
-        "//src/material-experimental/mdc-slider",
         "//src/material-experimental/mdc-table",
         "//src/material-experimental/mdc-tabs",
         "//src/material/button",
@@ -72,6 +71,7 @@ ng_module(
         "//src/material/select",
         "//src/material/sidenav",
         "//src/material/slide-toggle",
+        "//src/material/slider",
         "//src/material/tabs",
         "@npm//@angular/animations",
         "@npm//@angular/core",

src/e2e-app/mdc-slider/mdc-slider-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {MdcSliderE2e} from './mdc-slider-e2e';
 
 @NgModule({

src/material-experimental/_index.scss

@@ -32,8 +32,6 @@
 @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
   mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
   mdc-progress-spinner-theme;
-@forward './mdc-slider/slider-theme' as mdc-slider-* show mdc-slider-color,
-  mdc-slider-typography, mdc-slider-density, mdc-slider-theme;
 @forward './mdc-snack-bar/snack-bar-theme' as mdc-snack-bar-* show mdc-snack-bar-color,
   mdc-snack-bar-typography, mdc-snack-bar-density, mdc-snack-bar-theme;
 @forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography,

src/material-experimental/config.bzl

@@ -11,8 +11,6 @@ entryPoints = [
     "mdc-paginator/testing",
     "mdc-progress-spinner",
     "mdc-progress-spinner/testing",
-    "mdc-slider",
-    "mdc-slider/testing",
     "mdc-snack-bar",
     "mdc-snack-bar/testing",
     "mdc-table",

src/material-experimental/mdc-core/theming/BUILD.bazel

@@ -26,7 +26,6 @@ sass_library(
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",
         "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib",
-        "//src/material-experimental/mdc-slider:mdc_slider_scss_lib",
         "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
@@ -39,6 +38,7 @@ sass_library(
         "//src/material/input:input_scss_lib",
         "//src/material/progress-bar:progress_bar_scss_lib",
         "//src/material/slide-toggle:slide_toggle_scss_lib",
+        "//src/material/slider:slider_scss_lib",
         "//src/material/tooltip:tooltip_scss_lib",
     ],
 )

src/material-experimental/mdc-core/theming/_all-theme.scss

@@ -6,7 +6,6 @@
 @use '../../mdc-button/icon-button-theme';
 @use '../../mdc-list/list-theme';
 @use '../../mdc-menu/menu-theme';
-@use '../../mdc-slider/slider-theme';
 @use '../../mdc-snack-bar/snack-bar-theme';
 @use '../../mdc-tabs/tabs-theme';
 @use '../../mdc-table/table-theme';
@@ -33,7 +32,7 @@
     @include mat.radio-theme($theme-or-color-config);
     @include mat.select-theme($theme-or-color-config);
     @include mat.slide-toggle-theme($theme-or-color-config);
-    @include slider-theme.theme($theme-or-color-config);
+    @include mat.slider-theme($theme-or-color-config);
     @include snack-bar-theme.theme($theme-or-color-config);
     @include table-theme.theme($theme-or-color-config);
     @include mat.form-field-theme($theme-or-color-config);