purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated the application to reflect the changes

Browse Source
This commit is contained in:
Sercan Yemen 2022-11-11 15:30:12 +03:00
parent 8000e53bae
commit 08266c3e51
75 changed files with 533 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/layout/common/quick-chat/quick-chat.component.html
View File

@ -151,12 +151,12 @@
<!-- Message field --> <!-- Message field -->
<div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent"> <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"> <mat-form-field
class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
class="min-h-5 my-0 resize-none"
style="margin: 11px 0 !important; padding: 0 !important;"
[rows]="1"
matInput matInput
cdkTextareaAutosize
#messageInput></textarea> #messageInput></textarea>
</mat-form-field> </mat-form-field>
<div class="flex items-center h-11 my-px ml-4"> <div class="flex items-center h-11 my-px ml-4">

4
src/app/layout/common/search/search.component.html
View File

@ -68,7 +68,9 @@
<!-- Basic search --> <!-- Basic search -->
<ng-container *ngIf="appearance === 'basic'"> <ng-container *ngIf="appearance === 'basic'">
<div class="w-full sm:min-w-80"> <div class="w-full sm:min-w-80">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
matPrefix matPrefix
[svgIcon]="'heroicons_outline:search'"></mat-icon> [svgIcon]="'heroicons_outline:search'"></mat-icon>

20
src/app/modules/admin/apps/academy/details/details.component.html
View File

