refactor(material/input): remove deprecated autosize directive (#23408)

Removes the deprecated `autosize` directive in `material/input`.

BREAKING CHANGE:
* `matTextareaAutosize` has been removed. Use `cdkTextareaAutosize` from the `@angular/cdk/text-field` module instead.

Author: crisbeto

scripts/check-mdc-tests-config.ts

@@ -76,10 +76,7 @@ export const config = {
       'should update the outline gap correctly if the direction changes multiple times',
       'should calculate the outline gaps inside the shadow DOM',
       'should be legacy appearance if no default options provided',
-      'should be legacy appearance if empty default options provided',
-      'should adjust height due to long placeholders',
-      'should work in a tab',
-      'should work in a step'
+      'should be legacy appearance if empty default options provided'
     ],
     'mdc-list': [
       // TODO: these tests need to be double-checked for missing functionality.

src/material-experimental/mdc-input/autosize.ts

@@ -10,12 +10,11 @@ import {TextFieldModule} from '@angular/cdk/text-field';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material-experimental/mdc-core';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
-import {MatTextareaAutosize} from './autosize';
 import {MatInput} from './input';
 
 @NgModule({
   imports: [MatCommonModule, MatFormFieldModule],
-  exports: [MatInput, MatTextareaAutosize, MatFormFieldModule, TextFieldModule, MatCommonModule],
-  declarations: [MatInput, MatTextareaAutosize],
+  exports: [MatInput, MatFormFieldModule, TextFieldModule, MatCommonModule],
+  declarations: [MatInput],
 })
 export class MatInputModule {}

src/material-experimental/mdc-input/module.ts

@@ -8,7 +8,6 @@
 
 export {MatInput} from './input';
 export {MatInputModule} from './module';
-export {MatTextareaAutosize} from './autosize';
 export {
   getMatInputUnsupportedTypeError,
   MAT_INPUT_VALUE_ACCESSOR,

src/material-experimental/mdc-input/public-api.ts

@@ -50,8 +50,6 @@ ng_test_library(
         "//src/cdk/testing/private",
         "//src/material/core",
         "//src/material/form-field",
-        "//src/material/stepper",
-        "//src/material/tabs",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",

src/material/input/BUILD.bazel

@@ -10,11 +10,10 @@ import {TextFieldModule} from '@angular/cdk/text-field';
 import {NgModule} from '@angular/core';
 import {ErrorStateMatcher, MatCommonModule} from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatTextareaAutosize} from './autosize';
 import {MatInput} from './input';
 
 @NgModule({
-  declarations: [MatInput, MatTextareaAutosize],
+  declarations: [MatInput],
   imports: [
     TextFieldModule,
     MatFormFieldModule,
@@ -26,7 +25,6 @@ import {MatInput} from './input';
     // be used together with `MatFormField`.
     MatFormFieldModule,
     MatInput,
-    MatTextareaAutosize,
   ],
   providers: [ErrorStateMatcher],
 })

src/material/input/autosize.ts

@@ -43,12 +43,9 @@ import {
 } from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatStepperModule} from '@angular/material/stepper';
-import {MatTabsModule} from '@angular/material/tabs';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 import {Subject} from 'rxjs';
 import {MatInputModule, MatInput, MAT_INPUT_VALUE_ACCESSOR} from './index';
-import {MatTextareaAutosize} from './autosize';
 
 describe('MatInput without forms', () => {
   it('should default to floating labels', fakeAsync(() => {
@@ -1703,44 +1700,6 @@ describe('MatFormField default options', () => {
 
 });
 
-describe('MatInput with textarea autosize', () => {
-  it('should adjust height due to long placeholders', () => {
-    const fixture = createComponent(AutosizeTextareaWithLongPlaceholder);
-    fixture.detectChanges();
-
-    const textarea = fixture.nativeElement.querySelector('textarea');
-    const autosize = fixture.componentInstance.autosize;
-
-    autosize.resizeToFitContent(true);
-
-    const heightWithLongPlaceholder = textarea.clientHeight;
-
-    fixture.componentInstance.placeholder = 'Short';
-    fixture.detectChanges();
-
-    autosize.resizeToFitContent(true);
-
-    expect(textarea.clientHeight)
-      .withContext('Expected the textarea height to be shorter with a long placeholder.')
-      .toBeLessThan(heightWithLongPlaceholder);
-  });
-
-  it('should work in a tab', () => {
-    const fixture = createComponent(AutosizeTextareaInATab, [], [MatTabsModule]);
-    fixture.detectChanges();
-    const textarea = fixture.nativeElement.querySelector('textarea');
-    expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1);
-  });
-
-  it('should work in a step', () => {
-    const fixture = createComponent(AutosizeTextareaInAStep, [], [MatStepperModule]);
-    fixture.detectChanges();
-    const textarea = fixture.nativeElement.querySelector('textarea');
-    expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1);
-  });
-});
-
-
 function createComponent<T>(component: Type<T>,
                             providers: Provider[] = [],
                             imports: any[] = [],
@@ -2182,57 +2141,6 @@ class MatInputWithOutlineAppearanceInShadowDOM {
   @ViewChild('formField', {read: ElementRef}) formField: ElementRef<HTMLElement>;
 }
 
-
-// Styles to reset padding and border to make measurement comparisons easier.
-const textareaStyleReset = `
-    textarea {
-      padding: 0;
-      border: none;
-      overflow: auto;
-    }`;
-
-@Component({
-  template: `
-    <mat-form-field style="width: 100px" appearance="fill">
-      <textarea matInput matTextareaAutosize [placeholder]="placeholder"></textarea>
-    </mat-form-field>`,
-  styles: [textareaStyleReset],
-})
-class AutosizeTextareaWithLongPlaceholder {
-  placeholder = 'Long Long Long Long Long Long Long Long Placeholder';
-  @ViewChild(MatTextareaAutosize) autosize: MatTextareaAutosize;
-}
-
-@Component({
-  template: `
-    <mat-tab-group>
-      <mat-tab label="Tab 1">
-        <mat-form-field>
-          <textarea matInput matTextareaAutosize>
-            Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
-          </textarea>
-        </mat-form-field>
-      </mat-tab>
-    </mat-tab-group>
-  `
-})
-class AutosizeTextareaInATab {}
-
-@Component({
-  template: `
-    <mat-stepper>
-      <mat-step label="Step 1">
-        <mat-form-field>
-          <textarea matInput matTextareaAautosize>
-            Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
-          </textarea>
-        </mat-form-field>
-      </mat-step>
-    </mat-stepper>
-  `
-})
-class AutosizeTextareaInAStep {}
-
 @Component({
   template: `
     <mat-form-field>

src/material/input/input-module.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './autosize';
 export * from './input';
 export * from './input-errors';
 export * from './input-module';

src/material/input/input.spec.ts

@@ -9,16 +9,15 @@ import { AfterViewInit } from '@angular/core';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { CanUpdateErrorState } from '@angular/material/core';
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { Constructor } from '@angular/material/core/common-behaviors/constructor';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/cdk/text-field';
-import * as i4 from '@angular/material/form-field';
-import * as i5 from '@angular/material/core';
+import * as i2 from '@angular/cdk/text-field';
+import * as i3 from '@angular/material/form-field';
+import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -123,27 +122,7 @@ export class MatInputModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatInputModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatInputModule, [typeof i1.MatInput, typeof i2.MatTextareaAutosize], [typeof i3.TextFieldModule, typeof i4.MatFormFieldModule, typeof i5.MatCommonModule], [typeof i3.TextFieldModule, typeof i4.MatFormFieldModule, typeof i1.MatInput, typeof i2.MatTextareaAutosize]>;
-}
-
-// @public @deprecated
-export class MatTextareaAutosize extends CdkTextareaAutosize {
-    // (undocumented)
-    get matAutosize(): boolean;
-    set matAutosize(value: boolean);
-    // (undocumented)
-    get matAutosizeMaxRows(): number;
-    set matAutosizeMaxRows(value: number);
-    // (undocumented)
-    get matAutosizeMinRows(): number;
-    set matAutosizeMinRows(value: number);
-    // (undocumented)
-    get matTextareaAutosize(): boolean;
-    set matTextareaAutosize(value: boolean);
-    // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTextareaAutosize, "textarea[mat-autosize], textarea[matTextareaAutosize]", ["matTextareaAutosize"], { "cdkAutosizeMinRows": "cdkAutosizeMinRows"; "cdkAutosizeMaxRows": "cdkAutosizeMaxRows"; "matAutosizeMinRows": "matAutosizeMinRows"; "matAutosizeMaxRows": "matAutosizeMaxRows"; "matAutosize": "mat-autosize"; "matTextareaAutosize": "matTextareaAutosize"; }, {}, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTextareaAutosize, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatInputModule, [typeof i1.MatInput], [typeof i2.TextFieldModule, typeof i3.MatFormFieldModule, typeof i4.MatCommonModule], [typeof i2.TextFieldModule, typeof i3.MatFormFieldModule, typeof i1.MatInput]>;
 }
 
 // (No @packageDocumentation comment for this package)