diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f7e92f9db827..533a39abd73d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -114,7 +114,7 @@ /src/material-experimental/mdc-chips/** @mmalerba /src/material-experimental/mdc-core/** @crisbeto /src/material-experimental/mdc-dialog/** @devversion -/src/material-experimental/mdc-form-field/** @devversion @mmalerba +/src/material/form-field/** @devversion @mmalerba /src/material-experimental/mdc-list/** @mmalerba @devversion /src/material-experimental/mdc-menu/** @crisbeto /src/material-experimental/mdc-select/** @crisbeto diff --git a/src/components-examples/cdk/text-field/BUILD.bazel b/src/components-examples/cdk/text-field/BUILD.bazel index 1b7e031e92f5..8b9c41b455ea 100644 --- a/src/components-examples/cdk/text-field/BUILD.bazel +++ b/src/components-examples/cdk/text-field/BUILD.bazel @@ -12,7 +12,7 @@ ng_module( deps = [ "//src/cdk/text-field", "//src/material/button", - "//src/material/input", + "//src/material/legacy-input", "//src/material/select", ], ) diff --git a/src/components-examples/cdk/text-field/index.ts b/src/components-examples/cdk/text-field/index.ts index d75b366255c3..756215589776 100644 --- a/src/components-examples/cdk/text-field/index.ts +++ b/src/components-examples/cdk/text-field/index.ts @@ -2,7 +2,7 @@ import {TextFieldModule} from '@angular/cdk/text-field'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example'; import {TextFieldAutofillMonitorExample} from './text-field-autofill-monitor/text-field-autofill-monitor-example'; @@ -21,7 +21,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [CommonModule, TextFieldModule, MatButtonModule, MatInputModule, MatSelectModule], + imports: [CommonModule, TextFieldModule, MatButtonModule, MatLegacyInputModule, MatSelectModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel b/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel index e51734034bda..934e92af0cc3 100644 --- a/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel @@ -13,8 +13,8 @@ ng_module( "//src/cdk/a11y", "//src/cdk/coercion", "//src/material/form-field", - "//src/material/input", "//src/material/icon", + "//src/material/input", "@npm//@angular/common", "@npm//@angular/forms", "@npm//rxjs", diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel index 661cf4a7e719..25ca75b36c2b 100644 --- a/src/components-examples/material-experimental/mdc-table/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-table/BUILD.bazel @@ -23,7 +23,7 @@ ng_module( "//src/material/checkbox", "//src/material/core", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/paginator", "//src/material/progress-spinner", "//src/material/sort", diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts index a8171fd3134d..ba15b59fd2f7 100644 --- a/src/components-examples/material-experimental/mdc-table/index.ts +++ b/src/components-examples/material-experimental/mdc-table/index.ts @@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; @@ -122,7 +122,7 @@ const EXAMPLES = [ MatButtonToggleModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatRippleModule, diff --git a/src/components-examples/material-experimental/popover-edit/BUILD.bazel b/src/components-examples/material-experimental/popover-edit/BUILD.bazel index 04e7d07e7362..ea912fd5ef66 100644 --- a/src/components-examples/material-experimental/popover-edit/BUILD.bazel +++ b/src/components-examples/material-experimental/popover-edit/BUILD.bazel @@ -14,7 +14,7 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/list", "//src/material/snack-bar", "//src/material/table", diff --git a/src/components-examples/material-experimental/popover-edit/index.ts b/src/components-examples/material-experimental/popover-edit/index.ts index 8f1f6af3590c..07d8ab790d84 100644 --- a/src/components-examples/material-experimental/popover-edit/index.ts +++ b/src/components-examples/material-experimental/popover-edit/index.ts @@ -5,7 +5,7 @@ import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit' import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatListModule} from '@angular/material/list'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatTableModule} from '@angular/material/table'; @@ -34,7 +34,7 @@ const EXAMPLES = [ MatButtonModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatListModule, MatPopoverEditModule, MatSnackBarModule, diff --git a/src/components-examples/material/autocomplete/BUILD.bazel b/src/components-examples/material/autocomplete/BUILD.bazel index a6d934871958..c10db0919759 100644 --- a/src/components-examples/material/autocomplete/BUILD.bazel +++ b/src/components-examples/material/autocomplete/BUILD.bazel @@ -18,8 +18,8 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/autocomplete", "//src/material/autocomplete/testing", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/slide-toggle", "@npm//@angular/forms", "@npm//@angular/platform-browser", diff --git a/src/components-examples/material/autocomplete/index.ts b/src/components-examples/material/autocomplete/index.ts index 20aa12146afb..e23d0b99d436 100644 --- a/src/components-examples/material/autocomplete/index.ts +++ b/src/components-examples/material/autocomplete/index.ts @@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {AutocompleteAutoActiveFirstOptionExample} from './autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example'; import {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-display-example'; @@ -40,8 +40,8 @@ const EXAMPLES = [ imports: [ CommonModule, MatAutocompleteModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatSlideToggleModule, FormsModule, ReactiveFormsModule, diff --git a/src/components-examples/material/chips/BUILD.bazel b/src/components-examples/material/chips/BUILD.bazel index 94b28e48fc51..e5b9ed325f29 100644 --- a/src/components-examples/material/chips/BUILD.bazel +++ b/src/components-examples/material/chips/BUILD.bazel @@ -20,8 +20,8 @@ ng_module( "//src/material/button", "//src/material/chips", "//src/material/chips/testing", - "//src/material/form-field", "//src/material/icon", + "//src/material/legacy-form-field", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/chips/index.ts b/src/components-examples/material/chips/index.ts index cd33ffebd3ab..6aed9792f48a 100644 --- a/src/components-examples/material/chips/index.ts +++ b/src/components-examples/material/chips/index.ts @@ -4,7 +4,7 @@ import {NgModule} from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatChipsModule} from '@angular/material/chips'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {ChipsAutocompleteExample} from './chips-autocomplete/chips-autocomplete-example'; import {ChipsDragDropExample} from './chips-drag-drop/chips-drag-drop-example'; @@ -46,7 +46,7 @@ const EXAMPLES = [ MatButtonModule, MatChipsModule, MatIconModule, - MatFormFieldModule, + MatLegacyFormFieldModule, ReactiveFormsModule, ], declarations: EXAMPLES, diff --git a/src/components-examples/material/core/BUILD.bazel b/src/components-examples/material/core/BUILD.bazel index 8fb0f7d6f1a0..ad5e9f01ecd8 100644 --- a/src/components-examples/material/core/BUILD.bazel +++ b/src/components-examples/material/core/BUILD.bazel @@ -13,7 +13,7 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/core", - "//src/material/input", + "//src/material/legacy-input", "@npm//@angular/forms", ], ) diff --git a/src/components-examples/material/core/index.ts b/src/components-examples/material/core/index.ts index bd23b4852b3e..2a582934e8c8 100644 --- a/src/components-examples/material/core/index.ts +++ b/src/components-examples/material/core/index.ts @@ -3,7 +3,7 @@ import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatRippleModule} from '@angular/material/core'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {ElevationOverviewExample} from './elevation-overview/elevation-overview-example'; import {RippleOverviewExample} from './ripple-overview/ripple-overview-example'; @@ -12,7 +12,7 @@ export {ElevationOverviewExample, RippleOverviewExample}; const EXAMPLES = [ElevationOverviewExample, RippleOverviewExample]; @NgModule({ - imports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatRippleModule, FormsModule], + imports: [MatButtonModule, MatCheckboxModule, MatLegacyInputModule, MatRippleModule, FormsModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel index 77aa1b7b3b33..82246fd044d6 100644 --- a/src/components-examples/material/datepicker/BUILD.bazel +++ b/src/components-examples/material/datepicker/BUILD.bazel @@ -21,8 +21,8 @@ ng_module( "//src/material/datepicker", "//src/material/datepicker/testing", "//src/material/icon", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-input", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts index d262ad676e72..48b48a614d13 100644 --- a/src/components-examples/material/datepicker/index.ts +++ b/src/components-examples/material/datepicker/index.ts @@ -6,7 +6,7 @@ import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {DateRangePickerComparisonExample} from './date-range-picker-comparison/date-range-picker-comparison-example'; import {DateRangePickerFormsExample} from './date-range-picker-forms/date-range-picker-forms-example'; import {DateRangePickerOverviewExample} from './date-range-picker-overview/date-range-picker-overview-example'; @@ -98,7 +98,7 @@ const EXAMPLES = [ MatButtonModule, MatLegacyCardModule, MatDatepickerModule, - MatInputModule, + MatLegacyInputModule, MatIconModule, MatNativeDateModule, ReactiveFormsModule, diff --git a/src/components-examples/material/dialog/BUILD.bazel b/src/components-examples/material/dialog/BUILD.bazel index 2a82c7c9becb..b48fe5aa2942 100644 --- a/src/components-examples/material/dialog/BUILD.bazel +++ b/src/components-examples/material/dialog/BUILD.bazel @@ -18,7 +18,7 @@ ng_module( "//src/material/button", "//src/material/dialog", "//src/material/dialog/testing", - "//src/material/input", + "//src/material/legacy-input", "//src/material/menu", "@npm//@angular/forms", "@npm//@angular/platform-browser", diff --git a/src/components-examples/material/dialog/index.ts b/src/components-examples/material/dialog/index.ts index 3230cdd52d10..2e020553c896 100644 --- a/src/components-examples/material/dialog/index.ts +++ b/src/components-examples/material/dialog/index.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatDialogModule} from '@angular/material/dialog'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatMenuModule} from '@angular/material/menu'; import { DialogContentExample, @@ -65,7 +65,7 @@ const EXAMPLES = [ CommonModule, MatButtonModule, MatDialogModule, - MatInputModule, + MatLegacyInputModule, MatMenuModule, FormsModule, ], diff --git a/src/components-examples/material/expansion/BUILD.bazel b/src/components-examples/material/expansion/BUILD.bazel index 23c22d84c9fd..bceb514c6edc 100644 --- a/src/components-examples/material/expansion/BUILD.bazel +++ b/src/components-examples/material/expansion/BUILD.bazel @@ -20,7 +20,7 @@ ng_module( "//src/material/expansion", "//src/material/expansion/testing", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", "@npm//@types/jasmine", diff --git a/src/components-examples/material/expansion/index.ts b/src/components-examples/material/expansion/index.ts index c60287cd72e9..c3832dbfc344 100644 --- a/src/components-examples/material/expansion/index.ts +++ b/src/components-examples/material/expansion/index.ts @@ -4,7 +4,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/core'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {ExpansionExpandCollapseAllExample} from './expansion-expand-collapse-all/expansion-expand-collapse-all-example'; import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example'; import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example'; @@ -31,7 +31,7 @@ const EXAMPLES = [ MatNativeDateModule, MatExpansionModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, ], declarations: EXAMPLES, exports: EXAMPLES, diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel index 82d4e5b025b3..7ff074e97bcb 100644 --- a/src/components-examples/material/form-field/BUILD.bazel +++ b/src/components-examples/material/form-field/BUILD.bazel @@ -17,11 +17,11 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/checkbox", - "//src/material/form-field", - "//src/material/form-field/testing", "//src/material/icon", - "//src/material/input", - "//src/material/input/testing", + "//src/material/legacy-form-field", + "//src/material/legacy-form-field/testing", + "//src/material/legacy-input", + "//src/material/legacy-input/testing", "//src/material/radio", "//src/material/select", "@npm//@angular/forms", @@ -47,10 +47,10 @@ ng_test_library( ":form-field", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/form-field", - "//src/material/form-field/testing", - "//src/material/input", - "//src/material/input/testing", + "//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", diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts index 797366ea3324..d558398c5059 100644 --- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts +++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts @@ -19,7 +19,11 @@ import { NgControl, Validators, } from '@angular/forms'; -import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field'; +import { + MAT_FORM_FIELD, + MatLegacyFormField, + MatLegacyFormFieldControl, +} from '@angular/material/legacy-form-field'; import {Subject} from 'rxjs'; /** @title Form field with custom telephone number input control. */ @@ -43,13 +47,15 @@ export class MyTel { selector: 'example-tel-input', templateUrl: 'example-tel-input-example.html', styleUrls: ['example-tel-input-example.css'], - providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}], + providers: [{provide: MatLegacyFormFieldControl, useExisting: MyTelInput}], host: { '[class.example-floating]': 'shouldLabelFloat', '[id]': 'id', }, }) -export class MyTelInput implements ControlValueAccessor, MatFormFieldControl, OnDestroy { +export class MyTelInput + implements ControlValueAccessor, MatLegacyFormFieldControl, OnDestroy +{ static nextId = 0; @ViewChild('area') areaInput: HTMLInputElement; @ViewChild('exchange') exchangeInput: HTMLInputElement; @@ -137,7 +143,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl, - @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField, + @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatLegacyFormField, @Optional() @Self() public ngControl: NgControl, ) { if (this.ngControl != null) { diff --git a/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts b/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts index 77e14d92c1c9..4123f127b500 100644 --- a/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts +++ b/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts @@ -1,13 +1,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatFormFieldHarness} from '@angular/material/form-field/testing'; +import {MatLegacyFormFieldHarness} from '@angular/material/legacy-form-field/testing'; import {HarnessLoader} from '@angular/cdk/testing'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {FormFieldHarnessExample} from './form-field-harness-example'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {ReactiveFormsModule} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MatInputHarness} from '@angular/material/input/testing'; +import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing'; describe('FormFieldHarnessExample', () => { let fixture: ComponentFixture; @@ -15,7 +15,12 @@ describe('FormFieldHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NoopAnimationsModule], + imports: [ + MatLegacyFormFieldModule, + MatLegacyInputModule, + ReactiveFormsModule, + NoopAnimationsModule, + ], declarations: [FormFieldHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(FormFieldHarnessExample); @@ -24,28 +29,28 @@ describe('FormFieldHarnessExample', () => { }); it('should be able to load harnesses', async () => { - const formFields = await loader.getAllHarnesses(MatFormFieldHarness); + const formFields = await loader.getAllHarnesses(MatLegacyFormFieldHarness); expect(formFields.length).toBe(1); }); it('should be able to get control of form-field', async () => { - const formField = await loader.getHarness(MatFormFieldHarness); - expect((await formField.getControl()) instanceof MatInputHarness).toBe(true); + const formField = await loader.getHarness(MatLegacyFormFieldHarness); + expect((await formField.getControl()) instanceof MatLegacyInputHarness).toBe(true); }); it('should be able to get error messages and hints of form-field', async () => { - const formField = await loader.getHarness(MatFormFieldHarness); + const formField = await loader.getHarness(MatLegacyFormFieldHarness); expect(await formField.getTextErrors()).toEqual([]); expect(await formField.getTextHints()).toEqual(['Hint']); fixture.componentInstance.requiredControl.setValue(''); - await ((await formField.getControl()) as MatInputHarness)?.blur(); + await ((await formField.getControl()) as MatLegacyInputHarness)?.blur(); expect(await formField.getTextErrors()).toEqual(['Error']); expect(await formField.getTextHints()).toEqual([]); }); it('should be able to check if form field is invalid', async () => { - const formField = await loader.getHarness(MatFormFieldHarness); + const formField = await loader.getHarness(MatLegacyFormFieldHarness); expect(await formField.isControlValid()).toBe(true); fixture.componentInstance.requiredControl.setValue(''); diff --git a/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts b/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts index 66cd8db9adb0..5ef6bcb2f5e1 100644 --- a/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts +++ b/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {FormBuilder, FormControl} from '@angular/forms'; -import {FloatLabelType} from '@angular/material/form-field'; +import {FloatLabelType} from '@angular/material/legacy-form-field'; /** @title Form field with label */ @Component({ diff --git a/src/components-examples/material/form-field/index.ts b/src/components-examples/material/form-field/index.ts index 3c54b6e6ac03..5c6f65c78abe 100644 --- a/src/components-examples/material/form-field/index.ts +++ b/src/components-examples/material/form-field/index.ts @@ -3,9 +3,9 @@ import {NgModule} from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example'; @@ -51,9 +51,9 @@ const EXAMPLES = [ CommonModule, MatButtonModule, MatCheckboxModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatRadioModule, MatSelectModule, ReactiveFormsModule, diff --git a/src/components-examples/material/input/BUILD.bazel b/src/components-examples/material/input/BUILD.bazel index effa093d61bd..18a85f450c8d 100644 --- a/src/components-examples/material/input/BUILD.bazel +++ b/src/components-examples/material/input/BUILD.bazel @@ -17,8 +17,8 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/icon", - "//src/material/input", - "//src/material/input/testing", + "//src/material/legacy-input", + "//src/material/legacy-input/testing", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", @@ -42,8 +42,8 @@ ng_test_library( ":input", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/input", - "//src/material/input/testing", + "//src/material/legacy-input", + "//src/material/legacy-input/testing", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/input/index.ts b/src/components-examples/material/input/index.ts index 6f4269ec0d48..af1d2ef59914 100644 --- a/src/components-examples/material/input/index.ts +++ b/src/components-examples/material/input/index.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {InputClearableExample} from './input-clearable/input-clearable-example'; import {InputErrorStateMatcherExample} from './input-error-state-matcher/input-error-state-matcher-example'; import {InputErrorsExample} from './input-errors/input-errors-example'; @@ -40,7 +40,7 @@ const EXAMPLES = [ CommonModule, MatButtonModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, FormsModule, ReactiveFormsModule, ], diff --git a/src/components-examples/material/input/input-harness/input-harness-example.spec.ts b/src/components-examples/material/input/input-harness/input-harness-example.spec.ts index a2483c7c7dc0..c1fa801ff286 100644 --- a/src/components-examples/material/input/input-harness/input-harness-example.spec.ts +++ b/src/components-examples/material/input/input-harness/input-harness-example.spec.ts @@ -1,8 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatInputHarness} from '@angular/material/input/testing'; +import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing'; import {HarnessLoader} from '@angular/cdk/testing'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {InputHarnessExample} from './input-harness-example'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {ReactiveFormsModule} from '@angular/forms'; @@ -13,7 +13,7 @@ describe('InputHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatInputModule, NoopAnimationsModule, ReactiveFormsModule], + imports: [MatLegacyInputModule, NoopAnimationsModule, ReactiveFormsModule], declarations: [InputHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(InputHarnessExample); @@ -22,17 +22,17 @@ describe('InputHarnessExample', () => { }); it('should load all input harnesses', async () => { - const inputs = await loader.getAllHarnesses(MatInputHarness); + const inputs = await loader.getAllHarnesses(MatLegacyInputHarness); expect(inputs.length).toBe(3); }); it('should load input with a specific value', async () => { - const inputs = await loader.getAllHarnesses(MatInputHarness.with({value: 'Sushi'})); + const inputs = await loader.getAllHarnesses(MatLegacyInputHarness.with({value: 'Sushi'})); expect(inputs.length).toBe(1); }); it('should be able to set value of input', async () => { - const inputs = await loader.getAllHarnesses(MatInputHarness); + const inputs = await loader.getAllHarnesses(MatLegacyInputHarness); const input = inputs[0]; expect(await input.getValue()).toBe('Sushi'); @@ -42,7 +42,7 @@ describe('InputHarnessExample', () => { }); it('should be able to get disabled state', async () => { - const inputs = await loader.getAllHarnesses(MatInputHarness); + const inputs = await loader.getAllHarnesses(MatLegacyInputHarness); expect(inputs.length).toBe(3); expect(await inputs[0].isDisabled()).toBe(false); @@ -55,7 +55,7 @@ describe('InputHarnessExample', () => { }); it('should be able to get type of input', async () => { - const inputs = await loader.getAllHarnesses(MatInputHarness); + const inputs = await loader.getAllHarnesses(MatLegacyInputHarness); expect(inputs.length).toBe(3); expect(await inputs[0].getType()).toBe('text'); diff --git a/src/components-examples/material/paginator/BUILD.bazel b/src/components-examples/material/paginator/BUILD.bazel index 9ef16ce35c9c..ee3d284c88fc 100644 --- a/src/components-examples/material/paginator/BUILD.bazel +++ b/src/components-examples/material/paginator/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/components-examples/private:localize_types", - "//src/material/input", + "//src/material/legacy-input", "//src/material/paginator", "//src/material/paginator/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/paginator/index.ts b/src/components-examples/material/paginator/index.ts index 11ee76af260a..8870d0f80005 100644 --- a/src/components-examples/material/paginator/index.ts +++ b/src/components-examples/material/paginator/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatPaginatorModule} from '@angular/material/paginator'; import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example'; import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; @@ -28,7 +28,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatInputModule, + MatLegacyInputModule, MatPaginatorModule, PaginatorIntlExampleModule, FormsModule, diff --git a/src/components-examples/material/select/BUILD.bazel b/src/components-examples/material/select/BUILD.bazel index ebab21f47731..e2bea9f6fb2c 100644 --- a/src/components-examples/material/select/BUILD.bazel +++ b/src/components-examples/material/select/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/checkbox", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "//src/material/select/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/select/index.ts b/src/components-examples/material/select/index.ts index 17d0fb0effe0..7f6fd529aa7f 100644 --- a/src/components-examples/material/select/index.ts +++ b/src/components-examples/material/select/index.ts @@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example'; import {SelectDisabledExample} from './select-disabled/select-disabled-example'; @@ -19,7 +19,7 @@ import {SelectValueBindingExample} from './select-value-binding/select-value-bin import {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example'; import {SelectInitialValueExample} from './select-initial-value/select-initial-value-example'; import {SelectHarnessExample} from './select-harness/select-harness-example'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; export { SelectCustomTriggerExample, @@ -62,10 +62,10 @@ const EXAMPLES = [ CommonModule, FormsModule, MatCheckboxModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, ReactiveFormsModule, - MatFormFieldModule, + MatLegacyFormFieldModule, ], declarations: EXAMPLES, exports: EXAMPLES, diff --git a/src/components-examples/material/slider/BUILD.bazel b/src/components-examples/material/slider/BUILD.bazel index e60d463f1b2c..9a94c410f930 100644 --- a/src/components-examples/material/slider/BUILD.bazel +++ b/src/components-examples/material/slider/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/checkbox", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-input", "//src/material/slider", "//src/material/slider/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/slider/index.ts b/src/components-examples/material/slider/index.ts index ca682596bc05..2754563f8fca 100644 --- a/src/components-examples/material/slider/index.ts +++ b/src/components-examples/material/slider/index.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSliderModule} from '@angular/material/slider'; import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example'; import {SliderFormattingExample} from './slider-formatting/slider-formatting-example'; @@ -30,7 +30,7 @@ const EXAMPLES = [ FormsModule, MatLegacyCardModule, MatCheckboxModule, - MatInputModule, + MatLegacyInputModule, MatSliderModule, ], declarations: EXAMPLES, diff --git a/src/components-examples/material/snack-bar/BUILD.bazel b/src/components-examples/material/snack-bar/BUILD.bazel index 114c13561e06..dfbfaf90a4ac 100644 --- a/src/components-examples/material/snack-bar/BUILD.bazel +++ b/src/components-examples/material/snack-bar/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/button", - "//src/material/input", + "//src/material/legacy-input", "//src/material/select", "//src/material/snack-bar", "//src/material/snack-bar/testing", diff --git a/src/components-examples/material/snack-bar/index.ts b/src/components-examples/material/snack-bar/index.ts index f4346a0ac618..25db0b2a3177 100644 --- a/src/components-examples/material/snack-bar/index.ts +++ b/src/components-examples/material/snack-bar/index.ts @@ -1,7 +1,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import { @@ -28,7 +28,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [FormsModule, MatButtonModule, MatInputModule, MatSelectModule, MatSnackBarModule], + imports: [FormsModule, MatButtonModule, MatLegacyInputModule, MatSelectModule, MatSnackBarModule], declarations: [...EXAMPLES, PizzaPartyComponent], exports: EXAMPLES, }) diff --git a/src/components-examples/material/stepper/BUILD.bazel b/src/components-examples/material/stepper/BUILD.bazel index e1627932e1aa..d0120b6d093b 100644 --- a/src/components-examples/material/stepper/BUILD.bazel +++ b/src/components-examples/material/stepper/BUILD.bazel @@ -19,7 +19,7 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/radio", "//src/material/stepper", "//src/material/stepper/testing", diff --git a/src/components-examples/material/stepper/index.ts b/src/components-examples/material/stepper/index.ts index f2e579f1127e..9b185fff4f62 100644 --- a/src/components-examples/material/stepper/index.ts +++ b/src/components-examples/material/stepper/index.ts @@ -3,7 +3,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; import {MatStepperModule} from '@angular/material/stepper'; import {StepperEditableExample} from './stepper-editable/stepper-editable-example'; @@ -57,7 +57,7 @@ const EXAMPLES = [ FormsModule, MatButtonModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatRadioModule, MatStepperModule, ReactiveFormsModule, diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel index 36598e0bd5ab..2a7ae4bee36d 100644 --- a/src/components-examples/material/table/BUILD.bazel +++ b/src/components-examples/material/table/BUILD.bazel @@ -22,7 +22,7 @@ ng_module( "//src/material/checkbox", "//src/material/core", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/paginator", "//src/material/progress-spinner", "//src/material/sort", diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index e20359d82b26..47cbc1ab176f 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; @@ -119,7 +119,7 @@ const EXAMPLES = [ MatButtonToggleModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatRippleModule, diff --git a/src/components-examples/material/tabs/BUILD.bazel b/src/components-examples/material/tabs/BUILD.bazel index 9520fc4ac30e..ff9b800de88f 100644 --- a/src/components-examples/material/tabs/BUILD.bazel +++ b/src/components-examples/material/tabs/BUILD.bazel @@ -19,7 +19,7 @@ ng_module( "//src/material/button-toggle", "//src/material/checkbox", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/tabs", "//src/material/tabs/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/tabs/index.ts b/src/components-examples/material/tabs/index.ts index 31a8d026686e..770d2de58d92 100644 --- a/src/components-examples/material/tabs/index.ts +++ b/src/components-examples/material/tabs/index.ts @@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatTabsModule} from '@angular/material/tabs'; import {TabGroupAlignExample} from './tab-group-align/tab-group-align-example'; import {TabGroupAnimationsExample} from './tab-group-animations/tab-group-animations-example'; @@ -63,7 +63,7 @@ const EXAMPLES = [ MatButtonToggleModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatTabsModule, ReactiveFormsModule, ], diff --git a/src/components-examples/material/tooltip/BUILD.bazel b/src/components-examples/material/tooltip/BUILD.bazel index 2131036ef99a..eb8aa71f75e0 100644 --- a/src/components-examples/material/tooltip/BUILD.bazel +++ b/src/components-examples/material/tooltip/BUILD.bazel @@ -18,7 +18,7 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/checkbox", - "//src/material/input", + "//src/material/legacy-input", "//src/material/legacy-tooltip", "//src/material/legacy-tooltip/testing", "//src/material/select", diff --git a/src/components-examples/material/tooltip/index.ts b/src/components-examples/material/tooltip/index.ts index fc85892ba2ed..b5d3e70e9ffd 100644 --- a/src/components-examples/material/tooltip/index.ts +++ b/src/components-examples/material/tooltip/index.ts @@ -4,7 +4,7 @@ import {ReactiveFormsModule} from '@angular/forms'; import {ScrollingModule} from '@angular/cdk/scrolling'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example'; @@ -49,7 +49,7 @@ const EXAMPLES = [ CommonModule, MatButtonModule, MatCheckboxModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, MatLegacyTooltipModule, ReactiveFormsModule, diff --git a/src/components-examples/material/tree/BUILD.bazel b/src/components-examples/material/tree/BUILD.bazel index e754b86d7758..7d659eebaa74 100644 --- a/src/components-examples/material/tree/BUILD.bazel +++ b/src/components-examples/material/tree/BUILD.bazel @@ -18,7 +18,7 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "//src/material/legacy-progress-bar", "//src/material/tree", "//src/material/tree/testing", diff --git a/src/components-examples/material/tree/index.ts b/src/components-examples/material/tree/index.ts index b16c64c21420..8c51be26e909 100644 --- a/src/components-examples/material/tree/index.ts +++ b/src/components-examples/material/tree/index.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; import {MatTreeModule} from '@angular/material/tree'; import {TreeChecklistExample} from './tree-checklist/tree-checklist-example'; @@ -37,7 +37,7 @@ const EXAMPLES = [ MatButtonModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatLegacyProgressBarModule, MatTreeModule, ], diff --git a/src/dev-app/autocomplete/BUILD.bazel b/src/dev-app/autocomplete/BUILD.bazel index dc63a97892b6..b0615f9f28ca 100644 --- a/src/dev-app/autocomplete/BUILD.bazel +++ b/src/dev-app/autocomplete/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/material/autocomplete", "//src/material/button", - "//src/material/form-field", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index f368db966181..9ed44e70de8a 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -12,8 +12,8 @@ import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/f import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatButtonModule} from '@angular/material/button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -38,8 +38,8 @@ export interface StateGroup { MatAutocompleteModule, MatButtonModule, MatLegacyCardModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, ReactiveFormsModule, ], }) diff --git a/src/dev-app/baseline/BUILD.bazel b/src/dev-app/baseline/BUILD.bazel index 6aec0abd1d99..001f350623f1 100644 --- a/src/dev-app/baseline/BUILD.bazel +++ b/src/dev-app/baseline/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/material/checkbox", - "//src/material/form-field", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/radio", "//src/material/select", "//src/material/toolbar", diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts index cb3d37e2cbe0..8b71ceb6f9eb 100644 --- a/src/dev-app/baseline/baseline-demo.ts +++ b/src/dev-app/baseline/baseline-demo.ts @@ -10,8 +10,8 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -25,8 +25,8 @@ import {MatToolbarModule} from '@angular/material/toolbar'; CommonModule, MatLegacyCardModule, MatCheckboxModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatRadioModule, MatSelectModule, MatToolbarModule, diff --git a/src/dev-app/bottom-sheet/BUILD.bazel b/src/dev-app/bottom-sheet/BUILD.bazel index b0ec35ec8998..1aa027df6717 100644 --- a/src/dev-app/bottom-sheet/BUILD.bazel +++ b/src/dev-app/bottom-sheet/BUILD.bazel @@ -13,10 +13,10 @@ ng_module( "//src/material/bottom-sheet", "//src/material/button", "//src/material/checkbox", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/list", "//src/material/select", "@npm//@angular/forms", diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index cf2760084c5d..542f6e5f58d1 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -18,9 +18,9 @@ import { import {MatButtonModule} from '@angular/material/button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatListModule} from '@angular/material/list'; import {MatSelectModule} from '@angular/material/select'; @@ -38,9 +38,9 @@ const defaultConfig = new MatBottomSheetConfig(); MatButtonModule, MatLegacyCardModule, MatCheckboxModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, MatListModule, ], diff --git a/src/dev-app/checkbox/BUILD.bazel b/src/dev-app/checkbox/BUILD.bazel index 96cee2e83f89..b1772f9ea1f5 100644 --- a/src/dev-app/checkbox/BUILD.bazel +++ b/src/dev-app/checkbox/BUILD.bazel @@ -14,8 +14,8 @@ ng_module( "//src/components-examples/material/checkbox", "//src/material/checkbox", "//src/material/core", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", ], ) diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts index 8b4c61b8ad81..112c4e6da080 100644 --- a/src/dev-app/checkbox/checkbox-demo.ts +++ b/src/dev-app/checkbox/checkbox-demo.ts @@ -13,8 +13,8 @@ import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core'; import {CommonModule} from '@angular/common'; import {CheckboxExamplesModule} from '@angular/components-examples/material/checkbox'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; export interface Task { @@ -111,8 +111,8 @@ export class MatCheckboxDemoNestedChecklist { CommonModule, FormsModule, MatCheckboxModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatSelectModule, MatPseudoCheckboxModule, ReactiveFormsModule, diff --git a/src/dev-app/chips/BUILD.bazel b/src/dev-app/chips/BUILD.bazel index 6f636c8ed5f3..61eae2d9f916 100644 --- a/src/dev-app/chips/BUILD.bazel +++ b/src/dev-app/chips/BUILD.bazel @@ -13,9 +13,9 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/chips", - "//src/material/form-field", "//src/material/icon", "//src/material/legacy-card", + "//src/material/legacy-form-field", "//src/material/toolbar", ], ) diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts index 6d523d62fbf2..10b2d1eda4f7 100644 --- a/src/dev-app/chips/chips-demo.ts +++ b/src/dev-app/chips/chips-demo.ts @@ -15,7 +15,7 @@ import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips'; import {ThemePalette} from '@angular/material/core'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -40,7 +40,7 @@ export interface DemoColor { MatLegacyCardModule, MatCheckboxModule, MatChipsModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, MatToolbarModule, ], diff --git a/src/dev-app/datepicker/BUILD.bazel b/src/dev-app/datepicker/BUILD.bazel index 0f2d16e95e2d..08f570057b20 100644 --- a/src/dev-app/datepicker/BUILD.bazel +++ b/src/dev-app/datepicker/BUILD.bazel @@ -16,9 +16,9 @@ ng_module( "//src/material/checkbox", "//src/material/core", "//src/material/datepicker", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", ], ) diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index f7a4fefa1d67..7ea2025f430a 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/src/dev-app/datepicker/datepicker-demo.ts @@ -38,9 +38,9 @@ import { DateRange, MatDatepickerModule, } from '@angular/material/datepicker'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; @@ -188,9 +188,9 @@ export class CustomHeaderNgContent { MatButtonModule, MatCheckboxModule, MatDatepickerModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatNativeDateModule, MatSelectModule, ReactiveFormsModule, diff --git a/src/dev-app/dialog/BUILD.bazel b/src/dev-app/dialog/BUILD.bazel index 3b8c21232c97..9eecaf5aeb32 100644 --- a/src/dev-app/dialog/BUILD.bazel +++ b/src/dev-app/dialog/BUILD.bazel @@ -14,9 +14,9 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/dialog", - "//src/material/form-field", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", ], ) diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index 1043ec293a10..fdd99f5dca6e 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -20,8 +20,8 @@ import { MatDialogRef, MatDialogModule, } from '@angular/material/dialog'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; const defaultDialogConfig = new MatDialogConfig(); @@ -37,8 +37,8 @@ const defaultDialogConfig = new MatDialogConfig(); MatLegacyCardModule, MatCheckboxModule, MatDialogModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatSelectModule, ], }) @@ -131,7 +131,7 @@ export class DialogDemo { encapsulation: ViewEncapsulation.None, styles: [`.hidden-dialog { opacity: 0; }`], standalone: true, - imports: [MatFormFieldModule, MatInputModule, DragDropModule], + imports: [MatLegacyFormFieldModule, MatLegacyInputModule, DragDropModule], }) export class JazzDialog { private _dimensionToggle = false; diff --git a/src/dev-app/drag-drop/BUILD.bazel b/src/dev-app/drag-drop/BUILD.bazel index 416ba4b592d8..110b20dfc20b 100644 --- a/src/dev-app/drag-drop/BUILD.bazel +++ b/src/dev-app/drag-drop/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/cdk/drag-drop", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", ], ) diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index ff1bb4bc4439..d548297b9a59 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/src/dev-app/drag-drop/drag-drop-demo.ts @@ -17,8 +17,8 @@ import { } from '@angular/cdk/drag-drop'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; @Component({ @@ -32,9 +32,9 @@ import {MatSelectModule} from '@angular/material/select'; CommonModule, DragDropModule, FormsModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, ], }) diff --git a/src/dev-app/expansion/BUILD.bazel b/src/dev-app/expansion/BUILD.bazel index 567e58a34d1e..991b12d84c14 100644 --- a/src/dev-app/expansion/BUILD.bazel +++ b/src/dev-app/expansion/BUILD.bazel @@ -14,8 +14,8 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/expansion", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/radio", "//src/material/slide-toggle", "@npm//@angular/forms", diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts index 58ffdbf827da..37102d646a9f 100644 --- a/src/dev-app/expansion/expansion-demo.ts +++ b/src/dev-app/expansion/expansion-demo.ts @@ -18,8 +18,8 @@ import { MatAccordionTogglePosition, MatExpansionModule, } from '@angular/material/expansion'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; @@ -35,8 +35,8 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle'; MatButtonModule, MatCheckboxModule, MatExpansionModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatRadioModule, MatSlideToggleModule, ], diff --git a/src/dev-app/input-modality/BUILD.bazel b/src/dev-app/input-modality/BUILD.bazel index f0a2b745b2ae..adab3ab55af9 100644 --- a/src/dev-app/input-modality/BUILD.bazel +++ b/src/dev-app/input-modality/BUILD.bazel @@ -9,8 +9,8 @@ ng_module( deps = [ "//src/cdk/a11y", "//src/material/button", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/radio", "//src/material/select", ], diff --git a/src/dev-app/input-modality/input-modality-detector-demo.ts b/src/dev-app/input-modality/input-modality-detector-demo.ts index ba1912933fbc..955006e57db9 100644 --- a/src/dev-app/input-modality/input-modality-detector-demo.ts +++ b/src/dev-app/input-modality/input-modality-detector-demo.ts @@ -13,8 +13,8 @@ import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material/button'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; @@ -26,8 +26,8 @@ import {MatSelectModule} from '@angular/material/select'; A11yModule, CommonModule, MatButtonModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatRadioModule, MatSelectModule, ], diff --git a/src/dev-app/input/BUILD.bazel b/src/dev-app/input/BUILD.bazel index 9c4a76f71acc..9923e9370c38 100644 --- a/src/dev-app/input/BUILD.bazel +++ b/src/dev-app/input/BUILD.bazel @@ -13,10 +13,10 @@ ng_module( "//src/material/button", "//src/material/button-toggle", "//src/material/checkbox", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "//src/material/tabs", "//src/material/toolbar", diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts index 46b290d5b2e1..91c4e03021d7 100644 --- a/src/dev-app/input/input-demo.ts +++ b/src/dev-app/input/input-demo.ts @@ -14,9 +14,9 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {ErrorStateMatcher} from '@angular/material/core'; -import {FloatLabelType, MatFormFieldModule} from '@angular/material/form-field'; +import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {MatTabsModule} from '@angular/material/tabs'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -38,9 +38,9 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA MatButtonToggleModule, MatLegacyCardModule, MatCheckboxModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, MatTabsModule, MatToolbarModule, diff --git a/src/dev-app/mdc-autocomplete/BUILD.bazel b/src/dev-app/mdc-autocomplete/BUILD.bazel index ee7070f7ddab..1b7de485b782 100644 --- a/src/dev-app/mdc-autocomplete/BUILD.bazel +++ b/src/dev-app/mdc-autocomplete/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/material-experimental/mdc-autocomplete", "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material/card", + "//src/material/form-field", + "//src/material/input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts index 5bdd1e99282b..968bc041404e 100644 --- a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts +++ b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts @@ -12,8 +12,7 @@ import {CommonModule} from '@angular/common'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCardModule} from '@angular/material/card'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -38,7 +37,6 @@ export interface StateGroup { MatAutocompleteModule, MatButtonModule, MatCardModule, - MatFormFieldModule, MatInputModule, ReactiveFormsModule, ], diff --git a/src/dev-app/mdc-checkbox/BUILD.bazel b/src/dev-app/mdc-checkbox/BUILD.bazel index 6247b8c162f0..ff5cda08c1f8 100644 --- a/src/dev-app/mdc-checkbox/BUILD.bazel +++ b/src/dev-app/mdc-checkbox/BUILD.bazel @@ -13,9 +13,9 @@ ng_module( deps = [ "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-core", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", + "//src/material/form-field", + "//src/material/input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts index 984b3f2d8e96..a8057ef0928b 100644 --- a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts +++ b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts @@ -12,8 +12,7 @@ import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material-experimental/mdc-core'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material-experimental/mdc-select'; import {CommonModule} from '@angular/common'; @@ -110,7 +109,6 @@ export class MatCheckboxDemoNestedChecklist { CommonModule, FormsModule, MatCheckboxModule, - MatFormFieldModule, MatInputModule, MatSelectModule, MatPseudoCheckboxModule, diff --git a/src/dev-app/mdc-chips/BUILD.bazel b/src/dev-app/mdc-chips/BUILD.bazel index b624e6e256f4..668cba48f260 100644 --- a/src/dev-app/mdc-chips/BUILD.bazel +++ b/src/dev-app/mdc-chips/BUILD.bazel @@ -14,8 +14,8 @@ ng_module( "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-chips", "//src/material-experimental/mdc-core", - "//src/material-experimental/mdc-form-field", "//src/material/card", + "//src/material/form-field", "//src/material/icon", "//src/material/toolbar", ], diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-demo.ts index fefbfddd71d4..4b2af242742a 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.ts +++ b/src/dev-app/mdc-chips/mdc-chips-demo.ts @@ -19,7 +19,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon'; diff --git a/src/dev-app/mdc-dialog/BUILD.bazel b/src/dev-app/mdc-dialog/BUILD.bazel index 83554ebc4032..d3856fee586b 100644 --- a/src/dev-app/mdc-dialog/BUILD.bazel +++ b/src/dev-app/mdc-dialog/BUILD.bazel @@ -14,10 +14,10 @@ ng_module( "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-dialog", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", "//src/material/card", + "//src/material/form-field", + "//src/material/input", ], ) diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts index 59c6d11f46d9..990816aeab05 100644 --- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts +++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts @@ -19,8 +19,8 @@ import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material-experimental/mdc-select'; import {DragDropModule} from '@angular/cdk/drag-drop'; @@ -141,7 +141,7 @@ export class DialogDemo { encapsulation: ViewEncapsulation.None, styles: [`.hidden-dialog { opacity: 0; }`], standalone: true, - imports: [MatFormFieldModule, MatInputModule, DragDropModule], + imports: [MatInputModule, DragDropModule], }) export class JazzDialog { private _dimensionToggle = false; diff --git a/src/dev-app/mdc-input/BUILD.bazel b/src/dev-app/mdc-input/BUILD.bazel index 2717869079a2..488db769e29e 100644 --- a/src/dev-app/mdc-input/BUILD.bazel +++ b/src/dev-app/mdc-input/BUILD.bazel @@ -14,12 +14,12 @@ ng_module( "//src/material-experimental/mdc-autocomplete", "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-checkbox", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-tabs", "//src/material/button-toggle", "//src/material/card", + "//src/material/form-field", "//src/material/icon", + "//src/material/input", "//src/material/toolbar", "@npm//@angular/forms", ], diff --git a/src/dev-app/mdc-input/mdc-input-demo.ts b/src/dev-app/mdc-input/mdc-input-demo.ts index f043eff1d466..97264e909679 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.ts +++ b/src/dev-app/mdc-input/mdc-input-demo.ts @@ -12,11 +12,11 @@ import { FloatLabelType, MatFormFieldAppearance, MatFormFieldModule, -} from '@angular/material-experimental/mdc-form-field'; -import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/mdc-core'; +} from '@angular/material/form-field'; +import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; import {CommonModule} from '@angular/common'; import {MdcFormFieldExamplesModule} from '@angular/components-examples/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; diff --git a/src/dev-app/mdc-paginator/BUILD.bazel b/src/dev-app/mdc-paginator/BUILD.bazel index b332aa16edf0..ee46edc32da8 100644 --- a/src/dev-app/mdc-paginator/BUILD.bazel +++ b/src/dev-app/mdc-paginator/BUILD.bazel @@ -10,11 +10,11 @@ ng_module( ":mdc_paginator_demo_scss", ], deps = [ - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-paginator", "//src/material-experimental/mdc-slide-toggle", "//src/material/card", + "//src/material/form-field", + "//src/material/input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts b/src/dev-app/mdc-paginator/mdc-paginator-demo.ts index 435fda8a5326..364463ab0892 100644 --- a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts +++ b/src/dev-app/mdc-paginator/mdc-paginator-demo.ts @@ -11,8 +11,7 @@ import {CommonModule} from '@angular/common'; import {MatPaginatorModule, PageEvent} from '@angular/material-experimental/mdc-paginator'; import {FormsModule} from '@angular/forms'; import {MatCardModule} from '@angular/material/card'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle'; @Component({ @@ -24,7 +23,6 @@ import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-tog CommonModule, FormsModule, MatCardModule, - MatFormFieldModule, MatInputModule, MatPaginatorModule, MatSlideToggleModule, diff --git a/src/dev-app/mdc-select/BUILD.bazel b/src/dev-app/mdc-select/BUILD.bazel index 5fa4c56eba44..77645383e204 100644 --- a/src/dev-app/mdc-select/BUILD.bazel +++ b/src/dev-app/mdc-select/BUILD.bazel @@ -11,11 +11,11 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", "//src/material/card", + "//src/material/form-field", "//src/material/icon", + "//src/material/input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-select/mdc-select-demo.ts b/src/dev-app/mdc-select/mdc-select-demo.ts index 16c1c3ab175e..f11fba0cfff5 100644 --- a/src/dev-app/mdc-select/mdc-select-demo.ts +++ b/src/dev-app/mdc-select/mdc-select-demo.ts @@ -10,12 +10,12 @@ import {Component} from '@angular/core'; import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/mdc-core'; import {MatSelectChange, MatSelectModule} from '@angular/material-experimental/mdc-select'; -import {FloatLabelType, MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; +import {FloatLabelType} from '@angular/material/form-field'; import {CommonModule} from '@angular/common'; import {MatCardModule} from '@angular/material/card'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; /** Error any time control is invalid */ export class MyErrorStateMatcher implements ErrorStateMatcher { @@ -37,7 +37,6 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { FormsModule, MatButtonModule, MatCardModule, - MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, diff --git a/src/dev-app/mdc-snack-bar/BUILD.bazel b/src/dev-app/mdc-snack-bar/BUILD.bazel index 6acc82e0f143..a54b4d110c44 100644 --- a/src/dev-app/mdc-snack-bar/BUILD.bazel +++ b/src/dev-app/mdc-snack-bar/BUILD.bazel @@ -13,10 +13,10 @@ ng_module( "//src/cdk/bidi", "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-checkbox", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", "//src/material-experimental/mdc-snack-bar", + "//src/material/form-field", + "//src/material/input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts index 06f8b8341411..5b669e96c7cd 100644 --- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts +++ b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts @@ -19,8 +19,7 @@ import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material-experimental/mdc-select'; @Component({ @@ -35,7 +34,6 @@ import {MatSelectModule} from '@angular/material-experimental/mdc-select'; FormsModule, MatButtonModule, MatCheckboxModule, - MatFormFieldModule, MatInputModule, MatSelectModule, ], diff --git a/src/dev-app/mdc-tooltip/BUILD.bazel b/src/dev-app/mdc-tooltip/BUILD.bazel index 065a327c13d0..0c9f786c28bd 100644 --- a/src/dev-app/mdc-tooltip/BUILD.bazel +++ b/src/dev-app/mdc-tooltip/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", + "//src/material/form-field", + "//src/material/input", "//src/material/tooltip", "@npm//@angular/common", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts index d0a627526791..633b1b9c2137 100644 --- a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts +++ b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts @@ -11,8 +11,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material-experimental/mdc-select'; @Component({ @@ -25,7 +24,6 @@ import {MatSelectModule} from '@angular/material-experimental/mdc-select'; ReactiveFormsModule, MatTooltipModule, MatButtonModule, - MatFormFieldModule, MatSelectModule, MatInputModule, ], diff --git a/src/dev-app/paginator/BUILD.bazel b/src/dev-app/paginator/BUILD.bazel index 5733d975a4fd..73faed899384 100644 --- a/src/dev-app/paginator/BUILD.bazel +++ b/src/dev-app/paginator/BUILD.bazel @@ -10,9 +10,9 @@ ng_module( ":paginator_demo_scss", ], deps = [ - "//src/material/form-field", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/paginator", "//src/material/slide-toggle", "@npm//@angular/forms", diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts index 6c0b947a5004..c4584b5c1b1a 100644 --- a/src/dev-app/paginator/paginator-demo.ts +++ b/src/dev-app/paginator/paginator-demo.ts @@ -11,8 +11,8 @@ import {MatPaginatorModule, PageEvent} from '@angular/material/paginator'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; @Component({ @@ -24,8 +24,8 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle'; CommonModule, FormsModule, MatLegacyCardModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatPaginatorModule, MatSlideToggleModule, ], diff --git a/src/dev-app/ripple/BUILD.bazel b/src/dev-app/ripple/BUILD.bazel index 19a1c0a024af..fc95946bf3bc 100644 --- a/src/dev-app/ripple/BUILD.bazel +++ b/src/dev-app/ripple/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-input", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts index 141c492db5af..fa8e75a3bee9 100644 --- a/src/dev-app/ripple/ripple-demo.ts +++ b/src/dev-app/ripple/ripple-demo.ts @@ -13,7 +13,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatRipple} from '@angular/material/core'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; @Component({ selector: 'ripple-demo', @@ -26,7 +26,7 @@ import {MatInputModule} from '@angular/material/input'; MatButtonModule, MatCheckboxModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, ], }) export class RippleDemo { diff --git a/src/dev-app/select/BUILD.bazel b/src/dev-app/select/BUILD.bazel index 1901ad14535b..8d47e4282513 100644 --- a/src/dev-app/select/BUILD.bazel +++ b/src/dev-app/select/BUILD.bazel @@ -12,10 +12,10 @@ ng_module( deps = [ "//src/material/button", "//src/material/dialog", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", "//src/material/legacy-card", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "@npm//@angular/forms", ], diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index 4dce702e2169..33022825f549 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -13,9 +13,9 @@ import {MatButtonModule} from '@angular/material/button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; import {MatDialog, MatDialogModule} from '@angular/material/dialog'; -import {FloatLabelType, MatFormFieldModule} from '@angular/material/form-field'; +import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectChange, MatSelectModule} from '@angular/material/select'; /** Error any time control is invalid */ @@ -39,9 +39,9 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { MatButtonModule, MatLegacyCardModule, MatDialogModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, ReactiveFormsModule, ], diff --git a/src/dev-app/snack-bar/BUILD.bazel b/src/dev-app/snack-bar/BUILD.bazel index a7244cf7e545..c0a3a0cb5718 100644 --- a/src/dev-app/snack-bar/BUILD.bazel +++ b/src/dev-app/snack-bar/BUILD.bazel @@ -13,8 +13,8 @@ ng_module( "//src/cdk/bidi", "//src/material/button", "//src/material/checkbox", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "//src/material/snack-bar", "@npm//@angular/forms", diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts index e69ce8e3c42b..2795c0285e04 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.ts +++ b/src/dev-app/snack-bar/snack-bar-demo.ts @@ -12,8 +12,8 @@ import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import { MatSnackBar, @@ -34,8 +34,8 @@ import { FormsModule, MatButtonModule, MatCheckboxModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatSelectModule, MatSnackBarModule, ], diff --git a/src/dev-app/stepper/BUILD.bazel b/src/dev-app/stepper/BUILD.bazel index 9a76909bd5e2..f628f9adb613 100644 --- a/src/dev-app/stepper/BUILD.bazel +++ b/src/dev-app/stepper/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/core", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "//src/material/stepper", "@npm//@angular/forms", diff --git a/src/dev-app/stepper/stepper-demo.ts b/src/dev-app/stepper/stepper-demo.ts index 2071e8bbe9be..05838a49ce83 100644 --- a/src/dev-app/stepper/stepper-demo.ts +++ b/src/dev-app/stepper/stepper-demo.ts @@ -18,8 +18,8 @@ import {ThemePalette} from '@angular/material/core'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {MatStepperModule} from '@angular/material/stepper'; @@ -32,8 +32,8 @@ import {MatStepperModule} from '@angular/material/stepper'; FormsModule, MatButtonModule, MatCheckboxModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatStepperModule, MatSelectModule, ReactiveFormsModule, diff --git a/src/dev-app/toolbar/BUILD.bazel b/src/dev-app/toolbar/BUILD.bazel index 062613748fd5..1e5fc75bc1f3 100644 --- a/src/dev-app/toolbar/BUILD.bazel +++ b/src/dev-app/toolbar/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/components-examples/material/toolbar", "//src/material/button", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "//src/material/toolbar", ], diff --git a/src/dev-app/toolbar/toolbar-demo.ts b/src/dev-app/toolbar/toolbar-demo.ts index fbc286be2c79..e251a8a87c44 100644 --- a/src/dev-app/toolbar/toolbar-demo.ts +++ b/src/dev-app/toolbar/toolbar-demo.ts @@ -9,9 +9,9 @@ import {Component} from '@angular/core'; import {ToolbarExamplesModule} from '@angular/components-examples/material/toolbar'; import {MatButtonModule} from '@angular/material/button'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -22,9 +22,9 @@ import {MatToolbarModule} from '@angular/material/toolbar'; standalone: true, imports: [ MatButtonModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatSelectModule, MatToolbarModule, ToolbarExamplesModule, diff --git a/src/dev-app/tree/BUILD.bazel b/src/dev-app/tree/BUILD.bazel index f216c7f1afee..e9084555ed3b 100644 --- a/src/dev-app/tree/BUILD.bazel +++ b/src/dev-app/tree/BUILD.bazel @@ -17,9 +17,9 @@ ng_module( "//src/material/button", "//src/material/checkbox", "//src/material/expansion", - "//src/material/form-field", "//src/material/icon", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/legacy-progress-bar", "//src/material/tree", ], diff --git a/src/dev-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts index 0491b7dc3afd..1338356ae11e 100644 --- a/src/dev-app/tree/tree-demo.ts +++ b/src/dev-app/tree/tree-demo.ts @@ -14,9 +14,9 @@ import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatExpansionModule} from '@angular/material/expansion'; -import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; import {MatTreeModule} from '@angular/material/tree'; @@ -34,9 +34,9 @@ import {MatTreeModule} from '@angular/material/tree'; MatButtonModule, MatExpansionModule, MatCheckboxModule, - MatFormFieldModule, + MatLegacyFormFieldModule, MatIconModule, - MatInputModule, + MatLegacyInputModule, MatTreeModule, MatLegacyProgressBarModule, ], diff --git a/src/dev-app/virtual-scroll/BUILD.bazel b/src/dev-app/virtual-scroll/BUILD.bazel index a421be855ea9..6d78e478e9e3 100644 --- a/src/dev-app/virtual-scroll/BUILD.bazel +++ b/src/dev-app/virtual-scroll/BUILD.bazel @@ -14,8 +14,8 @@ ng_module( "//src/cdk/scrolling", "//src/components-examples/cdk/scrolling", "//src/material/button", - "//src/material/form-field", - "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/select", "@npm//@angular/forms", ], diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts index bea4e5775491..888b5410a9dc 100644 --- a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts +++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts @@ -12,8 +12,8 @@ import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-exper import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatSelectModule} from '@angular/material/select'; import {BehaviorSubject} from 'rxjs'; import {CdkScrollingExamplesModule} from '@angular/components-examples/cdk/scrolling'; @@ -35,8 +35,8 @@ type State = { ExperimentalScrollingModule, FormsModule, MatButtonModule, - MatFormFieldModule, - MatInputModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, MatSelectModule, ScrollingModule, CdkScrollingExamplesModule, diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index a82ce500a312..f43da1607225 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -46,7 +46,6 @@ ng_module( "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-chips", "//src/material-experimental/mdc-dialog", - "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-menu", "//src/material-experimental/mdc-progress-spinner", "//src/material-experimental/mdc-radio", @@ -59,10 +58,11 @@ ng_module( "//src/material/checkbox", "//src/material/core", "//src/material/dialog", - "//src/material/form-field", "//src/material/grid-list", "//src/material/icon", "//src/material/input", + "//src/material/legacy-form-field", + "//src/material/legacy-input", "//src/material/legacy-progress-bar", "//src/material/list", "//src/material/menu", diff --git a/src/e2e-app/input/input-e2e-module.ts b/src/e2e-app/input/input-e2e-module.ts index 011ebf648d0c..242913c0c49c 100644 --- a/src/e2e-app/input/input-e2e-module.ts +++ b/src/e2e-app/input/input-e2e-module.ts @@ -7,12 +7,12 @@ */ import {NgModule} from '@angular/core'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {InputE2E} from './input-e2e'; @NgModule({ - imports: [MatFormFieldModule, MatInputModule], + imports: [MatLegacyFormFieldModule, MatLegacyInputModule], declarations: [InputE2E], }) export class InputE2eModule {} diff --git a/src/e2e-app/mdc-input/mdc-input-e2e-module.ts b/src/e2e-app/mdc-input/mdc-input-e2e-module.ts index 3aff8e75373c..a725f7d440f8 100644 --- a/src/e2e-app/mdc-input/mdc-input-e2e-module.ts +++ b/src/e2e-app/mdc-input/mdc-input-e2e-module.ts @@ -7,8 +7,8 @@ */ import {NgModule} from '@angular/core'; -import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; -import {MatInputModule} from '@angular/material-experimental/mdc-input'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; import {MdcInputE2E} from './mdc-input-e2e'; @NgModule({ diff --git a/src/e2e-app/tabs/tabs-e2e-module.ts b/src/e2e-app/tabs/tabs-e2e-module.ts index 52ec37b13230..6cbfebbdb68e 100644 --- a/src/e2e-app/tabs/tabs-e2e-module.ts +++ b/src/e2e-app/tabs/tabs-e2e-module.ts @@ -7,13 +7,13 @@ */ import {NgModule} from '@angular/core'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatTabsModule} from '@angular/material/tabs'; import {BasicTabs} from './tabs-e2e'; @NgModule({ - imports: [MatTabsModule, MatFormFieldModule, MatInputModule], + imports: [MatTabsModule, MatLegacyFormFieldModule, MatLegacyInputModule], declarations: [BasicTabs], }) export class TabsE2eModule {} diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index 7373e3c95e4d..8a79dfecf093 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -26,8 +26,6 @@ sass_library( "//src/material-experimental/mdc-chips:mdc_chips_scss_lib", "//src/material-experimental/mdc-core:mdc_core_scss_lib", "//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib", - "//src/material/form-field:form_field_scss_lib", - "//src/material/input:input_scss_lib", "//src/material-experimental/mdc-list:mdc_list_scss_lib", "//src/material-experimental/mdc-menu:mdc_menu_scss_lib", "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib", @@ -40,6 +38,8 @@ sass_library( "//src/material-experimental/mdc-table:mdc_table_scss_lib", "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib", "//src/material/card:card_scss_lib", + "//src/material/form-field:form_field_scss_lib", + "//src/material/input:input_scss_lib", "//src/material/progress-bar:progress_bar_scss_lib", "//src/material/tooltip:tooltip_scss_lib", ], diff --git a/src/material-experimental/mdc-input/README.md b/src/material-experimental/mdc-input/README.md deleted file mode 100644 index 32fc98c4f7bc..000000000000 --- a/src/material-experimental/mdc-input/README.md +++ /dev/null @@ -1,63 +0,0 @@ -This is a prototype of an alternate version of `MatInput` built on top of -[MDC Web](https://github.com/material-components/material-components-web). This component is -experimental and should not be used in production. - -## How to use -Assuming your application is already up and running using Angular Material, you can add this -component by following these steps: - -1. Install `@angular/material-experimental` and MDC Web: - - ```bash - npm i material-components-web @angular/material-experimental - ``` - -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is - needed for the Sass compiler to be able to find the MDC Web Sass files. - - ```json - ... - "styles": [ - "src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] - }, - ... - ``` - -3. Import the experimental `MatInputModule` and add it to the module that declares your - component: - - ```ts - import {MatInputModule} from '@angular/material-experimental/mdc-input'; - - @NgModule({ - declarations: [MyComponent], - imports: [MatInputModule], - }) - export class MyModule {} - ``` - -4. Use `MatInput` in your component's template in combination with the MDC-based `mat-form-field`. - Similarly to the input module from `@angular/material`, the MDC-based input module exposes - the form-field module. - - ```html - - Full name - - - ``` - -5. Ensure color and typography styles for `@angular/material-experimental` are set up. The input - itself does not provide any styles. If an input is used inside of the MDC-based - `mat-mdc-form-field`, either use a custom theme with the `mat-form-field-theme` mixin, or use - a prebuilt theme from `@angular/material-experimental/mdc-core/theming/prebuilt`. - -## API differences - -The API of input matches the one from `@angular/material/input`. Simply replace imports to -`@angular/material/input` with imports to `@angular/material-experimental/mdc-input`. diff --git a/src/material-experimental/mdc-input/_input-theme.import.scss b/src/material-experimental/mdc-input/_input-theme.import.scss deleted file mode 100644 index b834b9ab279d..000000000000 --- a/src/material-experimental/mdc-input/_input-theme.import.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'input-theme' as mat-mdc-input-*; diff --git a/src/material-experimental/mdc-input/_input-theme.scss b/src/material-experimental/mdc-input/_input-theme.scss deleted file mode 100644 index 8332e9154e6a..000000000000 --- a/src/material-experimental/mdc-input/_input-theme.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use '@angular/material' as mat; - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - @include mat.private-using-mdc-theme($config) {} -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - @include mat.private-using-mdc-typography($config) {} -} - -@mixin density($config-or-theme) {} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-input') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-input/input.ts b/src/material-experimental/mdc-input/input.ts deleted file mode 100644 index 1fe47f04914f..000000000000 --- a/src/material-experimental/mdc-input/input.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @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 {Directive} from '@angular/core'; -import {MatFormFieldControl} from '@angular/material/form-field'; -import {MatInput as BaseMatInput} from '@angular/material/input'; - -// workaround until we have feature targeting for MDC text-field. At that -// point we can just use the actual "MatInput" class and apply the MDC text-field -// styles appropriately. - -@Directive({ - selector: `input[matInput], textarea[matInput], select[matNativeControl], - input[matNativeControl], textarea[matNativeControl]`, - exportAs: 'matInput', - host: { - 'class': 'mat-mdc-input-element', - // The BaseMatInput parent class adds `mat-input-element`, `mat-form-field-control` and - // `mat-form-field-autofill-control` to the CSS class list, but this should not be added for - // this MDC equivalent input. - '[class.mat-form-field-autofill-control]': 'false', - '[class.mat-input-element]': 'false', - '[class.mat-form-field-control]': 'false', - '[class.mat-native-select-inline]': 'false', - '[class.mat-input-server]': '_isServer', - '[class.mat-mdc-form-field-textarea-control]': '_isInFormField && _isTextarea', - '[class.mat-mdc-form-field-input-control]': '_isInFormField', - '[class.mdc-text-field__input]': '_isInFormField', - '[class.mat-mdc-native-select-inline]': '_isInlineSelect()', - // Native input properties that are overwritten by Angular inputs need to be synced with - // the native input element. Otherwise property bindings for those don't work. - '[id]': 'id', - '[disabled]': 'disabled', - '[required]': 'required', - '[attr.name]': 'name', - '[attr.placeholder]': 'placeholder', - '[attr.readonly]': 'readonly && !_isNativeSelect || null', - // Only mark the input as invalid for assistive technology if it has a value since the - // state usually overlaps with `aria-required` when the input is empty and can be redundant. - '[attr.aria-invalid]': '(empty && required) ? null : errorState', - '[attr.aria-required]': 'required', - }, - providers: [{provide: MatFormFieldControl, useExisting: MatInput}], -}) -export class MatInput extends BaseMatInput {} diff --git a/src/material-experimental/mdc-input/testing/input-harness.spec.ts b/src/material-experimental/mdc-input/testing/input-harness.spec.ts deleted file mode 100644 index 7015457dbc52..000000000000 --- a/src/material-experimental/mdc-input/testing/input-harness.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {MatInputModule} from '@angular/material-experimental/mdc-input'; -import {runInputHarnessTests} from '@angular/material/input/testing/shared-input.spec'; -import {MatInputHarness} from './index'; - -describe('MDC-based MatInputHarness', () => { - runInputHarnessTests(MatInputModule, MatInputHarness); -}); diff --git a/src/material-experimental/mdc-input/testing/native-select-harness.spec.ts b/src/material-experimental/mdc-input/testing/native-select-harness.spec.ts deleted file mode 100644 index 7f730dd1086f..000000000000 --- a/src/material-experimental/mdc-input/testing/native-select-harness.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {MatInputModule} from '@angular/material-experimental/mdc-input'; -import {runNativeSelectHarnessTests} from '@angular/material/input/testing/shared-native-select.spec'; -import {MatNativeSelectHarness} from './index'; - -describe('MDC-based MatNativeSelectHarness', () => { - runNativeSelectHarnessTests(MatInputModule, MatNativeSelectHarness); -}); diff --git a/src/material-experimental/mdc-paginator/BUILD.bazel b/src/material-experimental/mdc-paginator/BUILD.bazel index 8fdeb3773e69..a268e3099f1f 100644 --- a/src/material-experimental/mdc-paginator/BUILD.bazel +++ b/src/material-experimental/mdc-paginator/BUILD.bazel @@ -34,8 +34,8 @@ sass_library( deps = [ "//:mdc_sass_lib", "//src/material:sass_lib", - "//src/material/form-field:form_field_scss_lib", "//src/material/core:core_scss_lib", + "//src/material/form-field:form_field_scss_lib", ], ) diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss index edfc7ed8e1d8..7ccaf6d82e70 100644 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss @@ -3,7 +3,6 @@ @use '@angular/material' as mat; @use '@material/density' as mdc-density; @use '@material/typography' as mdc-typography; -@use '../../material/form-field/form-field-theme'; @use './paginator-variables'; @@ -73,10 +72,10 @@ // so we set its density to be -4 or denser. @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or $density-scale == maximum) { - @include form-field-theme.density(-4); + @include mat.private-form-field-density(-4); } @else { - @include form-field-theme.density($density-scale); + @include mat.private-form-field-density($density-scale); } } diff --git a/src/material-experimental/mdc-select/BUILD.bazel b/src/material-experimental/mdc-select/BUILD.bazel index df891721c639..4e32fb1150bc 100644 --- a/src/material-experimental/mdc-select/BUILD.bazel +++ b/src/material-experimental/mdc-select/BUILD.bazel @@ -53,8 +53,8 @@ ng_test_library( "//src/cdk/scrolling", "//src/cdk/testing/private", "//src/material-experimental/mdc-core", - "//src/material/form-field", "//src/material/core", + "//src/material/form-field", "//src/material/select", "@npm//@angular/forms", "@npm//@angular/platform-browser", diff --git a/src/material-experimental/mdc-select/testing/BUILD.bazel b/src/material-experimental/mdc-select/testing/BUILD.bazel index 13baffdcd71d..62101fee6461 100644 --- a/src/material-experimental/mdc-select/testing/BUILD.bazel +++ b/src/material-experimental/mdc-select/testing/BUILD.bazel @@ -27,8 +27,8 @@ ng_test_library( srcs = glob(["**/*.spec.ts"]), deps = [ ":testing", - "//src/material/form-field", "//src/material-experimental/mdc-select", + "//src/material/form-field", "//src/material/select/testing:harness_tests_lib", ], ) diff --git a/src/material/_index.scss b/src/material/_index.scss index 626341f40b77..d5f8570a9718 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -34,6 +34,8 @@ @forward './table/table-flex-styles' show private-table-flex-styles; @forward './core/style/menu-common' as private-menu-common-*; @forward './core/style/button-common' as private-button-common-*; +// The form field density mixin needs to be exposed, because the paginator depends on it. +@forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density; // Structural @forward './core/core' show core; diff --git a/src/material/chips/testing/BUILD.bazel b/src/material/chips/testing/BUILD.bazel index 4493a9fd1212..f7a1e6908752 100644 --- a/src/material/chips/testing/BUILD.bazel +++ b/src/material/chips/testing/BUILD.bazel @@ -27,9 +27,9 @@ ng_test_library( "//src/cdk/testing/private", "//src/cdk/testing/testbed", "//src/material/chips", - "//src/material/legacy-form-field", "//src/material/icon", "//src/material/icon/testing", + "//src/material/legacy-form-field", "@npm//@angular/platform-browser", ], ) diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index a4a0babd824b..3082c05d4b65 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -9,6 +9,7 @@ @use '../../../card/card-theme'; @use '../../../progress-bar/progress-bar-theme'; @use '../../../tooltip/tooltip-theme'; +@use '../../../input/input-theme'; // Includes all of the density styles. @mixin all-component-densities($config-or-theme) { @@ -37,6 +38,7 @@ @include card-theme.density($config); @include progress-bar-theme.density($config); @include tooltip-theme.density($config); + @include input-theme.density($config); } diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 62db961eb4d9..7e73fc5dbfd8 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -18,7 +18,6 @@ @use '../../../expansion/expansion-theme'; @use '../../../grid-list/grid-list-theme'; @use '../../../icon/icon-theme'; -@use '../../../input/input-theme'; @use '../../../list/list-theme'; @use '../../../menu/menu-theme'; @use '../../../paginator/paginator-theme'; @@ -34,7 +33,6 @@ @use '../../../toolbar/toolbar-theme'; @use '../../../tree/tree-theme'; @use '../../../snack-bar/snack-bar-theme'; -@use '../../../form-field/form-field-theme'; @use '../../../legacy-core/theming/all-theme' as legacy-all-theme; // Recursively replaces all of the values inside a Sass map with a different value. @@ -77,10 +75,8 @@ @include dialog-theme.theme($css-var-theme); @include divider-theme.theme($css-var-theme); @include expansion-theme.theme($css-var-theme); - @include form-field-theme.theme($css-var-theme); @include grid-list-theme.theme($css-var-theme); @include icon-theme.theme($css-var-theme); - @include input-theme.theme($css-var-theme); @include list-theme.theme($css-var-theme); @include menu-theme.theme($css-var-theme); @include paginator-theme.theme($css-var-theme); diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel index d4b54bbd2d6b..d89be8714f6f 100644 --- a/src/material/form-field/BUILD.bazel +++ b/src/material/form-field/BUILD.bazel @@ -29,6 +29,7 @@ ng_module( sass_library( name = "form_field_scss_lib", srcs = [ + "_form-field-theme.import.scss", "_form-field-theme.scss", "_mdc-text-field-theme-variable-refresh.scss", ], diff --git a/src/material/form-field/testing/BUILD.bazel b/src/material/form-field/testing/BUILD.bazel index bbf5544b5d2e..8d0c7f620c92 100644 --- a/src/material/form-field/testing/BUILD.bazel +++ b/src/material/form-field/testing/BUILD.bazel @@ -10,10 +10,10 @@ ts_library( ), deps = [ "//src/cdk/testing", - "//src/material/input/testing", "//src/material-experimental/mdc-select/testing", "//src/material/datepicker/testing", "//src/material/form-field/testing/control", + "//src/material/input/testing", ], ) @@ -42,17 +42,17 @@ ng_test_library( exclude = ["shared.spec.ts"], ), deps = [ - ":testing", ":harness_tests_lib", + ":testing", "//src/material-experimental/mdc-autocomplete", - "//src/material/core", - "//src/material/form-field", - "//src/material/input", - "//src/material/input/testing", "//src/material-experimental/mdc-select", "//src/material-experimental/mdc-select/testing", + "//src/material/core", "//src/material/datepicker", "//src/material/datepicker/testing", + "//src/material/form-field", + "//src/material/input", + "//src/material/input/testing", ], ) diff --git a/src/material/input/BUILD.bazel b/src/material/input/BUILD.bazel index 9e8d202e6760..9cc771e4e316 100644 --- a/src/material/input/BUILD.bazel +++ b/src/material/input/BUILD.bazel @@ -19,15 +19,11 @@ ng_module( ), assets = glob(["**/*.html"]), deps = [ - "//src:dev_mode_types", - "//src/cdk/coercion", - "//src/cdk/platform", "//src/cdk/text-field", "//src/material/core", "//src/material/form-field", - "@npm//@angular/core", "@npm//@angular/forms", - "@npm//rxjs", + "@npm//@material/textfield", ], ) @@ -37,28 +33,33 @@ sass_library( deps = ["//src/material/core:core_scss_lib"], ) +########### +# Testing +########### + ng_test_library( - name = "unit_test_sources", + name = "input_tests_lib", srcs = glob( ["**/*.spec.ts"], exclude = ["**/*.e2e.spec.ts"], ), deps = [ ":input", - "//src/cdk/bidi", "//src/cdk/platform", "//src/cdk/testing/private", "//src/material/core", "//src/material/form-field", + "//src/material/icon", "@npm//@angular/forms", "@npm//@angular/platform-browser", - "@npm//rxjs", ], ) ng_web_test_suite( name = "unit_tests", - deps = [":unit_test_sources"], + deps = [ + ":input_tests_lib", + ], ) ng_e2e_test_library( diff --git a/src/material/input/_input-legacy-index.scss b/src/material/input/_input-legacy-index.scss deleted file mode 100644 index 9e266d7608ec..000000000000 --- a/src/material/input/_input-legacy-index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward 'input-theme' hide color, theme, typography; -@forward 'input-theme' as mat-input-* hide mat-input-density; diff --git a/src/material/input/_input-theme.import.scss b/src/material/input/_input-theme.import.scss index e2414e5da693..b834b9ab279d 100644 --- a/src/material/input/_input-theme.import.scss +++ b/src/material/input/_input-theme.import.scss @@ -1,11 +1 @@ -@forward '../core/style/form-common.import'; -@forward '../core/typography/typography-utils.import'; -@forward '../core/style/vendor-prefixes.import'; -@forward 'input-theme' hide color, theme, typography; -@forward 'input-theme' as mat-input-* hide mat-input-density; - -@import '../core/theming/palette'; -@import '../core/theming/theming'; -@import '../core/style/form-common'; -@import '../core/typography/typography-utils'; -@import '../core/style/vendor-prefixes'; +@forward 'input-theme' as mat-mdc-input-*; diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 7a730b1d87c1..8eea9eede4f4 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -1,86 +1,19 @@ -@use 'sass:map'; -@use 'sass:math'; -@use '../core/theming/palette'; @use '../core/theming/theming'; -@use '../core/style/form-common'; @use '../core/typography/typography'; -@use '../core/typography/typography-utils'; -@use '../core/style/vendor-prefixes'; - +@use '../core/mdc-helpers/mdc-helpers'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $primary: map.get($config, primary); - $accent: map.get($config, accent); - $warn: map.get($config, warn); - $foreground: map.get($config, foreground); - - .mat-form-field-type-mat-native-select .mat-form-field-infix::after { - color: theming.get-color-from-palette($foreground, secondary-text); - } - - .mat-input-element:disabled, - .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after { - color: theming.get-color-from-palette($foreground, disabled-text); - } - - .mat-input-element { - caret-color: theming.get-color-from-palette($primary, text); - - @include vendor-prefixes.input-placeholder { - color: form-common.private-control-placeholder-color($config); - } - - // On dark themes we set the native `select` color to some shade of white, - // however the color propagates to all of the `option` elements, which are - // always on a white background inside the dropdown, causing them to blend in. - // Since we can't change background of the dropdown, we need to explicitly - // reset the color of the options to something dark. - @if (map.get($config, is-dark)) { - &:not(.mat-native-select-inline) { - option { - color: palette.$dark-primary-text; - } - - option:disabled { - color: palette.$dark-disabled-text; - } - } - } - } - - .mat-form-field.mat-accent .mat-input-element { - caret-color: theming.get-color-from-palette($accent, text); - } - - .mat-form-field.mat-warn .mat-input-element, - .mat-form-field-invalid .mat-input-element { - caret-color: theming.get-color-from-palette($warn, text); - } - - .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after { - color: theming.get-color-from-palette($warn, text); - } + @include mdc-helpers.using-mdc-theme($config) {} } @mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( + $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - // The unit-less line-height from the font config. - $line-height: typography-utils.line-height($config, input); - - // The amount of space between the top of the line and the top of the actual text - // (as a fraction of the font-size). - $line-spacing: math.div($line-height - 1, 2); - - // elements seem to have their height set slightly too large on Safari causing the text to - // be misaligned w.r.t. the placeholder. Adding this margin corrects it. - input.mat-input-element { - margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing); - } + @include mdc-helpers.using-mdc-typography($config) {} } -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -93,7 +26,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/input/input.e2e.spec.ts b/src/material/input/input.e2e.spec.ts index 7676c0e79ea6..4c5f050efaf8 100644 --- a/src/material/input/input.e2e.spec.ts +++ b/src/material/input/input.e2e.spec.ts @@ -1,7 +1,7 @@ import {browser, by, element} from 'protractor'; describe('input', () => { - beforeEach(async () => await browser.get('/input')); + beforeEach(async () => await browser.get('/mdc-input')); describe('text input', () => { it('should update input value when user types', async () => { diff --git a/src/material/input/input.md b/src/material/input/input.md index 69989c37ac61..2ce3657716c7 100644 --- a/src/material/input/input.md +++ b/src/material/input/input.md @@ -1,5 +1,5 @@ `matInput` is a directive that allows native `` and `