feat(material-experimental): initial boilerplate for mdc-slider prototype

Author: devversion

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

@@ -0,0 +1,57 @@
+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_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",
+    ],
+)
+
+sass_library(
+    name = "slider_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "slider_scss",
+    src = "slider.scss",
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
+    deps = [
+        # TODO: add slider tests target here.
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+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,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-slider-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: MDC theme styles here.
+  }
+}
+
+@mixin mat-slider-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: MDC typography styles here.
+  }
+}

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 {
+}

src/material-experimental/mdc-slider/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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 './slider';
+export * from './module';

src/material-experimental/mdc-slider/slider.e2e.spec.ts

@@ -0,0 +1 @@
+// TODO: copy tests from existing mat-slider, update as necessary to fix.

src/material-experimental/mdc-slider/slider.html

@@ -0,0 +1 @@
+<!-- TODO: MDC template here. -->

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

@@ -0,0 +1 @@
+// TODO: MDC core styles here.

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

@@ -0,0 +1,25 @@
+/**
+ * @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 {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mat-slider',
+  templateUrl: 'slider.html',
+  styleUrls: ['slider.css'],
+  host: {
+    'class': 'mat-mdc-slider',
+  },
+  exportAs: 'matSlider',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatSlider {
+  // TODO: set up MDC foundation class.
+}