mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 12:05:08 +00:00
(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.
This commit is contained in:
sercan
parent
b98cfc1d37
commit
f295fd9061
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
{
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from '@fuse/directives/autogrow/public-api';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from '@fuse/directives/autogrow/autogrow.directive';
|
||||
export * from '@fuse/directives/autogrow/autogrow.module';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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><textarea></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">
|
||||
<textarea fuseAutogrow
|
||||
[fuseAutogrowVerticalPadding]="12">
|
||||
Content of the textarea
|
||||
</textarea>
|
||||
</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>
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user