Skip to content

Commit 76f4f3c

Browse files
crisbetocrisbeto
committed
docs(material/legacy-input): restore docs examples
Restores the docs examples for the legacy `matInput` which were deleted in #25374.
1 parent f7385ff commit 76f4f3c

27 files changed

+463
-2
lines changed

‎src/components-examples/material/legacy-input/BUILD.bazel

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-input",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
assets = glob([
12+
"**/*.html",
13+
"**/*.css",
14+
]),
15+
deps = [
16+
"//src/cdk/testing",
17+
"//src/cdk/testing/testbed",
18+
"//src/material/icon",
19+
"//src/material/legacy-button",
20+
"//src/material/legacy-input",
21+
"//src/material/legacy-input/testing",
22+
"@npm//@angular/forms",
23+
"@npm//@angular/platform-browser",
24+
"@npm//@angular/platform-browser-dynamic",
25+
"@npm//@types/jasmine",
26+
],
27+
)
28+
29+
filegroup(
30+
name = "source-files",
31+
srcs = glob([
32+
"**/*.html",
33+
"**/*.css",
34+
"**/*.ts",
35+
]),
36+
)
37+
38+
ng_test_library(
39+
name = "unit_tests_lib",
40+
srcs = glob(["**/*.spec.ts"]),
41+
deps = [
42+
":legacy-input",
43+
"//src/cdk/testing",
44+
"//src/cdk/testing/testbed",
45+
"//src/material/legacy-input",
46+
"//src/material/legacy-input/testing",
47+
"@npm//@angular/forms",
48+
"@npm//@angular/platform-browser",
49+
"@npm//@angular/platform-browser-dynamic",
50+
],
51+
)
52+
53+
ng_web_test_suite(
54+
name = "unit_tests",
55+
deps = [":unit_tests_lib"],
56+
)

‎src/components-examples/material/legacy-input/index.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {CommonModule} from '@angular/common';
2+
import {NgModule} from '@angular/core';
3+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
5+
import {MatIconModule} from '@angular/material/icon';
6+
import {MatLegacyInputModule} from '@angular/material/legacy-input';
7+
import {LegacyInputClearableExample} from './legacy-input-clearable/legacy-input-clearable-example';
8+
import {LegacyInputErrorStateMatcherExample} from './legacy-input-error-state-matcher/legacy-input-error-state-matcher-example';
9+
import {LegacyInputErrorsExample} from './legacy-input-errors/legacy-input-errors-example';
10+
import {LegacyInputFormExample} from './legacy-input-form/legacy-input-form-example';
11+
import {LegacyInputHintExample} from './legacy-input-hint/legacy-input-hint-example';
12+
import {LegacyInputOverviewExample} from './legacy-input-overview/legacy-input-overview-example';
13+
import {LegacyInputPrefixSuffixExample} from './legacy-input-prefix-suffix/legacy-input-prefix-suffix-example';
14+
import {LegacyInputHarnessExample} from './legacy-input-harness/legacy-input-harness-example';
15+
16+
export {
17+
LegacyInputClearableExample,
18+
LegacyInputErrorStateMatcherExample,
19+
LegacyInputErrorsExample,
20+
LegacyInputFormExample,
21+
LegacyInputHarnessExample,
22+
LegacyInputHintExample,
23+
LegacyInputOverviewExample,
24+
LegacyInputPrefixSuffixExample,
25+
};
26+
27+
const EXAMPLES = [
28+
LegacyInputClearableExample,
29+
LegacyInputErrorStateMatcherExample,
30+
LegacyInputErrorsExample,
31+
LegacyInputFormExample,
32+
LegacyInputHarnessExample,
33+
LegacyInputHintExample,
34+
LegacyInputOverviewExample,
35+
LegacyInputPrefixSuffixExample,
36+
];
37+
38+
@NgModule({
39+
imports: [
40+
CommonModule,
41+
MatLegacyButtonModule,
42+
MatIconModule,
43+
MatLegacyInputModule,
44+
FormsModule,
45+
ReactiveFormsModule,
46+
],
47+
declarations: EXAMPLES,
48+
exports: EXAMPLES,
49+
})
50+
export class LegacyInputExamplesModule {}

‎src/components-examples/material/legacy-input/legacy-input-clearable/legacy-input-clearable-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-form-field {
2+
width: 200px;
3+
}

‎src/components-examples/material/legacy-input/legacy-input-clearable/legacy-input-clearable-example.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<mat-form-field class="example-form-field" appearance="fill">
2+
<mat-label>Clearable input</mat-label>
3+
<input matInput type="text" [(ngModel)]="value">
4+
<button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
5+
<mat-icon>close</mat-icon>
6+
</button>
7+
</mat-form-field>

‎src/components-examples/material/legacy-input/legacy-input-clearable/legacy-input-clearable-example.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Input with a clear button
5+
*/
6+
@Component({
7+
selector: 'legacy-input-clearable-example',
8+
templateUrl: './legacy-input-clearable-example.html',
9+
styleUrls: ['./legacy-input-clearable-example.css'],
10+
})
11+
export class LegacyInputClearableExample {
12+
value = 'Clear me';
13+
}

