docs(material/legacy-form-field): restore docs examples

Restores the docs examples for the legacy `mat-form-field` which were deleted in #25374.

Author: crisbeto

src/components-examples/config.bzl

@@ -40,7 +40,7 @@ ALL_EXAMPLES = [
     "//src/components-examples/material-experimental/column-resize",
     "//src/components-examples/material-experimental/popover-edit",
     "//src/components-examples/material-experimental/mdc-card",
-    "//src/components-examples/material-experimental/mdc-form-field",
+    "//src/components-examples/material/legacy-form-field",
     "//src/components-examples/material-experimental/selection",
     "//src/components-examples/cdk/tree",
     "//src/components-examples/cdk/text-field",

src/components-examples/material-experimental/mdc-form-field/BUILD.bazel

@@ -59,6 +59,6 @@ const EXAMPLES = [
     ReactiveFormsModule,
   ],
   declarations: [...EXAMPLES, MyTelInput],
-  exports: EXAMPLES,
+  exports: [...EXAMPLES, MyTelInput],
 })
 export class FormFieldExamplesModule {}

src/components-examples/material-experimental/mdc-form-field/index.ts

@@ -0,0 +1,63 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-form-field",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/icon",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-form-field/testing",
+        "//src/material/legacy-input",
+        "//src/material/legacy-input/testing",
+        "//src/material/legacy-radio",
+        "//src/material/legacy-select",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":legacy-form-field",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-form-field/testing",
+        "//src/material/legacy-input",
+        "//src/material/legacy-input/testing",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/example-tel-input-example.html

@@ -0,0 +1,64 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {LegacyFormFieldAppearanceExample} from './legacy-form-field-appearance/legacy-form-field-appearance-example';
+import {
+  LegacyFormFieldCustomControlExample,
+  MyLegacyTelInput,
+} from './legacy-form-field-custom-control/legacy-form-field-custom-control-example';
+import {LegacyFormFieldErrorExample} from './legacy-form-field-error/legacy-form-field-error-example';
+import {LegacyFormFieldHintExample} from './legacy-form-field-hint/legacy-form-field-hint-example';
+import {LegacyFormFieldLabelExample} from './legacy-form-field-label/legacy-form-field-label-example';
+import {LegacyFormFieldOverviewExample} from './legacy-form-field-overview/legacy-form-field-overview-example';
+import {LegacyFormFieldPrefixSuffixExample} from './legacy-form-field-prefix-suffix/legacy-form-field-prefix-suffix-example';
+import {LegacyFormFieldThemingExample} from './legacy-form-field-theming/legacy-legacy-form-field-theming-example';
+import {LegacyFormFieldHarnessExample} from './legacy-form-field-harness/legacy-form-field-harness-example';
+
+export {
+  LegacyFormFieldAppearanceExample,
+  LegacyFormFieldCustomControlExample,
+  LegacyFormFieldErrorExample,
+  LegacyFormFieldHarnessExample,
+  LegacyFormFieldHintExample,
+  LegacyFormFieldLabelExample,
+  LegacyFormFieldOverviewExample,
+  LegacyFormFieldPrefixSuffixExample,
+  LegacyFormFieldThemingExample,
+  MyLegacyTelInput,
+};
+
+const EXAMPLES = [
+  LegacyFormFieldAppearanceExample,
+  LegacyFormFieldCustomControlExample,
+  LegacyFormFieldErrorExample,
+  LegacyFormFieldHarnessExample,
+  LegacyFormFieldHintExample,
+  LegacyFormFieldLabelExample,
+  LegacyFormFieldOverviewExample,
+  LegacyFormFieldPrefixSuffixExample,
+  LegacyFormFieldThemingExample,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatLegacyButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyFormFieldModule,
+    MatIconModule,
+    MatLegacyInputModule,
+    MatLegacyRadioModule,
+    MatLegacySelectModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [...EXAMPLES, MyLegacyTelInput],
+  exports: EXAMPLES,
+})
+export class LegacyFormFieldExamplesModule {}

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.html

@@ -0,0 +1,32 @@
+<p>
+  <mat-form-field appearance="legacy">
+    <mat-label>Legacy form field</mat-label>
+    <input matInput placeholder="Placeholder">
+    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+    <mat-hint>Hint</mat-hint>
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="standard">
+    <mat-label>Standard form field</mat-label>
+    <input matInput placeholder="Placeholder">
+    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+    <mat-hint>Hint</mat-hint>
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="fill">
+    <mat-label>Fill form field</mat-label>
+    <input matInput placeholder="Placeholder">
+    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+    <mat-hint>Hint</mat-hint>
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="outline">
+    <mat-label>Outline form field</mat-label>
+    <input matInput placeholder="Placeholder">
+    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+    <mat-hint>Hint</mat-hint>
+  </mat-form-field>
+</p>

src/components-examples/material/form-field/index.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+/** @title Form field appearance variants */
+@Component({
+  selector: 'legacy-form-field-appearance-example',
+  templateUrl: 'legacy-form-field-appearance-example.html',
+})
+export class LegacyFormFieldAppearanceExample {}

src/components-examples/material/legacy-form-field/BUILD.bazel

@@ -0,0 +1,30 @@
+<div role="group" class="example-tel-input-container"
+     [formGroup]="parts"
+     [attr.aria-labelledby]="_formField?.getLabelId()"
+     (focusin)="onFocusIn($event)"
+     (focusout)="onFocusOut($event)">
+  <input class="example-tel-input-element"
+         formControlName="area" size="3"
+         maxLength="3"
+         aria-label="Area code"
+         (input)="_handleInput(parts.controls.area, exchange)"
+         #area>
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element"
+         formControlName="exchange"
+         maxLength="3"
+         size="3"
+         aria-label="Exchange code"
+         (input)="_handleInput(parts.controls.exchange, subscriber)"
+         (keyup.backspace)="autoFocusPrev(parts.controls.exchange, area)"
+         #exchange>
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element"
+         formControlName="subscriber"
+         maxLength="4"
+         size="4"
+         aria-label="Subscriber number"
+         (input)="_handleInput(parts.controls.subscriber)"
+         (keyup.backspace)="autoFocusPrev(parts.controls.subscriber, exchange)"
+         #subscriber>
+</div>

src/components-examples/material/legacy-form-field/index.ts

@@ -0,0 +1,8 @@
+<div [formGroup]="form">
+  <mat-form-field appearance="fill">
+    <mat-label>Phone number</mat-label>
+    <example-tel-input formControlName="tel" required></example-tel-input>
+    <mat-icon matSuffix>phone</mat-icon>
+    <mat-hint>Include area code</mat-hint>
+  </mat-form-field>
+</div>