@ -140,10 +140,12 @@
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="goToPreviousStep()"> (click)="goToPreviousStep()">
<mat-icon <span class="inline-flex items-center">
class="mr-2" <mat-icon
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon> class="mr-2"
<span class="mr-1">Prev</span> [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="mr-1">Prev</span>
</span>
</button> </button>
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary"> <div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
<span>{{currentStep + 1}}</span> <span>{{currentStep + 1}}</span>
@ -155,10 +157,12 @@
mat-flat-button mat-flat-button
[color]="'primary'" [color]="'primary'"
(click)="goToNextStep()"> (click)="goToNextStep()">
<span class="ml-1">Next</span> <span class="inline-flex items-center">
<mat-icon <span class="ml-1">Next</span>
class="ml-2" <mat-icon
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon> class="ml-2"
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
</span>
</button> </button>
</div> </div>
</div> </div>

8
src/app/modules/admin/apps/academy/list/list.component.html
View File

@ -31,7 +31,9 @@
<div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto"> <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
<!-- Filters --> <!-- Filters -->
<div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none"> <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
<mat-form-field class="fuse-mat-no-subscript w-full sm:w-36"> <mat-form-field
class="w-full sm:w-36"
[subscriptSizing]="'dynamic'">
<mat-select <mat-select
[value]="'all'" [value]="'all'"
(selectionChange)="filterByCategory($event)"> (selectionChange)="filterByCategory($event)">
@ -42,8 +44,8 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field <mat-form-field
class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4" class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
[floatLabel]="'always'"> [subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
matPrefix matPrefix
class="icon-size-5" class="icon-size-5"

4
src/app/modules/admin/apps/chat/chats/chats.component.html
View File

@ -95,8 +95,8 @@
<!-- Search --> <!-- Search -->
<div class="mt-4"> <div class="mt-4">
<mat-form-field <mat-form-field
class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full" class="fuse-mat-rounded fuse-mat-dense w-full"
[floatLabel]="'always'"> [subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
matPrefix matPrefix
class="icon-size-5" class="icon-size-5"

8
src/app/modules/admin/apps/chat/conversation/conversation.component.html
View File

@ -167,12 +167,12 @@
<mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
</button> </button>
</div> </div>
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full ml-4"> <mat-form-field
class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full ml-4"
subscriptSizing="dynamic">
<textarea <textarea
class="min-h-5 my-0 resize-none"
style="margin: 11px 0 !important; padding: 0 !important;"
[rows]="1"
matInput matInput
cdkTextareaAutosize
#messageInput></textarea> #messageInput></textarea>
</mat-form-field> </mat-form-field>
<div class="flex items-center h-11 my-px ml-4"> <div class="flex items-center h-11 my-px ml-4">

50
src/app/modules/admin/apps/contacts/details/details.component.html
View File

@ -248,7 +248,9 @@
<!-- Name --> <!-- Name -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -332,7 +334,7 @@
<ng-container *ngIf="!tagsEditMode"> <ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div <div
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover" class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
(click)="toggleContactTag(tag)" (click)="toggleContactTag(tag)"
matRipple> matRipple>
<mat-checkbox <mat-checkbox
@ -341,7 +343,7 @@
[color]="'primary'" [color]="'primary'"
[disableRipple]="true"> [disableRipple]="true">
</mat-checkbox> </mat-checkbox>
<div class="ml-1">{{tag.title}}</div> <div>{{tag.title}}</div>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -350,7 +352,9 @@
<div class="py-2 space-y-2"> <div class="py-2 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div class="flex items-center"> <div class="flex items-center">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4"> <mat-form-field
class="fuse-mat-dense w-full mx-4"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[value]="tag.title" [value]="tag.title"
@ -387,7 +391,9 @@
<!-- Title --> <!-- Title -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Title</mat-label> <mat-label>Title</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -402,7 +408,9 @@
<!-- Company --> <!-- Company -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Company</mat-label> <mat-label>Company</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -420,7 +428,9 @@
<div class="space-y-4"> <div class="space-y-4">
<ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn"> <ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-no-subscript flex-auto"> <mat-form-field
class="flex-auto"
[subscriptSizing]="'dynamic'">
<mat-label *ngIf="first">Email</mat-label> <mat-label *ngIf="first">Email</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -432,7 +442,9 @@
[placeholder]="'Email address'" [placeholder]="'Email address'"
[spellcheck]="false"> [spellcheck]="false">
</mat-form-field> </mat-form-field>
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"> <mat-form-field
class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
[subscriptSizing]="'dynamic'">
<mat-label *ngIf="first">Label</mat-label> <mat-label *ngIf="first">Label</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -477,7 +489,9 @@
<div class="space-y-4"> <div class="space-y-4">
<ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn"> <ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
<div class="relative flex"> <div class="relative flex">
<mat-form-field class="fuse-mat-no-subscript flex-auto"> <mat-form-field
class="flex-auto"
[subscriptSizing]="'dynamic'">
<mat-label *ngIf="first">Phone</mat-label> <mat-label *ngIf="first">Phone</mat-label>
<input <input
matInput matInput
@ -512,7 +526,9 @@
</ng-container> </ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"> <mat-form-field
class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
[subscriptSizing]="'dynamic'">
<mat-label *ngIf="first">Label</mat-label> <mat-label *ngIf="first">Label</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -554,7 +570,9 @@
<!-- Address --> <!-- Address -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -569,7 +587,9 @@
<!-- Birthday --> <!-- Birthday -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Birthday</mat-label> <mat-label>Birthday</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -590,7 +610,9 @@
<!-- Notes --> <!-- Notes -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Notes</mat-label> <mat-label>Notes</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
@ -602,7 +624,7 @@
[placeholder]="'Notes'" [placeholder]="'Notes'"
[rows]="5" [rows]="5"
[spellcheck]="false" [spellcheck]="false"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>

4
src/app/modules/admin/apps/contacts/list/list.component.html
View File

@ -42,7 +42,9 @@
<div class="flex items-center mt-4 sm:mt-0 md:mt-4"> <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
<!-- Search --> <!-- Search -->
<div class="flex-auto"> <div class="flex-auto">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50"> <mat-form-field
class="fuse-mat-dense fuse-mat-rounded w-full min-w-50"
subscriptSizing="dynamic">
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
matPrefix matPrefix

10
src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
View File

@ -13,7 +13,9 @@
<!-- Actions --> <!-- Actions -->
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- Search --> <!-- Search -->
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"> <mat-form-field
class="fuse-mat-dense fuse-mat-rounded min-w-64"
[subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
matPrefix matPrefix
@ -398,7 +400,7 @@
<ng-container *ngIf="!tagsEditMode"> <ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-checkbox <mat-checkbox
class="flex items-center h-10 min-h-10 px-4" class="flex items-center h-10 min-h-10 pl-1 pr-4"
[color]="'primary'" [color]="'primary'"
[checked]="selectedProduct.tags.includes(tag.id)" [checked]="selectedProduct.tags.includes(tag.id)"
(change)="toggleProductTag(tag, $event)"> (change)="toggleProductTag(tag, $event)">
@ -410,7 +412,9 @@
<ng-container *ngIf="tagsEditMode"> <ng-container *ngIf="tagsEditMode">
<div class="p-4 space-y-2"> <div class="p-4 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full"> <mat-form-field
class="fuse-mat-dense w-full"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[value]="tag.title" [value]="tag.title"

4
src/app/modules/admin/apps/help-center/help-center.component.html
View File

@ -20,7 +20,9 @@
<div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary"> <div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
Search for a topic or question, check out our FAQs and guides, contact us for detailed support Search for a topic or question, check out our FAQs and guides, contact us for detailed support
</div> </div>
<mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"> <mat-form-field
class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[placeholder]="'Enter a question, topic or keyword'"> [placeholder]="'Enter a question, topic or keyword'">

4
src/app/modules/admin/apps/help-center/support/support.component.html
View File

@ -71,13 +71,13 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<!-- Message --> <!-- Message -->
<mat-form-field class="fuse-mat-textarea w-full"> <mat-form-field class="w-full">
<textarea <textarea
matInput matInput
[formControlName]="'message'" [formControlName]="'message'"
[required]="true" [required]="true"
[rows]="5" [rows]="5"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
<mat-label>Message</mat-label> <mat-label>Message</mat-label>
<mat-error *ngIf="supportForm.get('message').hasError('required')"> <mat-error *ngIf="supportForm.get('message').hasError('required')">
Required Required

2
src/app/modules/admin/apps/mailbox/details/details.component.html
View File

@ -332,7 +332,7 @@
class="flex flex-col w-full" class="flex flex-col w-full"
#replyForm> #replyForm>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript"> <mat-form-field [subscriptSizing]="'dynamic'">
<textarea <textarea
class="textarea" class="textarea"
matInput matInput

2
src/app/modules/admin/apps/notes/details/details.component.html
View File

@ -33,7 +33,7 @@
[placeholder]="'Note'" [placeholder]="'Note'"
[(ngModel)]="note.content" [(ngModel)]="note.content"
(input)="updateNoteDetails(note)" (input)="updateNoteDetails(note)"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</div> </div>
<!-- Tasks --> <!-- Tasks -->
<ng-container *ngIf="note.tasks"> <ng-container *ngIf="note.tasks">

4
src/app/modules/admin/apps/notes/labels/labels.component.html
View File

@ -9,9 +9,7 @@
</button> </button>
</div> </div>
<!-- New label --> <!-- New label -->
<mat-form-field <mat-form-field class="fuse-mat-dense w-full mt-8">
class="fuse-mat-dense w-full mt-8"
[floatLabel]="'always'">
<input <input
name="new-label" name="new-label"
[autocomplete]="'off'" [autocomplete]="'off'"

4
src/app/modules/admin/apps/notes/list/list.component.html
View File

@ -82,7 +82,9 @@
(click)="drawer.toggle()"> (click)="drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0"> <mat-form-field
class="fuse-mat-rounded fuse-mat-dense flex-auto ml-4 lg:ml-0"
[subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
[svgIcon]="'heroicons_solid:search'" [svgIcon]="'heroicons_solid:search'"

2
src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
View File

@ -3,7 +3,7 @@
[class.h-13]="!formVisible"> [class.h-13]="!formVisible">
<div class="relative flex w-full h-full rounded-lg"> <div class="relative flex w-full h-full rounded-lg">
<button <button
class="absolute inset-0 justify-start w-full px-5 rounded-lg" class="absolute inset-0 justify-start w-full rounded-lg"
[ngClass]="{'opacity-0 pointer-events-none': formVisible}" [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
mat-button mat-button
(click)="toggleFormVisibility()" (click)="toggleFormVisibility()"

8
src/app/modules/admin/apps/scrumboard/board/board.component.html
View File

@ -14,17 +14,17 @@
mat-stroked-button mat-stroked-button
[routerLink]="['..']"> [routerLink]="['..']">
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:view-boards'"></mat-icon> [svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
Boards <span class="ml-2">Boards</span>
</a> </a>
<button <button
class="ml-3" class="ml-3"
mat-stroked-button> mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:cog'"></mat-icon> [svgIcon]="'heroicons_solid:cog'"></mat-icon>
Settings <span class="ml-2">Settings</span>
</button> </button>
</div> </div>
</div> </div>

14
src/app/modules/admin/apps/scrumboard/card/details/details.component.html
View File

@ -19,7 +19,9 @@
[formGroup]="cardForm"> [formGroup]="cardForm">
<!-- Title --> <!-- Title -->
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Title</mat-label> <mat-label>Title</mat-label>
<textarea <textarea
matInput matInput
@ -31,7 +33,9 @@
</mat-form-field> </mat-form-field>
<!-- Description --> <!-- Description -->
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<textarea <textarea
matInput matInput
@ -58,7 +62,9 @@
<ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container> <ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
<ng-container *ngIf="!card.dueDate">Not set</ng-container> <ng-container *ngIf="!card.dueDate">Not set</ng-container>
</span> </span>
<mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"> <mat-form-field
class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[formControlName]="'dueDate'" [formControlName]="'dueDate'"
@ -107,7 +113,7 @@
<!-- Labels --> <!-- Labels -->
<ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn"> <ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
<mat-checkbox <mat-checkbox
class="flex items-center h-10 min-h-10 px-4" class="flex items-center h-10 min-h-10 pl-1 pr-4"
[color]="'primary'" [color]="'primary'"
[checked]="hasLabel(label)" [checked]="hasLabel(label)"
(change)="toggleProductTag(label, $event)"> (change)="toggleProductTag(label, $event)">

22
src/app/modules/admin/apps/tasks/details/details.component.html
View File

@ -62,13 +62,15 @@
<!-- Title --> <!-- Title -->
<div> <div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label> <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
<textarea <textarea
matInput matInput
[formControlName]="'title'" [formControlName]="'title'"
[spellcheck]="false" [spellcheck]="false"
matTextareaAutosize cdkTextareaAutosize
#titleField></textarea> #titleField></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
@ -144,7 +146,7 @@
<ng-container *ngIf="!tagsEditMode"> <ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div <div
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover" class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
(click)="toggleTaskTag(tag)" (click)="toggleTaskTag(tag)"
matRipple> matRipple>
<mat-checkbox <mat-checkbox
@ -162,7 +164,9 @@
<div class="py-2 space-y-2"> <div class="py-2 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn"> <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div class="flex items-center"> <div class="flex items-center">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4"> <mat-form-field
class="fuse-mat-dense w-full mx-4"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[value]="tag.title" [value]="tag.title"
@ -293,7 +297,9 @@
<ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container> <ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
<ng-container *ngIf="!task.dueDate">Not set</ng-container> <ng-container *ngIf="!task.dueDate">Not set</ng-container>
</span> </span>
<mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"> <mat-form-field
class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
[subscriptSizing]="'dynamic'">
<input <input
matInput matInput
[formControlName]="'dueDate'" [formControlName]="'dueDate'"
@ -321,13 +327,15 @@
<!-- Notes --> <!-- Notes -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Notes</mat-label> <mat-label>Notes</mat-label>
<textarea <textarea
matInput matInput
[formControlName]="'notes'" [formControlName]="'notes'"
[spellcheck]="false" [spellcheck]="false"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>

18
src/app/modules/admin/dashboards/crypto/crypto.component.html
View File

@ -55,20 +55,10 @@
<div class="flex flex-col px-6 pb-2"> <div class="flex flex-col px-6 pb-2">
<mat-form-field> <mat-form-field>
<mat-label>Action</mat-label> <mat-label>Action</mat-label>
<span <mat-icon
class="flex items-center justify-center" class="icon-size-5"
matPrefix> [svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
<ng-container *ngIf="buySellSelect.value === 'buy'"> matPrefix></mat-icon>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:download'"></mat-icon>
</ng-container>
<ng-container *ngIf="buySellSelect.value === 'sell'">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:upload'"></mat-icon>
</ng-container>
</span>
<mat-select <mat-select
[value]="'buy'" [value]="'buy'"
#buySellSelect="matSelect"> #buySellSelect="matSelect">

9
src/app/modules/admin/dashboards/project/project.component.html
View File

@ -89,6 +89,7 @@
<!-- Tabs --> <!-- Tabs -->
<mat-tab-group <mat-tab-group
class="sm:px-2" class="sm:px-2"
mat-stretch-tabs="false"
[animationDuration]="'0'"> [animationDuration]="'0'">
<!-- Home --> <!-- Home -->
@ -690,7 +691,13 @@
</mat-tab> </mat-tab>
<!-- Team --> <!-- Team -->
<mat-tab label="Team"> <mat-tab>
<ng-template mat-tab-label>
<span class="inline-flex items-center space-x-2">
<span class="">Team</span>
<span class="px-2 py-1 text-sm rounded-full bg-primary-100 text-on-primary-100">9</span>
</span>
</ng-template>
<ng-template matTabContent> <ng-template matTabContent>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full min-w-0"> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full min-w-0">
<ng-container *ngFor="let member of data.teamMembers"> <ng-container *ngFor="let member of data.teamMembers">

2
src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

5
src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

5
src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
View File

@ -68,7 +68,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -127,8 +127,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

5
src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

3
src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
View File

@ -128,8 +128,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

3
src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
View File

@ -78,8 +78,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

5
src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
View File

@ -68,7 +68,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -127,8 +127,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

5
src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

7
src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -99,12 +99,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

7
src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
View File

@ -68,7 +68,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -149,12 +149,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

7
src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -99,12 +99,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

5
src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
View File

@ -150,12 +150,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

5
src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
View File

@ -100,12 +100,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

7
src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
View File

@ -68,7 +68,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -149,12 +149,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

7
src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -99,12 +99,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

2
src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
View File

@ -62,7 +62,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
View File

@ -14,7 +14,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
View File

@ -64,7 +64,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
View File

@ -14,7 +14,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
View File

@ -64,7 +64,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
View File

@ -14,7 +14,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

96
src/app/modules/admin/pages/profile/profile.component.html
View File

@ -538,12 +538,14 @@
alt="Card cover image"> alt="Card cover image">
<div class="sm:hidden">Brian Hughes</div> <div class="sm:hidden">Brian Hughes</div>
</div> </div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
matInput matInput
[placeholder]="'What\'s on your mind?'" [placeholder]="'What\'s on your mind?'"
[rows]="3" [rows]="3"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex items-center mt-6 sm:mt-8 -mx-3"> <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@ -551,25 +553,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon> [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
<span>Photo / Video</span> <span class="ml-2">Photo / Video</span>
</button> </button>
<button <button
class="px-3 mr-1 hidden sm:inline-flex" class="px-3 mr-1 hidden sm:inline-flex"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon> [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<span>Tag Friends</span> <span class="ml-2">Tag Friends</span>
</button> </button>
<button <button
class="px-3 mr-1 hidden sm:inline-flex" class="px-3 mr-1 hidden sm:inline-flex"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon> [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
<span>Feeling</span> <span class="ml-2">Feeling</span>
</button> </button>
<button <button
class="px-3" class="px-3"
@ -723,25 +725,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -793,12 +795,14 @@
class="w-12 h-12 rounded-full mr-5" class="w-12 h-12 rounded-full mr-5"
src="assets/images/avatars/brian-hughes.jpg" src="assets/images/avatars/brian-hughes.jpg"
alt="Card cover image"> alt="Card cover image">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
matInput matInput
[placeholder]="'Write a comment...'" [placeholder]="'Write a comment...'"
[rows]="3" [rows]="3"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex items-center mt-3 ml-auto -mr-3"> <div class="flex items-center mt-3 ml-auto -mr-3">
@ -1070,25 +1074,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1229,25 +1233,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1383,25 +1387,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1534,25 +1538,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1688,25 +1692,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">

36
src/app/modules/admin/pages/settings/account/account.component.html
View File

@ -11,7 +11,9 @@
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8"> <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
<!-- Name --> <!-- Name -->
<div class="sm:col-span-4"> <div class="sm:col-span-4">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -24,7 +26,9 @@
</div> </div>
<!-- Username --> <!-- Username -->
<div class="sm:col-span-4"> <div class="sm:col-span-4">
<mat-form-field class="fuse-mat-no-subscript fuse-mat-emphasized-affix w-full"> <mat-form-field
class="fuse-mat-emphasized-affix w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Username</mat-label> <mat-label>Username</mat-label>
<div <div
class="text-secondary" class="text-secondary"
@ -38,7 +42,9 @@
</div> </div>
<!-- Title --> <!-- Title -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Title</mat-label> <mat-label>Title</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -51,7 +57,9 @@
</div> </div>
<!-- Company --> <!-- Company -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Company</mat-label> <mat-label>Company</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -64,7 +72,9 @@
</div> </div>
<!-- About --> <!-- About -->
<div class="sm:col-span-4"> <div class="sm:col-span-4">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>About</mat-label> <mat-label>About</mat-label>
<textarea <textarea
matInput matInput
@ -87,7 +97,9 @@
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8"> <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
<!-- Email --> <!-- Email -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Email</mat-label> <mat-label>Email</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -100,7 +112,9 @@
</div> </div>
<!-- Phone --> <!-- Phone -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Phone</mat-label> <mat-label>Phone</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -113,7 +127,9 @@
</div> </div>
<!-- Country --> <!-- Country -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Country</mat-label> <mat-label>Country</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -131,7 +147,9 @@
</div> </div>
<!-- Language --> <!-- Language -->
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Language</mat-label> <mat-label>Language</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"

26
src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
View File

@ -35,7 +35,7 @@
class="absolute top-0 right-0 mt-3 mr-3 icon-size-7 text-primary" class="absolute top-0 right-0 mt-3 mr-3 icon-size-7 text-primary"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
</ng-container> </ng-container>
<div class="font-medium">{{plan.label}}</div> <div class="font-semibold">{{plan.label}}</div>
<div class="mt-1 whitespace-normal text-secondary">{{plan.details}}</div> <div class="mt-1 whitespace-normal text-secondary">{{plan.details}}</div>
<div class="flex-auto"></div> <div class="flex-auto"></div>
<div class="mt-8 text-lg"> <div class="mt-8 text-lg">
@ -57,7 +57,9 @@
<div class="grid grid-cols-4 gap-6 w-full mt-8"> <div class="grid grid-cols-4 gap-6 w-full mt-8">
<!-- Card holder --> <!-- Card holder -->
<div class="col-span-4"> <div class="col-span-4">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Card holder</mat-label> <mat-label>Card holder</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -70,7 +72,9 @@
</div> </div>
<!-- Card number --> <!-- Card number -->
<div class="col-span-4 sm:col-span-2"> <div class="col-span-4 sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Card number</mat-label> <mat-label>Card number</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -84,8 +88,8 @@
<!-- Card expiration --> <!-- Card expiration -->
<div class="col-span-2 sm:col-span-1"> <div class="col-span-2 sm:col-span-1">
<mat-form-field <mat-form-field
class="fuse-mat-no-subscript w-full" class="w-full"
[floatLabel]="'always'"> [subscriptSizing]="'dynamic'">
<mat-label>Expiration date</mat-label> <mat-label>Expiration date</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -99,7 +103,9 @@
</div> </div>
<!-- Card CVC --> <!-- Card CVC -->
<div class="col-span-2 sm:col-span-1"> <div class="col-span-2 sm:col-span-1">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>CVC / CVC2</mat-label> <mat-label>CVC / CVC2</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -112,7 +118,9 @@
</div> </div>
<!-- Country --> <!-- Country -->
<div class="col-span-4 sm:col-span-2"> <div class="col-span-4 sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Country</mat-label> <mat-label>Country</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -130,7 +138,9 @@
</div> </div>
<!-- ZIP --> <!-- ZIP -->
<div class="col-span-4 sm:col-span-2"> <div class="col-span-4 sm:col-span-2">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>ZIP / Postal code</mat-label> <mat-label>ZIP / Postal code</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"

8
src/app/modules/admin/pages/settings/security/security.component.html
View File

@ -11,7 +11,9 @@
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8"> <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
<!-- Current password --> <!-- Current password -->
<div class="sm:col-span-4"> <div class="sm:col-span-4">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Current password</mat-label> <mat-label>Current password</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -25,7 +27,9 @@
</div> </div>
<!-- New password --> <!-- New password -->
<div class="sm:col-span-4"> <div class="sm:col-span-4">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>New password</mat-label> <mat-label>New password</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"

8
src/app/modules/admin/pages/settings/team/team.component.html
View File

@ -3,8 +3,8 @@
<!-- Add team member --> <!-- Add team member -->
<div class="w-full"> <div class="w-full">
<mat-form-field <mat-form-field
class="fuse-mat-no-subscript w-full" class="w-full"
[floatLabel]="'always'"> [subscriptSizing]="'dynamic'">
<mat-label>Add team members</mat-label> <mat-label>Add team members</mat-label>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
@ -48,7 +48,9 @@
</div> </div>
<div class="flex items-center mt-4 sm:mt-0 sm:ml-auto"> <div class="flex items-center mt-4 sm:mt-0 sm:ml-auto">
<div class="order-2 sm:order-1 ml-4 sm:ml-0"> <div class="order-2 sm:order-1 ml-4 sm:ml-0">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-32"> <mat-form-field
class="fuse-mat-dense w-32"
[subscriptSizing]="'dynamic'">
<mat-select <mat-select
[panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'" [panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'"
[value]="member.role" [value]="member.role"

10
src/app/modules/admin/ui/advanced-search/advanced-search.component.html
View File

@ -44,7 +44,9 @@
[formGroup]="searchForm"> [formGroup]="searchForm">
<!-- Keywords --> <!-- Keywords -->
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Keywords</mat-label> <mat-label>Keywords</mat-label>
<input <input
[autocomplete]="'off'" [autocomplete]="'off'"
@ -53,7 +55,9 @@
</mat-form-field> </mat-form-field>
<!-- Type --> <!-- Type -->
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Type</mat-label> <mat-label>Type</mat-label>
<mat-select [formControlName]="'type'"> <mat-select [formControlName]="'type'">
<mat-option [value]="'any'">Any</mat-option> <mat-option [value]="'any'">Any</mat-option>
@ -62,7 +66,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="flex items-center space-x-8"> <div class="flex flex-col items-start -ml-2">
<!-- In trash --> <!-- In trash -->
<mat-checkbox <mat-checkbox
[color]="'primary'" [color]="'primary'"

8
src/app/modules/admin/ui/animations/animations.component.html
View File

@ -265,7 +265,7 @@
<p> <p>
The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeIn]="false"</code> The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeIn]="false"</code>
</p> </p>
<mat-form-field class="fuse-mat-no-subscript"> <mat-form-field [subscriptSizing]="'dynamic'">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select <mat-select
[value]="'in'" [value]="'in'"
@ -698,7 +698,7 @@
<p> <p>
The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeOut]="false"</code> The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeOut]="false"</code>
</p> </p>
<mat-form-field class="fuse-mat-no-subscript"> <mat-form-field [subscriptSizing]="'dynamic'">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select <mat-select
[value]="'out'" [value]="'out'"
@ -1131,7 +1131,7 @@
<p> <p>
The animation can be disabled by setting the state to <b>false</b>; <code>[@slideIn]="false"</code> The animation can be disabled by setting the state to <b>false</b>; <code>[@slideIn]="false"</code>
</p> </p>
<mat-form-field class="fuse-mat-no-subscript"> <mat-form-field [subscriptSizing]="'dynamic'">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select <mat-select
[value]="'top'" [value]="'top'"
@ -1483,7 +1483,7 @@
<p> <p>
The animation can be disabled by setting the state to <b>false</b>; <code>[@slideOut]="false"</code> The animation can be disabled by setting the state to <b>false</b>; <code>[@slideOut]="false"</code>
</p> </p>
<mat-form-field class="fuse-mat-no-subscript"> <mat-form-field [subscriptSizing]="'dynamic'">
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select <mat-select
[value]="'top'" [value]="'top'"

12
src/app/modules/admin/ui/animations/animations.component.scss
View File

@ -1,24 +1,24 @@
animations { animations {
.mat-form-field { .mat-mdc-form-field {
width: 100%; width: 100%;
margin-top: 32px; margin-top: 32px;
} }
mat-tab-group { .mat-mdc-tab-group {
.mat-tab-header { .mat-mdc-tab-header {
padding: 24px 0; padding: 24px 0;
border-top-width: 1px; border-top-width: 1px;
} }
.mat-tab-body-wrapper { .mat-mdc-tab-body-wrapper {
.mat-tab-body { .mat-mdc-tab-body {
&:first-child { &:first-child {
.mat-tab-body-content { .mat-mdc-tab-body-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 200px; min-height: 200px;

142
src/app/modules/admin/ui/cards/cards.component.html
View File

@ -1042,7 +1042,7 @@
<span class="w-3 h-3 border-2 border-blue-500 rounded-full mr-3"></span> <span class="w-3 h-3 border-2 border-blue-500 rounded-full mr-3"></span>
<span class="font-medium text-secondary">USER INTERFACE (5)</span> <span class="font-medium text-secondary">USER INTERFACE (5)</span>
</div> </div>
<div class="flex flex-col mt-2 ml-6"> <div class="flex flex-col mt-2 ml-4">
<mat-checkbox <mat-checkbox
class="my-1" class="my-1"
[color]="'primary'"> [color]="'primary'">
@ -1075,7 +1075,7 @@
<span class="w-3 h-3 border-2 border-green-500 rounded-full mr-3"></span> <span class="w-3 h-3 border-2 border-green-500 rounded-full mr-3"></span>
<span class="font-medium text-secondary">DESIGN SYSTEM (3)</span> <span class="font-medium text-secondary">DESIGN SYSTEM (3)</span>
</div> </div>
<div class="flex flex-col mt-2 ml-6"> <div class="flex flex-col mt-2 ml-4">
<mat-checkbox <mat-checkbox
class="my-1" class="my-1"
[color]="'primary'" [color]="'primary'"
@ -2169,12 +2169,14 @@
alt="Card cover image"> alt="Card cover image">
<div class="sm:hidden">Brian Hughes</div> <div class="sm:hidden">Brian Hughes</div>
</div> </div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
matInput matInput
[placeholder]="'What\'s on your mind?'" [placeholder]="'What\'s on your mind?'"
[rows]="3" [rows]="3"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex items-center mt-6 sm:mt-8 -mx-3"> <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@ -2182,25 +2184,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon> [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
<span>Photo / Video</span> <span class="ml-2">Photo / Video</span>
</button> </button>
<button <button
class="px-3 mr-1 hidden sm:inline-flex" class="px-3 mr-1 hidden sm:inline-flex"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon> [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<span>Tag Friends</span> <span class="ml-2">Tag Friends</span>
</button> </button>
<button <button
class="px-3 mr-1 hidden sm:inline-flex" class="px-3 mr-1 hidden sm:inline-flex"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon> [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
<span>Feeling</span> <span class="ml-2">Feeling</span>
</button> </button>
<button <button
class="px-3" class="px-3"
@ -2355,25 +2357,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -2425,12 +2427,14 @@
class="w-12 h-12 rounded-full mr-5" class="w-12 h-12 rounded-full mr-5"
src="assets/images/avatars/brian-hughes.jpg" src="assets/images/avatars/brian-hughes.jpg"
alt="Card cover image"> alt="Card cover image">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
matInput matInput
[rows]="3" [rows]="3"
[placeholder]="'Write a comment...'" [placeholder]="'Write a comment...'"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex items-center mt-3 ml-auto -mr-3"> <div class="flex items-center mt-3 ml-auto -mr-3">
@ -2709,25 +2713,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -2869,25 +2873,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3037,25 +3041,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3211,25 +3215,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3389,25 +3393,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3535,25 +3539,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3690,25 +3694,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3845,25 +3849,25 @@
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 text-red-500 mr-2" class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon> [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span> <span class="ml-2">Unlike</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon> [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span> <span class="ml-2">Comment</span>
</button> </button>
<button <button
class="px-3 mr-1" class="px-3 mr-1"
mat-button> mat-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon> [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span> <span class="ml-2">Share</span>
</button> </button>
</div> </div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6"> <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3912,12 +3916,14 @@
class="w-12 h-12 rounded-full mr-5" class="w-12 h-12 rounded-full mr-5"
src="assets/images/avatars/brian-hughes.jpg" src="assets/images/avatars/brian-hughes.jpg"
alt="Card cover image"> alt="Card cover image">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea <textarea
class="leading-normal my-2" class="leading-normal my-2"
matInput matInput
[placeholder]="'Write a comment...'" [placeholder]="'Write a comment...'"
matTextareaAutosize cdkTextareaAutosize
[rows]="3"></textarea> [rows]="3"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>

28
src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
View File

@ -55,7 +55,9 @@
class="flex flex-col items-start"> class="flex flex-col items-start">
<!-- Title --> <!-- Title -->
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Title</mat-label> <mat-label>Title</mat-label>
<input <input
matInput matInput
@ -63,7 +65,9 @@
</mat-form-field> </mat-form-field>
<!-- Message --> <!-- Message -->
<mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6"> <mat-form-field
class="w-full mt-6"
[subscriptSizing]="'dynamic'">
<mat-label>Message</mat-label> <mat-label>Message</mat-label>
<textarea <textarea
matInput matInput
@ -85,7 +89,9 @@
</mat-checkbox> </mat-checkbox>
<div class="flex items-center w-full mt-6"> <div class="flex items-center w-full mt-6">
<!-- Icon name --> <!-- Icon name -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2"> <mat-form-field
class="w-1/2 pr-2"
[subscriptSizing]="'dynamic'">
<mat-label>Icon name</mat-label> <mat-label>Icon name</mat-label>
<input <input
matInput matInput
@ -93,7 +99,9 @@
</mat-form-field> </mat-form-field>
<!-- Icon color --> <!-- Icon color -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2"> <mat-form-field
class="w-1/2 pl-2"
[subscriptSizing]="'dynamic'">
<mat-label>Icon color</mat-label> <mat-label>Icon color</mat-label>
<mat-select [formControlName]="'color'"> <mat-select [formControlName]="'color'">
<ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']"> <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
@ -123,7 +131,9 @@
</mat-checkbox> </mat-checkbox>
<div class="flex items-center w-full mt-4"> <div class="flex items-center w-full mt-4">
<!-- Confirm label --> <!-- Confirm label -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2"> <mat-form-field
class="w-1/2 pr-2"
[subscriptSizing]="'dynamic'">
<mat-label>Confirm button label</mat-label> <mat-label>Confirm button label</mat-label>
<input <input
matInput matInput
@ -131,7 +141,9 @@
</mat-form-field> </mat-form-field>
<!-- Confirm color --> <!-- Confirm color -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2"> <mat-form-field
class="w-1/2 pl-2"
[subscriptSizing]="'dynamic'">
<mat-label>Confirm button color</mat-label> <mat-label>Confirm button color</mat-label>
<mat-select [formControlName]="'color'"> <mat-select [formControlName]="'color'">
<ng-container *ngFor="let color of ['primary', 'accent', 'warn']"> <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
@ -154,7 +166,9 @@
</mat-checkbox> </mat-checkbox>
<div class="flex items-center w-full mt-4"> <div class="flex items-center w-full mt-4">
<!-- Cancel label --> <!-- Cancel label -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2"> <mat-form-field
class="w-1/2 pr-2"
[subscriptSizing]="'dynamic'">
<mat-label>Cancel button label</mat-label> <mat-label>Cancel button label</mat-label>
<input <input
matInput matInput

125
src/app/modules/admin/ui/forms/fields/fields.component.html
View File

@ -66,12 +66,12 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<textarea <textarea
matInput matInput
[rows]="3" cdkTextareaAutosize
matTextareaAutosize></textarea> [cdkAutosizeMinRows]="3"></textarea>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
matSuffix matSuffix
@ -142,8 +142,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="w-full" class="w-full">
[floatLabel]="'always'">
<mat-label>Label and Placeholder</mat-label> <mat-label>Label and Placeholder</mat-label>
<input <input
matInput matInput
@ -159,35 +158,81 @@
</mat-form-field> </mat-form-field>
</form> </form>
<div class="prose prose-sm max-w-3xl">
<h2 class="mt-12">Subscript sizing</h2>
<p>
Following form contains examples to showcase different subscript sizing methods. Focus on the inputs and then blur them
to see how the <em>mat-error</em> acts differently in different cases.
</p>
<p>
The best way of using Form Fields is to have <em>dynamic</em> subscript sizing with
fixed spacing around the fields.
</p>
</div>
<form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
<mat-form-field
class="flex-auto"
subscriptSizing="fixed">
<mat-label>Fixed subscript sizing</mat-label>
<input
matInput
[formControl]="fixedSubscriptInput"
required>
<mat-error>Required field!</mat-error>
</mat-form-field>
<mat-form-field
class="flex-auto"
subscriptSizing="fixed">
<mat-label>Fixed subscript sizing with mat-hint</mat-label>
<input
matInput
[formControl]="fixedSubscriptInputWithHint"
required>
<mat-hint>Hint text for the field</mat-hint>
<mat-error>Required field!</mat-error>
</mat-form-field>
</form>
<form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
<mat-form-field
class="flex-auto"
subscriptSizing="dynamic">
<mat-label>Dynamic subscript sizing</mat-label>
<input
matInput
[formControl]="dynamicSubscriptInput"
required>
<mat-error>Required field!</mat-error>
</mat-form-field>
<mat-form-field
class="flex-auto"
subscriptSizing="dynamic">
<mat-label>Dynamic subscript sizing with mat-hint</mat-label>
<input
matInput
[formControl]="dynamicSubscriptInputWithHint"
required>
<mat-hint>Hint text for the field</mat-hint>
<mat-error>Required field!</mat-error>
</mat-form-field>
</form>
<div class="prose prose-sm max-w-3xl"> <div class="prose prose-sm max-w-3xl">
<h2 class="mt-12">Field variations</h2> <h2 class="mt-12">Field variations</h2>
<p> <p>
Following form contains examples to showcase form field variations. In addition to the heavy modifications, Following form contains examples to showcase form field variations. In addition to the heavy modifications,
Fuse also provides set of helper classes to further modify the style of the form fields. Fuse also provides set of helper classes to further modify the style of the form fields.
</p> </p>
<h3>Required classes</h3>
<ul> <ul>
<li> <li>
<p><code>.fuse-mat-textarea</code></p> <p><code>.fuse-mat-bold</code></p>
<p> <p>
This helper class is required if you are using a textarea as your input. Since Angular Material doesn't differentiate a textarea from a Provides set of adjustments to make the fields' border bolder.
normal input while using them with <strong>mat-form-field</strong>, this helper class is required for <strong>textarea</strong> inputs to look good and
consistent.
</p> </p>
</li> </li>
</ul>
<!-- @formatter:off -->
<textarea
fuse-highlight
lang="html">
<mat-form-field class="fuse-mat-textarea">
<mat-label>Note</mat-label>
&lt;textarea matInput&gt;&lt;/textarea&gt;
</mat-form-field>
</textarea>
<!-- @formatter:on -->
<h3>Optional classes</h3>
<ul>
<li> <li>
<p><code>.fuse-mat-dense</code></p> <p><code>.fuse-mat-dense</code></p>
<p> <p>
@ -199,14 +244,6 @@
<p><code>.fuse-mat-rounded</code></p> <p><code>.fuse-mat-rounded</code></p>
<p>Provides set of adjustments to make the fields look fully rounded.</p> <p>Provides set of adjustments to make the fields look fully rounded.</p>
</li> </li>
<li>
<p><code>.fuse-mat-no-subscript</code></p>
<p>
Provides set of adjustments to remove the bottom spacing where <em>hint</em> and <em>error</em> messages placed. This helper is particularly useful to align the
field easily if you don't need to show error messages or hint text. For example a search bar in the toolbar uses this helper to fit the field to the toolbar
without having an extra bottom spacing.
</p>
</li>
<li> <li>
<p><code>.fuse-mat-emphasized-affix</code></p> <p><code>.fuse-mat-emphasized-affix</code></p>
<p> <p>
@ -223,9 +260,9 @@
<mat-button-toggle-group <mat-button-toggle-group
[(ngModel)]="formFieldHelpers" [(ngModel)]="formFieldHelpers"
multiple> multiple>
<mat-button-toggle [value]="'fuse-mat-bold'">Bold</mat-button-toggle>
<mat-button-toggle [value]="'fuse-mat-dense'">Dense</mat-button-toggle> <mat-button-toggle [value]="'fuse-mat-dense'">Dense</mat-button-toggle>
<mat-button-toggle [value]="'fuse-mat-rounded'">Rounded</mat-button-toggle> <mat-button-toggle [value]="'fuse-mat-rounded'">Rounded</mat-button-toggle>
<mat-button-toggle [value]="'fuse-mat-no-subscript'">No subscript</mat-button-toggle>
<mat-button-toggle [value]="'fuse-mat-emphasized-affix'">Emphasized affix</mat-button-toggle> <mat-button-toggle [value]="'fuse-mat-emphasized-affix'">Emphasized affix</mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
</p> </p>
@ -340,7 +377,7 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<mat-label>Textarea</mat-label> <mat-label>Textarea</mat-label>
<textarea matInput></textarea> <textarea matInput></textarea>
</mat-form-field> </mat-form-field>
@ -348,7 +385,7 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<mat-label>Textarea with prefix & suffix</mat-label> <mat-label>Textarea with prefix & suffix</mat-label>
<textarea matInput></textarea> <textarea matInput></textarea>
<mat-icon <mat-icon
@ -364,21 +401,21 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<mat-label>Textarea with autosize</mat-label> <mat-label>Textarea with autosize</mat-label>
<textarea <textarea
matInput matInput
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<mat-label>Textarea with autosize, prefix & suffix</mat-label> <mat-label>Textarea with autosize, prefix & suffix</mat-label>
<textarea <textarea
matInput matInput
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
matPrefix matPrefix
@ -611,7 +648,7 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'Textarea'"></textarea> [placeholder]="'Textarea'"></textarea>
@ -620,7 +657,7 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'Textarea with prefix & suffix'"></textarea> [placeholder]="'Textarea with prefix & suffix'"></textarea>
@ -637,21 +674,21 @@
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'Textarea with autosize'" [placeholder]="'Textarea with autosize'"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field <mat-form-field
[ngClass]="formFieldHelpers" [ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto"> class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'Textarea with autosize, prefix & suffix'" [placeholder]="'Textarea with autosize, prefix & suffix'"
matTextareaAutosize></textarea> cdkTextareaAutosize></textarea>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
matPrefix matPrefix

6
src/app/modules/admin/ui/forms/fields/fields.component.ts
View File

@ -1,5 +1,5 @@
import { Component, ViewEncapsulation } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { UntypedFormBuilder } from '@angular/forms'; import { FormControl, UntypedFormBuilder, Validators } from '@angular/forms';
@Component({ @Component({
selector : 'forms-fields', selector : 'forms-fields',
@ -9,6 +9,10 @@ import { UntypedFormBuilder } from '@angular/forms';
export class FormsFieldsComponent export class FormsFieldsComponent
{ {
formFieldHelpers: string[] = ['']; formFieldHelpers: string[] = [''];
fixedSubscriptInput: FormControl = new FormControl('', [Validators.required]);
dynamicSubscriptInput: FormControl = new FormControl('', [Validators.required]);
fixedSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);
dynamicSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);
/** /**
* Constructor * Constructor

12
src/app/modules/admin/ui/forms/layouts/layouts.component.html
View File

@ -121,7 +121,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'About'" [placeholder]="'About'"
@ -303,7 +303,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<mat-label>About</mat-label> <mat-label>About</mat-label>
<textarea <textarea
matInput matInput
@ -441,7 +441,7 @@
<input matInput> <input matInput>
<span matPrefix>www.example.com/</span> <span matPrefix>www.example.com/</span>
</mat-form-field> </mat-form-field>
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<mat-label>About</mat-label> <mat-label>About</mat-label>
<textarea <textarea
matInput matInput
@ -600,7 +600,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<textarea <textarea
matInput matInput
[placeholder]="'About'" [placeholder]="'About'"
@ -741,7 +741,7 @@
<input matInput> <input matInput>
<span matPrefix>www.example.com/</span> <span matPrefix>www.example.com/</span>
</mat-form-field> </mat-form-field>
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<mat-label>About</mat-label> <mat-label>About</mat-label>
<textarea <textarea
matInput matInput
@ -890,7 +890,7 @@
</div> </div>
<div class="flex flex-col gt-xs:flex-row gt-xs:items-baseline"> <div class="flex flex-col gt-xs:flex-row gt-xs:items-baseline">
<span class="font-semibold mb-1 gt-xs:text-right gt-xs:min-w-32 gt-xs:mr-4 gt-xs:mb-0">About</span> <span class="font-semibold mb-1 gt-xs:text-right gt-xs:min-w-32 gt-xs:mr-4 gt-xs:mb-0">About</span>
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<textarea <textarea
matInput matInput
[rows]="3"></textarea> [rows]="3"></textarea>

4
src/app/modules/admin/ui/forms/wizards/wizards.component.html
View File

@ -163,7 +163,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<textarea <textarea
matInput matInput
[formControlName]="'about'" [formControlName]="'about'"
@ -413,7 +413,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex"> <div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto"> <mat-form-field class="flex-auto">
<textarea <textarea
matInput matInput
[formControlName]="'about'" [formControlName]="'about'"

14
src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
View File

@ -393,13 +393,15 @@
Toggle determinate mode Toggle determinate mode
</mat-slide-toggle> </mat-slide-toggle>
<mat-slider [color]="'primary'"> <div>
<input
matSliderThumb
[(value)]="sliderValue"
(valueChange)="setProgress()">
Progress value Progress value
</mat-slider> <mat-slider [color]="'primary'">
<input
matSliderThumb
[(value)]="sliderValue"
(valueChange)="setProgress()">
</mat-slider>
</div>
</div> </div>
</div> </div>

2
src/app/modules/auth/forgot-password/forgot-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

2
src/app/modules/auth/reset-password/reset-password.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"

14
src/app/modules/auth/sign-in/sign-in.component.html
View File

@ -18,7 +18,16 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
[appearance]="'outline'"
[showIcon]="false"
[type]="'info'">
You are browsing <strong>Fuse Demo</strong>. Click on the "Sign in" button to access the Demo and Documentation.
</fuse-alert>
<!-- Alert -->
<fuse-alert
class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -77,8 +86,9 @@
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="inline-flex items-end justify-between w-full mt-1.5"> <div class="inline-flex items-center justify-between w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'rememberMe'"> [formControlName]="'rememberMe'">
Remember me Remember me

7
src/app/modules/auth/sign-up/sign-up.component.html
View File

@ -18,7 +18,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"
@ -100,12 +100,13 @@
<!-- ToS and PP --> <!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5"> <div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox <mat-checkbox
class="-ml-2"
[color]="'primary'" [color]="'primary'"
[formControlName]="'agreements'"> [formControlName]="'agreements'">
<span>I agree to the</span> <span>I agree with</span>
<a <a
class="ml-1 text-primary-500 hover:underline" class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service [routerLink]="['./']">Terms
</a> </a>
<span>and</span> <span>and</span>
<a <a

2
src/app/modules/auth/unlock-session/unlock-session.component.html
View File

@ -12,7 +12,7 @@
<!-- Alert --> <!-- Alert -->
<fuse-alert <fuse-alert
class="mt-8 -mb-4" class="mt-8"
*ngIf="showAlert" *ngIf="showAlert"
[appearance]="'outline'" [appearance]="'outline'"
[showIcon]="false" [showIcon]="false"