‎src/components-examples/material/legacy-input/legacy-input-error-state-matcher/legacy-input-error-state-matcher-example.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.example-form {
2+
min-width: 150px;
3+
max-width: 500px;
4+
width: 100%;
5+
}
6+
7+
.example-full-width {
8+
width: 100%;
9+
}

‎src/components-examples/material/legacy-input/legacy-input-error-state-matcher/legacy-input-error-state-matcher-example.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<form class="example-form">
2+
<mat-form-field class="example-full-width" appearance="fill">
3+
<mat-label>Email</mat-label>
4+
<input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
5+
placeholder="Ex. [email protected]">
6+
<mat-hint>Errors appear instantly!</mat-hint>
7+
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
8+
Please enter a valid email address
9+
</mat-error>
10+
<mat-error *ngIf="emailFormControl.hasError('required')">
11+
Email is <strong>required</strong>
12+
</mat-error>
13+
</mat-form-field>
14+
</form>

‎src/components-examples/material/legacy-input/legacy-input-error-state-matcher/legacy-input-error-state-matcher-example.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component} from '@angular/core';
2+
import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
3+
import {ErrorStateMatcher} from '@angular/material/core';
4+
5+
/** Error when invalid control is dirty, touched, or submitted. */
6+
export class MyErrorStateMatcher implements ErrorStateMatcher {
7+
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
8+
const isSubmitted = form && form.submitted;
9+
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
10+
}
11+
}
12+
13+
/** @title Input with a custom ErrorStateMatcher */
14+
@Component({
15+
selector: 'legacy-input-error-state-matcher-example',
16+
templateUrl: './legacy-input-error-state-matcher-example.html',
17+
styleUrls: ['./legacy-input-error-state-matcher-example.css'],
18+
})
19+
export class LegacyInputErrorStateMatcherExample {
20+
emailFormControl = new FormControl('', [Validators.required, Validators.email]);
21+
22+
matcher = new MyErrorStateMatcher();
23+
}

‎src/components-examples/material/legacy-input/legacy-input-errors/legacy-input-errors-example.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.example-form {
2+
min-width: 150px;
3+
max-width: 500px;
4+
width: 100%;
5+
}
6+
7+
.example-full-width {
8+
width: 100%;
9+
}

‎src/components-examples/material/legacy-input/legacy-input-errors/legacy-input-errors-example.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<form class="example-form">
2+
<mat-form-field class="example-full-width" appearance="fill">
3+
<mat-label>Email</mat-label>
4+
<input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
5+
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
6+
Please enter a valid email address
7+
</mat-error>
8+
<mat-error *ngIf="emailFormControl.hasError('required')">
9+
Email is <strong>required</strong>
10+
</mat-error>
11+
</mat-form-field>
12+
</form>

‎src/components-examples/material/legacy-input/legacy-input-errors/legacy-input-errors-example.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
import {FormControl, Validators} from '@angular/forms';
3+
4+
/**
5+
* @title Input with error messages
6+
*/
7+
@Component({
8+
selector: 'legacy-input-errors-example',
9+
templateUrl: 'legacy-input-errors-example.html',
10+
styleUrls: ['legacy-input-errors-example.css'],
11+
})
12+
export class LegacyInputErrorsExample {
13+
emailFormControl = new FormControl('', [Validators.required, Validators.email]);
14+
}

‎src/components-examples/material/legacy-input/legacy-input-form/legacy-input-form-example.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.example-form {
2+
min-width: 150px;
3+
max-width: 500px;
4+
width: 100%;
5+
}
6+
7+
.example-full-width {
8+
width: 100%;
9+
}
10+
11+
td {
12+
padding-right: 8px;
13+
}

‎src/components-examples/material/legacy-input/legacy-input-form/legacy-input-form-example.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<form class="example-form">
2+
<mat-form-field class="example-full-width" appearance="fill">
3+
<mat-label>Company (disabled)</mat-label>
4+
<input matInput disabled value="Google">
5+
</mat-form-field>
6+
7+
<table class="example-full-width" cellspacing="0"><tr>
8+
<td><mat-form-field class="example-full-width" appearance="fill">
9+
<mat-label>First name</mat-label>
10+
<input matInput>
11+
</mat-form-field></td>
12+
<td><mat-form-field class="example-full-width" appearance="fill">
13+
<mat-label>Long Last Name That Will Be Truncated</mat-label>
14+
<input matInput>
15+
</mat-form-field></td>
16+
</tr></table>
17+
18+
<p>
19+
<mat-form-field class="example-full-width" appearance="fill">
20+
<mat-label>Address</mat-label>
21+
<textarea matInput placeholder="Ex. 100 Main St">1600 Amphitheatre Pkwy</textarea>
22+
</mat-form-field>
23+
<mat-form-field class="example-full-width" appearance="fill">
24+
<mat-label>Address 2</mat-label>
25+
<textarea matInput></textarea>
26+
</mat-form-field>
27+
</p>
28+
29+
<table class="example-full-width" cellspacing="0"><tr>
30+
<td><mat-form-field class="example-full-width" appearance="fill">
31+
<mat-label>City</mat-label>
32+
<input matInput placeholder="Ex. San Francisco">
33+
</mat-form-field></td>
34+
<td><mat-form-field class="example-full-width" appearance="fill">
35+
<mat-label>State</mat-label>
36+
<input matInput placeholder="Ex. California">
37+
</mat-form-field></td>
38+
<td><mat-form-field class="example-full-width" appearance="fill">
39+
<mat-label>Postal Code</mat-label>
40+
<input matInput #postalCode maxlength="5" placeholder="Ex. 94105" value="94043">
41+
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
42+
</mat-form-field></td>
43+
</tr></table>
44+
</form>

