feat(material-experimental): initial prototype of mdc-form-fie… (#17903)

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

Initial prototype of form-field based on MDC text-field.

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

Address feedback

* Use MDC text-field variables as much as possible.

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

Address feedback 2

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

Address feedback

Author: devversion

.github/CODEOWNERS

@@ -96,7 +96,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-list/**             @mmalerba
 /src/material-experimental/mdc-menu/**             @crisbeto
 /src/material-experimental/mdc-select/**           @crisbeto
@@ -160,6 +162,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

rollup-globals.bzl

@@ -65,7 +65,7 @@ ROLLUP_GLOBALS = {
     "@material/tab-bar": "mdc.tabBar",
     "@material/tab-indicator": "mdc.tabIndicator",
     "@material/tab-scroller": "mdc.tabScroller",
-    "@material/text-field": "mdc.textField",
+    "@material/textfield": "mdc.textfield",
     "@material/top-app-bar": "mdc.topAppBar",
 
     # Third-party libraries.

src/dev-app/BUILD.bazel

@@ -50,6 +50,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",

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

@@ -73,6 +73,7 @@ export class DevAppLayout {
     {name: 'MDC Card', route: '/mdc-card'},
     {name: 'MDC Checkbox', route: '/mdc-checkbox'},
     {name: 'MDC Chips', route: '/mdc-chips'},
+    {name: 'MDC Input', route: '/mdc-input'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},

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'},
   {

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",
+    ],
+)

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