feat(material-experimental): initial prototype of mdc-form-field

Initial prototype of form-field based on MDC text-field.
angular · Dec 9, 2019 · bb8d163 · bb8d163
1 parent 27fae29
commit bb8d163
Show file tree

Hide file tree

Showing 49 changed files with 3,986 additions and 4 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -97,7 +97,9 @@
 /src/material-experimental/mdc-checkbox/**         @mmalerba
 /src/material-experimental/mdc-chips/**            @mmalerba
 /src/material-experimental/mdc-dialog/**           @devversion
+/src/material-experimental/mdc-form-field/**       @devversion @mmalerba
 /src/material-experimental/mdc-helpers/**          @mmalerba
+/src/material-experimental/mdc-input/**            @devversion @mmalerba
 /src/material-experimental/mdc-menu/**             @crisbeto
 /src/material-experimental/mdc-select/**           @crisbeto
 /src/material-experimental/mdc-progress-spinner/** @andrewseguin
@@ -161,6 +163,7 @@
 /src/dev-app/mdc-card/**                           @mmalerba
 /src/dev-app/mdc-checkbox/**                       @mmalerba
 /src/dev-app/mdc-chips/**                          @mmalerba
+/src/dev-app/mdc-input/**                          @devversion @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-radio/**                          @mmalerba

diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
@@ -48,6 +48,7 @@ ng_module(
         "//src/dev-app/mdc-card",
         "//src/dev-app/mdc-checkbox",
         "//src/dev-app/mdc-chips",
+        "//src/dev-app/mdc-input",
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-radio",

diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
@@ -79,6 +79,7 @@ export class DevAppLayout {
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
+    {name: 'MDC Input', route: '/mdc-input'},
   ];
 
   constructor(

diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts
@@ -63,6 +63,7 @@ export const DEV_APP_ROUTES: Routes = [
     loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
   },
   {path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
+  {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {

diff --git a/src/dev-app/mdc-input/BUILD.bazel b/src/dev-app/mdc-input/BUILD.bazel
@@ -0,0 +1,34 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+ng_module(
+    name = "mdc-input",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        ":mdc_input_demo_scss",
+        "mdc-input-demo.html",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material/autocomplete",
+        "//src/material/button",
+        "//src/material/button-toggle",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/icon",
+        "//src/material/tabs",
+        "//src/material/toolbar",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_input_demo_scss",
+    src = "mdc-input-demo.scss",
+    deps = [
+        "//src/cdk/text-field:text_field_scss_lib",
+    ],
+)
diff --git a/src/dev-app/mdc-input/mdc-input-demo-module.ts b/src/dev-app/mdc-input/mdc-input-demo-module.ts
@@ -0,0 +1,44 @@
+/**
+ * @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 {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {RouterModule} from '@angular/router';
+import {MdcInputDemo} from './mdc-input-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatTabsModule,
+    MatToolbarModule,
+    ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: MdcInputDemo}]),
+  ],
+  declarations: [MdcInputDemo],
+})
+export class MdcInputDemoModule {}