‎src/components-examples/material/legacy-input/legacy-input-form/legacy-input-form-example.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Inputs in a form
5+
*/
6+
@Component({
7+
selector: 'legacy-input-form-example',
8+
templateUrl: 'legacy-input-form-example.html',
9+
styleUrls: ['legacy-input-form-example.css'],
10+
})
11+
export class LegacyInputFormExample {}

‎src/components-examples/material/legacy-input/legacy-input-harness/legacy-input-harness-example.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<mat-form-field appearance="fill">
2+
<mat-label>Favorite food</mat-label>
3+
<input matInput value="Sushi" name="favorite-food">
4+
</mat-form-field>
5+
6+
<mat-form-field appearance="fill">
7+
<input matInput [type]="inputType"
8+
[disabled]="disabled">
9+
</mat-form-field>
10+
11+
<mat-form-field appearance="fill">
12+
<mat-label>Leave a comment</mat-label>
13+
<textarea matInput></textarea>
14+
</mat-form-field>

‎src/components-examples/material/legacy-input/legacy-input-harness/legacy-input-harness-example.spec.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing';
4+
import {HarnessLoader} from '@angular/cdk/testing';
5+
import {MatLegacyInputModule} from '@angular/material/legacy-input';
6+
import {LegacyInputHarnessExample} from './legacy-input-harness-example';
7+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
8+
import {ReactiveFormsModule} from '@angular/forms';
9+
10+
describe('LegacyInputHarnessExample', () => {
11+
let fixture: ComponentFixture<LegacyInputHarnessExample>;
12+
let loader: HarnessLoader;
13+
14+
beforeEach(async () => {
15+
await TestBed.configureTestingModule({
16+
imports: [MatLegacyInputModule, NoopAnimationsModule, ReactiveFormsModule],
17+
declarations: [LegacyInputHarnessExample],
18+
}).compileComponents();
19+
fixture = TestBed.createComponent(LegacyInputHarnessExample);
20+
fixture.detectChanges();
21+
loader = TestbedHarnessEnvironment.loader(fixture);
22+
});
23+
24+
it('should load all input harnesses', async () => {
25+
const inputs = await loader.getAllHarnesses(MatLegacyInputHarness);
26+
expect(inputs.length).toBe(3);
27+
});
28+
29+
it('should load input with a specific value', async () => {
30+
const inputs = await loader.getAllHarnesses(MatLegacyInputHarness.with({value: 'Sushi'}));
31+
expect(inputs.length).toBe(1);
32+
});
33+
34+
it('should be able to set value of input', async () => {
35+
const inputs = await loader.getAllHarnesses(MatLegacyInputHarness);
36+
const input = inputs[0];
37+
expect(await input.getValue()).toBe('Sushi');
38+
39+
await input.setValue('');
40+
41+
expect(await input.getValue()).toBe('');
42+
});
43+
44+
it('should be able to get disabled state', async () => {
45+
const inputs = await loader.getAllHarnesses(MatLegacyInputHarness);
46+
expect(inputs.length).toBe(3);
47+
48+
expect(await inputs[0].isDisabled()).toBe(false);
49+
expect(await inputs[1].isDisabled()).toBe(false);
50+
expect(await inputs[2].isDisabled()).toBe(false);
51+
52+
fixture.componentInstance.disabled = true;
53+
54+
expect(await inputs[1].isDisabled()).toBe(true);
55+
});
56+
57+
it('should be able to get type of input', async () => {
58+
const inputs = await loader.getAllHarnesses(MatLegacyInputHarness);
59+
expect(inputs.length).toBe(3);
60+
61+
expect(await inputs[0].getType()).toBe('text');
62+
expect(await inputs[1].getType()).toBe('number');
63+
expect(await inputs[2].getType()).toBe('textarea');
64+
65+
fixture.componentInstance.inputType = 'text';
66+
67+
expect(await inputs[1].getType()).toBe('text');
68+
});
69+
});

‎src/components-examples/material/legacy-input/legacy-input-harness/legacy-input-harness-example.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Testing with MatInputHarness
5+
*/
6+
@Component({
7+
selector: 'legacy-input-harness-example',
8+
templateUrl: 'legacy-input-harness-example.html',
9+
})
10+
export class LegacyInputHarnessExample {
11+
inputType = 'number';
12+
disabled = false;
13+
}

0 commit comments

Comments
 (0)