From f295fd9061c5dd126734a6256d36e9ce9ff588dd Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Mon, 31 May 2021 17:14:03 +0300
Subject: [PATCH] (fuse/autogrow) BREAKING: Removed fuseAutogrow in favor of
 matTextareaAutosize since all of its problems solved, use
 [matTextareaAutosize] without any vertical padding on the textarea itself.

---
 .../directives/autogrow/autogrow.directive.ts | 114 ------------------
 .../directives/autogrow/autogrow.module.ts    |  14 ---
 src/@fuse/directives/autogrow/index.ts        |   1 -
 src/@fuse/directives/autogrow/public-api.ts   |   2 -
 .../styles/overrides/angular-material.scss    |   4 +-
 .../apps/calendar/calendar.component.html     |   4 +-
 .../modules/admin/apps/chat/chat.module.ts    |   2 -
 .../admin/apps/contacts/contacts.module.ts    |   2 -
 .../contacts/details/details.component.html   |   6 +-
 .../support/support.component.html            |   7 +-
 .../apps/notes/details/details.component.html |   8 +-
 .../modules/admin/apps/notes/notes.module.ts  |   2 -
 .../apps/tasks/details/details.component.html |   7 +-
 .../modules/admin/apps/tasks/tasks.module.ts  |   2 -
 .../core-features/core-features.component.ts  |   6 -
 .../core-features/core-features.module.ts     |   2 -
 .../core-features/core-features.routing.ts    |   7 +-
 .../autogrow/autogrow.component.html          |  99 ---------------
 .../directives/autogrow/autogrow.component.ts |  30 -----
 .../pages/profile/profile.component.html      |  12 +-
 .../settings/account/account.component.html   |   6 +-
 .../admin/pages/settings/settings.module.ts   |   2 -
 .../admin/ui/cards/cards.component.html       |  17 +--
 .../ui/forms/fields/fields.component.html     |  16 +--
 .../admin/ui/forms/fields/fields.module.ts    |   2 -
 25 files changed, 44 insertions(+), 330 deletions(-)
 delete mode 100644 src/@fuse/directives/autogrow/autogrow.directive.ts
 delete mode 100644 src/@fuse/directives/autogrow/autogrow.module.ts
 delete mode 100644 src/@fuse/directives/autogrow/index.ts
 delete mode 100644 src/@fuse/directives/autogrow/public-api.ts
 delete mode 100644 src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.html
 delete mode 100644 src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.ts

