prototype(slider): create prototype slider based on MDC web

.github/CODEOWNERS

@@ -101,7 +101,6 @@
 # Note to implementer: please repossess
 /src/material-experimental/mdc-radio/**            @mmalerba
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
-# Note to implementer: please repossess
 /src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/mdc-sidenav/**          @crisbeto
@@ -161,6 +160,7 @@
 # Note to implementer: please repossess
 /src/dev-app/mdc-radio/**                          @mmalerba
 /src/dev-app/mdc-slide-toggle/**                   @crisbeto
+/src/dev-app/mdc-slider/**                         @devversion
 /src/dev-app/mdc-tabs/**                           @crisbeto
 /src/dev-app/menu/**                               @crisbeto
 /src/dev-app/overlay/**                            @jelbourn @crisbeto

packages.bzl

@@ -96,6 +96,7 @@ MATERIAL_EXPERIMENTAL_PACKAGES = [
     "mdc-menu",
     "mdc-radio",
     "mdc-slide-toggle",
+    "mdc-slider",
     "popover-edit",
 ]
 

src/dev-app/BUILD.bazel

@@ -48,6 +48,7 @@ ng_module(
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-slide-toggle",
+        "//src/dev-app/mdc-slider",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
         "//src/dev-app/paginator",

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

@@ -78,6 +78,7 @@ export class DevAppLayout {
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
+    {name: 'MDC Slider', route: '/mdc-slider'},
 
   ];
 

src/dev-app/dev-app/routes.ts

@@ -62,6 +62,7 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'mdc-slide-toggle',
     loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
   },
+  {path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
   {path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
   {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
   {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},

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

@@ -0,0 +1,17 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "mdc-slider",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-slider-demo.html",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-slider",
+        "//src/material/tabs",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
+import {MatTabsModule} from '@angular/material/tabs';
+import {RouterModule} from '@angular/router';
+import {MdcSliderDemo} from './mdc-slider-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatSliderModule,
+    MatTabsModule,
+    RouterModule.forChild([{path: '', component: MdcSliderDemo}]),
+  ],
+  declarations: [MdcSliderDemo],
+})
+export class MdcSliderDemoModule {
+}

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

@@ -0,0 +1,53 @@
+<h1>Default Slider</h1>
+Label <mat-slider #slidey aria-label="Basic slider"></mat-slider>
+{{slidey.value}}
+
+<h1>Colors</h1>
+<mat-slider color="primary" value="50" thumbLabel aria-label="Primary color slider"></mat-slider>
+<mat-slider color="accent" value="50" thumbLabel aria-label="Accent color slider"></mat-slider>
+<mat-slider color="warn" value="50" thumbLabel aria-label="Warn color slider"></mat-slider>
+
+<h1>Slider with Min and Max</h1>
+<input [(ngModel)]="min" type="number">
+<mat-slider [min]="min" [max]="max" tickInterval="5" #slider2 aria-label="Min & max slider">
+</mat-slider>
+{{slider2.value}}
+<input [(ngModel)]="max" type="number">
+
+<h1>Disabled Slider</h1>
+<mat-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
+</mat-slider>
+<input [(ngModel)]="disabledValue" type="number">
+
+<h1>Slider with set value</h1>
+<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
+
+<h1>Slider with step defined</h1>
+<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></mat-slider>
+{{slider5.value}}
+
+<h1>Slider with set tick interval</h1>
+<mat-slider tickInterval="auto" aria-label="Slider with auto ticks"></mat-slider>
+<mat-slider tickInterval="9" aria-label="Slider with ticks"></mat-slider>
+
+<h1>Slider with Thumb Label</h1>
+<mat-slider thumbLabel aria-label="Slider with thumb label"></mat-slider>
+
+<h1>Slider with one-way binding</h1>
+<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
+<input [(ngModel)]="val" type="number">
+
+<h1>Slider with two-way binding</h1>
+<mat-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></mat-slider>
+<input [(ngModel)]="demo" type="number">
+
+<h1>Set/lost focus to show thumblabel programmatically</h1>
+<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
+<button (click)="demoSlider.focus()">Focus Slider</button>
+<button (click)="demoSlider.blur()">Blur Slider</button>
+
+<mat-tab-group>
+  <mat-tab label="One">
+    <mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
+  </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'mdc-slider-demo',
+  templateUrl: 'mdc-slider-demo.html',
+})
+export class MdcSliderDemo {
+  demo: number;
+  val: number = 50;
+  min: number = 0;
+  max: number = 100;
+  disabledValue = 0;
+}

src/dev-app/system-config.js

@@ -67,6 +67,7 @@ const MATERIAL_EXPERIMENTAL_PACKAGES = [
   'mdc-menu',
   'mdc-radio',
   'mdc-slide-toggle',
+  'mdc-slider',
   'popover-edit',
 ];
 

src/dev-app/theme.scss

@@ -7,6 +7,7 @@
 @import '../material-experimental/mdc-menu/mdc-menu';
 @import '../material-experimental/mdc-radio/mdc-radio';
 @import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
+@import '../material-experimental/mdc-slider/mdc-slider';
 @import '../material-experimental/mdc-tabs/mdc-tabs';
 @import '../material-experimental/popover-edit/popover-edit';
 
@@ -25,6 +26,7 @@
 @include mat-menu-typography-mdc(mat-typography-config());
 @include mat-radio-typography-mdc(mat-typography-config());
 @include mat-slide-toggle-typography-mdc(mat-typography-config());
+@include mat-slider-typography-mdc(mat-typography-config());
 @include mat-tabs-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
@@ -43,6 +45,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-menu-theme-mdc($candy-app-theme);
 @include mat-radio-theme-mdc($candy-app-theme);
 @include mat-slide-toggle-theme-mdc($candy-app-theme);
+@include mat-slider-theme-mdc($candy-app-theme);
 @include mat-tabs-theme-mdc($candy-app-theme);
 @include mat-edit-theme($candy-app-theme);
 @include mat-edit-typography(mat-typography-config());
@@ -67,6 +70,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
   @include mat-menu-theme-mdc($dark-theme);
   @include mat-radio-theme-mdc($dark-theme);
   @include mat-slide-toggle-theme-mdc($dark-theme);
+  @include mat-slider-theme-mdc($dark-theme);
   @include mat-tabs-theme-mdc($dark-theme);
   @include mat-edit-theme($dark-theme);
 }

src/e2e-app/BUILD.bazel

@@ -8,6 +8,7 @@ load("//:packages.bzl", "ANGULAR_LIBRARY_UMDS")
 exports_files([
     "protractor.conf.js",
     "start-devserver.js",
+    "devserver-configure.js",
 ])
 
 ng_module(

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -11,6 +11,8 @@
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-without(mdc-feature-any(color, typography));
+$mat-base-styles-without-animation-query:
+    mdc-feature-all($mat-base-styles-query, mdc-feature-without(animation));
 $mat-theme-styles-query: color;
 $mat-typography-styles-query: typography;
 

src/material-experimental/mdc-slider/BUILD.bazel

@@ -0,0 +1,87 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+
+ng_module(
+    name = "mdc-slider",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":slider_scss"] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-slider",
+    deps = [
+        "//src/material/core",
+        "@npm//@angular/forms",
+        "@npm//@material/slider",
+    ],
+)
+
+sass_library(
+    name = "mdc_slider_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "slider_scss",
+    src = "slider.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+###########
+# Testing
+###########
+
+ng_test_library(
+    name = "slider_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":mdc-slider",
+        "//src/cdk/bidi",
+        "//src/cdk/keycodes",
+        "//src/cdk/platform",
+        "//src/cdk/testing",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
+    deps = [
+        ":slider_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+        "//src/material-experimental/mdc-slider/harness:tests_lib",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/private/testing/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/private/testing/e2e",
+    ],
+)

src/material-experimental/mdc-slider/README.md

@@ -0,0 +1 @@
+This is a placeholder for the MDC-based implementation of slider.

src/material-experimental/mdc-slider/_mdc-slider.scss

@@ -0,0 +1,24 @@
+@import '../mdc-helpers/mdc-helpers';
+@import '@material/slider/mixins';
+
+@mixin mat-slider-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    @include mdc-slider-core-styles($query: $mat-theme-styles-query);
+
+    .mat-mdc-slider {
+      &.mat-primary {
+        @include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
+      }
+
+      &.mat-warn {
+        @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
+      }
+    }
+  }
+}
+
+@mixin mat-slider-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    @include mdc-slider-core-styles($query: $mat-typography-styles-query);
+  }
+}

src/material-experimental/mdc-slider/harness/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+load("//tools:defaults.bzl", "ng_test_library", "ts_library")
 
 ts_library(
     name = "harness",
@@ -15,7 +15,7 @@ ts_library(
 )
 
 ng_test_library(
-    name = "harness_tests",
+    name = "tests_lib",
     srcs = glob(["**/*.spec.ts"]),
     deps = [
         ":harness",
@@ -24,8 +24,3 @@ ng_test_library(
         "//src/material/slider",
     ],
 )
-
-ng_web_test_suite(
-    name = "tests",
-    deps = [":harness_tests"],
-)

src/material-experimental/mdc-slider/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/material-experimental/mdc-slider/module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatSlider} from './slider';
+
+@NgModule({
+  imports: [MatCommonModule, CommonModule],
+  exports: [MatSlider, MatCommonModule],
+  declarations: [MatSlider],
+})
+export class MatSliderModule {
+}