diff --git a/src/@fuse/directives/autogrow/autogrow.directive.ts b/src/@fuse/directives/autogrow/autogrow.directive.ts
deleted file mode 100644
index 20624005..00000000
--- a/src/@fuse/directives/autogrow/autogrow.directive.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Subject } from 'rxjs';
-
-@Directive({
-    selector: 'textarea[fuseAutogrow]',
-    exportAs: 'fuseAutogrow'
-})
-export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
-{
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    @Input('fuseAutogrowVerticalPadding') padding: number = 8;
-    @HostBinding('rows') private _rows: number = 1;
-
-    private _height: string = 'auto';
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _elementRef: ElementRef,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _ngZone: NgZone
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Host binding for component inline styles
-     */
-    @HostBinding('style') get styleList(): any
-    {
-        return {
-            'height'  : this._height,
-            'overflow': 'hidden',
-            'resize'  : 'none'
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Decorated methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resize on 'input' and 'ngModelChange' events
-     *
-     * @private
-     */
-    @HostListener('input')
-    @HostListener('ngModelChange')
-    private _resize(): void
-    {
-        // This doesn't need to trigger Angular's change detection by itself
-        this._ngZone.runOutsideAngular(() => {
-
-            setTimeout(() => {
-
-                // Set the height to 'auto' so we can correctly read the scrollHeight
-                this._height = 'auto';
-
-                // Detect the changes so the height is applied
-                this._changeDetectorRef.detectChanges();
-
-                // Get the scrollHeight and subtract the vertical padding
-                this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
-
-                // Detect the changes one more time to apply the final height
-                this._changeDetectorRef.detectChanges();
-            });
-        });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: SimpleChanges): void
-    {
-        // Padding
-        if ( 'fuseAutogrowVerticalPadding' in changes )
-        {
-            // Resize
-            this._resize();
-        }
-    }
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Resize for the first time
-        this._resize();
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-}
diff --git a/src/@fuse/directives/autogrow/autogrow.module.ts b/src/@fuse/directives/autogrow/autogrow.module.ts
deleted file mode 100644
index 15d08b86..00000000
--- a/src/@fuse/directives/autogrow/autogrow.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseAutogrowDirective } from '@fuse/directives/autogrow/autogrow.directive';
-
-@NgModule({
-    declarations: [
-        FuseAutogrowDirective
-    ],
-    exports     : [
-        FuseAutogrowDirective
-    ]
-})
-export class FuseAutogrowModule
-{
-}
diff --git a/src/@fuse/directives/autogrow/index.ts b/src/@fuse/directives/autogrow/index.ts
deleted file mode 100644
index c689e4bb..00000000
--- a/src/@fuse/directives/autogrow/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@fuse/directives/autogrow/public-api';
diff --git a/src/@fuse/directives/autogrow/public-api.ts b/src/@fuse/directives/autogrow/public-api.ts
deleted file mode 100644
index 1bb75d2d..00000000
--- a/src/@fuse/directives/autogrow/public-api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from '@fuse/directives/autogrow/autogrow.directive';
-export * from '@fuse/directives/autogrow/autogrow.module';
diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss
index 96b7b261..736a68fc 100644
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
@@ -690,8 +690,8 @@
                     align-self: stretch;
                     min-height: 36px;
                     height: auto;
-                    margin: 10px 0;
-                    padding: 4px 6px 4px 0 !important;
+                    margin: 14px 0;
+                    padding: 0 6px 0 0;
                     transform: none;
                 }
 
diff --git a/src/app/modules/admin/apps/calendar/calendar.component.html b/src/app/modules/admin/apps/calendar/calendar.component.html
index 688384df..03d9a4b5 100644
--- a/src/app/modules/admin/apps/calendar/calendar.component.html
+++ b/src/app/modules/admin/apps/calendar/calendar.component.html
@@ -341,8 +341,8 @@
                                 <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
                                     <textarea
                                         matInput
-                                        cdkTextareaAutosize
-                                        [cdkAutosizeMinRows]="1"
+                                        matTextareaAutosize
+                                        [matAutosizeMinRows]="1"
                                         [formControlName]="'description'"
                                         [placeholder]="'Event description'">
                                     </textarea>
diff --git a/src/app/modules/admin/apps/chat/chat.module.ts b/src/app/modules/admin/apps/chat/chat.module.ts
index d2ecdc80..ad612551 100644
--- a/src/app/modules/admin/apps/chat/chat.module.ts
+++ b/src/app/modules/admin/apps/chat/chat.module.ts
@@ -7,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { SharedModule } from 'app/shared/shared.module';
 import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
 import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
@@ -35,7 +34,6 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
         MatInputModule,
         MatMenuModule,
         MatSidenavModule,
-        FuseAutogrowModule,
         SharedModule
     ]
 })
diff --git a/src/app/modules/admin/apps/contacts/contacts.module.ts b/src/app/modules/admin/apps/contacts/contacts.module.ts
index bfbebc32..35bc0607 100644
--- a/src/app/modules/admin/apps/contacts/contacts.module.ts
+++ b/src/app/modules/admin/apps/contacts/contacts.module.ts
@@ -17,7 +17,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as moment from 'moment';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
@@ -49,7 +48,6 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
         MatSidenavModule,
         MatTableModule,
         MatTooltipModule,
-        FuseAutogrowModule,
         FuseFindByKeyPipeModule,
         SharedModule
     ],
diff --git a/src/app/modules/admin/apps/contacts/details/details.component.html b/src/app/modules/admin/apps/contacts/details/details.component.html
index 0d61995c..a2d130d4 100644
--- a/src/app/modules/admin/apps/contacts/details/details.component.html
+++ b/src/app/modules/admin/apps/contacts/details/details.component.html
@@ -598,11 +598,11 @@
                                 [svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
                             <textarea
                                 matInput
-                                fuseAutogrow
-                                [rows]="5"
                                 [formControlName]="'notes'"
                                 [placeholder]="'Notes'"
-                                [spellcheck]="false"></textarea>
+                                [rows]="5"
+                                [spellcheck]="false"
+                                matTextareaAutosize></textarea>
                         </mat-form-field>
                     </div>
 
diff --git a/src/app/modules/admin/apps/help-center/support/support.component.html b/src/app/modules/admin/apps/help-center/support/support.component.html
index 2c4d4cc6..328a3a16 100644
--- a/src/app/modules/admin/apps/help-center/support/support.component.html
+++ b/src/app/modules/admin/apps/help-center/support/support.component.html
@@ -74,11 +74,10 @@
                     <mat-form-field class="fuse-mat-textarea w-full">
                         <textarea
                             matInput
-                            [cdkTextareaAutosize]
-                            [cdkAutosizeMinRows]="5"
-                            [cdkAutosizeMaxRows]="5"
                             [formControlName]="'message'"
-                            [required]="true"></textarea>
+                            [required]="true"
+                            [rows]="5"
+                            matTextareaAutosize></textarea>
                         <mat-label>Message</mat-label>
                         <mat-error *ngIf="supportForm.get('message').hasError('required')">
                             Required
diff --git a/src/app/modules/admin/apps/notes/details/details.component.html b/src/app/modules/admin/apps/notes/details/details.component.html
index b2c6e5e1..363be7d8 100644
--- a/src/app/modules/admin/apps/notes/details/details.component.html
+++ b/src/app/modules/admin/apps/notes/details/details.component.html
@@ -27,13 +27,13 @@
                     (input)="updateNoteDetails(note)">
             </div>
             <!-- Note -->
-            <div>
+            <div class="flex w-full py-5 px-2">
                 <textarea
-                    class="w-full my-2.5 p-2"
-                    fuseAutogrow
+                    class="w-full"
                     [placeholder]="'Note'"
                     [(ngModel)]="note.content"
-                    (input)="updateNoteDetails(note)"></textarea>
+                    (input)="updateNoteDetails(note)"
+                    matTextareaAutosize></textarea>
             </div>
             <!-- Tasks -->
             <ng-container *ngIf="note.tasks">
diff --git a/src/app/modules/admin/apps/notes/notes.module.ts b/src/app/modules/admin/apps/notes/notes.module.ts
index 23aaf7d8..1f78ec92 100644
--- a/src/app/modules/admin/apps/notes/notes.module.ts
+++ b/src/app/modules/admin/apps/notes/notes.module.ts
@@ -9,7 +9,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseMasonryModule } from '@fuse/components/masonry';
 import { SharedModule } from 'app/shared/shared.module';
 import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
@@ -36,7 +35,6 @@ import { notesRoutes } from 'app/modules/admin/apps/notes/notes.routing';
         MatMenuModule,
         MatRippleModule,
         MatSidenavModule,
-        FuseAutogrowModule,
         FuseMasonryModule,
         SharedModule
     ]
diff --git a/src/app/modules/admin/apps/tasks/details/details.component.html b/src/app/modules/admin/apps/tasks/details/details.component.html
index 09ab4c8e..496667d6 100644
--- a/src/app/modules/admin/apps/tasks/details/details.component.html
+++ b/src/app/modules/admin/apps/tasks/details/details.component.html
@@ -66,9 +66,9 @@
                 <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
                 <textarea
                     matInput
-                    fuseAutogrow
                     [formControlName]="'title'"
                     [spellcheck]="false"
+                    matTextareaAutosize
                     #titleField></textarea>
             </mat-form-field>
         </div>
@@ -323,11 +323,10 @@
             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                 <mat-label>Notes</mat-label>
                 <textarea
-                    class="leading-relaxed"
                     matInput
-                    fuseAutogrow
                     [formControlName]="'notes'"
-                    [spellcheck]="false"></textarea>
+                    [spellcheck]="false"
+                    matTextareaAutosize></textarea>
             </mat-form-field>
         </div>
 
diff --git a/src/app/modules/admin/apps/tasks/tasks.module.ts b/src/app/modules/admin/apps/tasks/tasks.module.ts
index b6a8e939..3004d4f1 100644
--- a/src/app/modules/admin/apps/tasks/tasks.module.ts
+++ b/src/app/modules/admin/apps/tasks/tasks.module.ts
@@ -18,7 +18,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as moment from 'moment';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
@@ -51,7 +50,6 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
         MatSelectModule,
         MatSidenavModule,
         MatTooltipModule,
-        FuseAutogrowModule,
         FuseFindByKeyPipeModule,
         SharedModule
     ],
diff --git a/src/app/modules/admin/docs/core-features/core-features.component.ts b/src/app/modules/admin/docs/core-features/core-features.component.ts
index 7d0d10cd..44445d0d 100644
--- a/src/app/modules/admin/docs/core-features/core-features.component.ts
+++ b/src/app/modules/admin/docs/core-features/core-features.component.ts
@@ -96,12 +96,6 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
                 title   : 'Directives',
                 type    : 'group',
                 children: [
-                    {
-                        id   : 'core-features.directives.autogrow',
-                        title: 'Autogrow',
-                        type : 'basic',
-                        link : '/docs/core-features/directives/autogrow'
-                    },
                     {
                         id   : 'core-features.directives.scrollbar',
                         title: 'Scrollbar',
diff --git a/src/app/modules/admin/docs/core-features/core-features.module.ts b/src/app/modules/admin/docs/core-features/core-features.module.ts
index d927298f..1330895c 100644
--- a/src/app/modules/admin/docs/core-features/core-features.module.ts
+++ b/src/app/modules/admin/docs/core-features/core-features.module.ts
@@ -23,7 +23,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
 import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
-import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
 import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
 import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
@@ -44,7 +43,6 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
         HighlightComponent,
         MasonryComponent,
         NavigationComponent,
-        AutogrowComponent,
         ScrollbarComponent,
         ScrollResetComponent,
         ConfigComponent,
diff --git a/src/app/modules/admin/docs/core-features/core-features.routing.ts b/src/app/modules/admin/docs/core-features/core-features.routing.ts
index 0ab76c3f..350932b7 100644
--- a/src/app/modules/admin/docs/core-features/core-features.routing.ts
+++ b/src/app/modules/admin/docs/core-features/core-features.routing.ts
@@ -8,7 +8,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
 import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
-import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
 import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
 import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
@@ -80,11 +79,7 @@ export const coreFeaturesRoutes: Route[] = [
                     {
                         path      : '',
                         pathMatch : 'full',
-                        redirectTo: 'autogrow'
-                    },
-                    {
-                        path     : 'autogrow',
-                        component: AutogrowComponent
+                        redirectTo: 'scrollbar'
                     },
                     {
                         path     : 'scrollbar',
diff --git a/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.html b/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.html
deleted file mode 100644
index 509dee8b..00000000
--- a/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<div class="flex flex-col flex-auto min-w-0">
-
-    <!-- Header -->
-    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
-        <div class="flex-1 min-w-0">
-            <!-- Breadcrumbs -->
-            <div class="flex flex-wrap items-center font-medium">
-                <div>
-                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <span class="ml-1 text-secondary">Directives</span>
-                </div>
-            </div>
-            <!-- Title -->
-            <div class="mt-2">
-                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
-                    Autogrow
-                </h2>
-            </div>
-        </div>
-        <button
-            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
-            mat-icon-button
-            (click)="toggleDrawer()">
-            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
-        </button>
-    </div>
-
-    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
-
-        <p>
-            <strong>fuseAutogrow</strong> is a <code>&lt;textarea&gt;</code> directive to make them automatically grow depending on their content. It's an alternative for
-            Angular Material's <strong>cdkTextareaAutosize</strong> directive with a more native and lightweight approach.
-        </p>
-        <p>
-            <strong>Exported as: </strong><code>fuseAutogrow</code>
-        </p>
-
-        <h2>Module</h2>
-        <textarea
-            fuse-highlight
-            lang="typescript">
-            import { FuseAutogrowModule } from '@fuse/directives/autogrow';
-        </textarea>
-
-        <h2>Usage</h2>
-        <p>
-            Here's the basic usage of the <code>fuseAutogrow</code>:
-        </p>
-        <!-- @formatter:off -->
-        <textarea fuse-highlight
-                  lang="html">
-            &lt;textarea fuseAutogrow
-                      [fuseAutogrowVerticalPadding]="12"&gt;
-                Content of the textarea
-            &lt;/textarea&gt;
-        </textarea>
-        <!-- @formatter:on -->
-
-        <h2>Properties</h2>
-        <div class="bg-card py-3 px-6 rounded shadow">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Description</th>
-                        <th>Default</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
-                            <div>fuseAutogrowVerticalPadding: number</div>
-                        </td>
-                        <td>
-                            Padding of the textarea. Must be inline with textarea's padding style.
-                        </td>
-                        <td>
-                            <code class="whitespace-nowrap">8</code>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-    </div>
-
-</div>
diff --git a/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.ts b/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.ts
deleted file mode 100644
index bfa6d789..00000000
--- a/src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
-
-@Component({
-    selector   : 'autogrow',
-    templateUrl: './autogrow.component.html',
-    styles     : ['']
-})
-export class AutogrowComponent
-{
-    /**
-     * Constructor
-     */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle the drawer
-     */
-    toggleDrawer(): void
-    {
-        // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
-    }
-}
diff --git a/src/app/modules/admin/pages/profile/profile.component.html b/src/app/modules/admin/pages/profile/profile.component.html
index bc5c1328..d818416c 100644
--- a/src/app/modules/admin/pages/profile/profile.component.html
+++ b/src/app/modules/admin/pages/profile/profile.component.html
@@ -541,9 +541,9 @@
                     <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                         <textarea
                             matInput
-                            cdkTextareaAutosize
-                            [cdkAutosizeMinRows]="3"
-                            placeholder="What's on your mind?"></textarea>
+                            [placeholder]="'What\'s on your mind?'"
+                            [rows]="3"
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -804,9 +804,9 @@
                             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                 <textarea
                                     matInput
-                                    cdkTextareaAutosize
-                                    [cdkAutosizeMinRows]="3"
-                                    placeholder="Write a comment..."></textarea>
+                                    [placeholder]="'Write a comment...'"
+                                    [rows]="3"
+                                    matTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">
diff --git a/src/app/modules/admin/pages/settings/account/account.component.html b/src/app/modules/admin/pages/settings/account/account.component.html
index e500a3e7..e15b6891 100644
--- a/src/app/modules/admin/pages/settings/account/account.component.html
+++ b/src/app/modules/admin/pages/settings/account/account.component.html
@@ -67,10 +67,10 @@
                 <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                     <mat-label>About</mat-label>
                     <textarea
+                        matInput
                         [formControlName]="'about'"
-                        [cdkTextareaAutosize]
-                        cdkAutosizeMinRows="5"
-                        matInput></textarea>
+                        matTextareaAutosize
+                        [matAutosizeMinRows]="5"></textarea>
                 </mat-form-field>
                 <div class="mt-1 text-md text-hint">Brief description for your profile. Basic HTML and Emoji are allowed.</div>
             </div>
diff --git a/src/app/modules/admin/pages/settings/settings.module.ts b/src/app/modules/admin/pages/settings/settings.module.ts
index 2040765f..f469c58e 100644
--- a/src/app/modules/admin/pages/settings/settings.module.ts
+++ b/src/app/modules/admin/pages/settings/settings.module.ts
@@ -9,7 +9,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { SharedModule } from 'app/shared/shared.module';
 import { SettingsComponent } from 'app/modules/admin/pages/settings/settings.component';
 import { SettingsAccountComponent } from 'app/modules/admin/pages/settings/account/account.component';
@@ -39,7 +38,6 @@ import { settingsRoutes } from 'app/modules/admin/pages/settings/settings.routin
         MatSidenavModule,
         MatSlideToggleModule,
         FuseAlertModule,
-        FuseAutogrowModule,
         SharedModule
     ]
 })
diff --git a/src/app/modules/admin/ui/cards/cards.component.html b/src/app/modules/admin/ui/cards/cards.component.html
index fb5fd024..642dbc30 100644
--- a/src/app/modules/admin/ui/cards/cards.component.html
+++ b/src/app/modules/admin/ui/cards/cards.component.html
@@ -2176,9 +2176,9 @@
                     <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                         <textarea
                             matInput
-                            cdkTextareaAutosize
-                            [cdkAutosizeMinRows]="3"
-                            placeholder="What's on your mind?"></textarea>
+                            [placeholder]="'What\'s on your mind?'"
+                            [rows]="3"
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -2440,9 +2440,9 @@
                             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                 <textarea
                                     matInput
-                                    cdkTextareaAutosize
-                                    [cdkAutosizeMinRows]="3"
-                                    placeholder="Write a comment..."></textarea>
+                                    [rows]="3"
+                                    [placeholder]="'Write a comment...'"
+                                    matTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -4012,8 +4012,9 @@
                             <textarea
                                 class="leading-normal my-2"
                                 matInput
-                                cdkTextareaAutosize
-                                placeholder="Write a comment..."></textarea>
+                                [placeholder]="'Write a comment...'"
+                                matTextareaAutosize
+                                [rows]="3"></textarea>
                         </mat-form-field>
                     </div>
                     <div class="flex items-center mt-3 ml-auto -mr-3">
diff --git a/src/app/modules/admin/ui/forms/fields/fields.component.html b/src/app/modules/admin/ui/forms/fields/fields.component.html
index e2e54c5b..87835287 100644
--- a/src/app/modules/admin/ui/forms/fields/fields.component.html
+++ b/src/app/modules/admin/ui/forms/fields/fields.component.html
@@ -70,8 +70,8 @@
                         <mat-label>Address</mat-label>
                         <textarea
                             matInput
-                            cdkTextareaAutosize
-                            cdkAutosizeMinRows="3"></textarea>
+                            [rows]="3"
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matSuffix
@@ -357,7 +357,7 @@
                         <mat-label>Textarea with autosize</mat-label>
                         <textarea
                             matInput
-                            fuseAutogrow></textarea>
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
@@ -367,7 +367,7 @@
                         <mat-label>Textarea with autosize, prefix & suffix</mat-label>
                         <textarea
                             matInput
-                            fuseAutogrow></textarea>
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix
@@ -625,8 +625,8 @@
                         class="fuse-mat-textarea flex-auto">
                         <textarea
                             matInput
-                            fuseAutogrow
-                            [placeholder]="'Textarea with autosize'"></textarea>
+                            [placeholder]="'Textarea with autosize'"
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
@@ -635,8 +635,8 @@
                         class="fuse-mat-textarea flex-auto">
                         <textarea
                             matInput
-                            fuseAutogrow
-                            [placeholder]="'Textarea with autosize, prefix & suffix'"></textarea>
+                            [placeholder]="'Textarea with autosize, prefix & suffix'"
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix
diff --git a/src/app/modules/admin/ui/forms/fields/fields.module.ts b/src/app/modules/admin/ui/forms/fields/fields.module.ts
index d6b6f28c..c9a53cb9 100644
--- a/src/app/modules/admin/ui/forms/fields/fields.module.ts
+++ b/src/app/modules/admin/ui/forms/fields/fields.module.ts
@@ -11,7 +11,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatSelectModule } from '@angular/material/select';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseHighlightModule } from '@fuse/components/highlight';
 import { SharedModule } from 'app/shared/shared.module';
 import { FormsFieldsComponent } from 'app/modules/admin/ui/forms/fields/fields.component';
@@ -40,7 +39,6 @@ export const routes: Route[] = [
         MatMenuModule,
         MatMomentDateModule,
         MatSelectModule,
-        FuseAutogrowModule,
         FuseHighlightModule,
         SharedModule
     ]