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 -->
<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
class="min-h-5 my-0 resize-none"
style="margin: 11px 0 !important; padding: 0 !important;"
[rows]="1"
matInput
cdkTextareaAutosize
#messageInput></textarea>
</mat-form-field>
<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 -->
<ng-container *ngIf="appearance === 'basic'">
<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
matPrefix
[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
[color]="'primary'"
(click)="goToPreviousStep()">
<mat-icon
class="mr-2"
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="mr-1">Prev</span>
<span class="inline-flex items-center">
<mat-icon
class="mr-2"
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="mr-1">Prev</span>
</span>
</button>
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
<span>{{currentStep + 1}}</span>
@ -155,10 +157,12 @@
mat-flat-button
[color]="'primary'"
(click)="goToNextStep()">
<span class="ml-1">Next</span>
<mat-icon
class="ml-2"
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
<span class="inline-flex items-center">
<span class="ml-1">Next</span>
<mat-icon
class="ml-2"
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
</span>
</button>
</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">
<!-- Filters -->
<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
[value]="'all'"
(selectionChange)="filterByCategory($event)">
@ -42,8 +44,8 @@
</mat-select>
</mat-form-field>
<mat-form-field
class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
[floatLabel]="'always'">
class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
[subscriptSizing]="'dynamic'">
<mat-icon
matPrefix
class="icon-size-5"

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

@ -95,8 +95,8 @@
<!-- Search -->
<div class="mt-4">
<mat-form-field
class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full"
[floatLabel]="'always'">
class="fuse-mat-rounded fuse-mat-dense w-full"
[subscriptSizing]="'dynamic'">
<mat-icon
matPrefix
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>
</button>
</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
class="min-h-5 my-0 resize-none"
style="margin: 11px 0 !important; padding: 0 !important;"
[rows]="1"
matInput
cdkTextareaAutosize
#messageInput></textarea>
</mat-form-field>
<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 -->
<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-icon
matPrefix
@ -332,7 +334,7 @@
<ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<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)"
matRipple>
<mat-checkbox
@ -341,7 +343,7 @@
[color]="'primary'"
[disableRipple]="true">
</mat-checkbox>
<div class="ml-1">{{tag.title}}</div>
<div>{{tag.title}}</div>
</div>
</ng-container>
</ng-container>
@ -350,7 +352,9 @@
<div class="py-2 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<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
matInput
[value]="tag.title"
@ -387,7 +391,9 @@
<!-- Title -->
<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-icon
matPrefix
@ -402,7 +408,9 @@
<!-- Company -->
<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-icon
matPrefix
@ -420,7 +428,9 @@
<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">
<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-icon
matPrefix
@ -432,7 +442,9 @@
[placeholder]="'Email address'"
[spellcheck]="false">
</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-icon
matPrefix
@ -477,7 +489,9 @@
<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">
<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>
<input
matInput
@ -512,7 +526,9 @@
</ng-container>
</mat-select>
</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-icon
matPrefix
@ -554,7 +570,9 @@
<!-- Address -->
<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-icon
matPrefix
@ -569,7 +587,9 @@
<!-- Birthday -->
<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-icon
matPrefix
@ -590,7 +610,9 @@
<!-- Notes -->
<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-icon
matPrefix
@ -602,7 +624,7 @@
[placeholder]="'Notes'"
[rows]="5"
[spellcheck]="false"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</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">
<!-- Search -->
<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
class="icon-size-5"
matPrefix

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

@ -13,7 +13,9 @@
<!-- Actions -->
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- 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
class="icon-size-5"
matPrefix
@ -398,7 +400,7 @@
<ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<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'"
[checked]="selectedProduct.tags.includes(tag.id)"
(change)="toggleProductTag(tag, $event)">
@ -410,7 +412,9 @@
<ng-container *ngIf="tagsEditMode">
<div class="p-4 space-y-2">
<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
matInput
[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">
Search for a topic or question, check out our FAQs and guides, contact us for detailed support
</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
matInput
[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-form-field>
<!-- Message -->
<mat-form-field class="fuse-mat-textarea w-full">
<mat-form-field class="w-full">
<textarea
matInput
[formControlName]="'message'"
[required]="true"
[rows]="5"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
<mat-label>Message</mat-label>
<mat-error *ngIf="supportForm.get('message').hasError('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"
#replyForm>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
<mat-form-field [subscriptSizing]="'dynamic'">
<textarea
class="textarea"
matInput

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

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

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

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

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

@ -82,7 +82,9 @@
(click)="drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</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
class="icon-size-5"
[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">
<div class="relative flex w-full h-full rounded-lg">
<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}"
mat-button
(click)="toggleFormVisibility()"

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

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

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

@ -19,7 +19,9 @@
[formGroup]="cardForm">
<!-- 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>
<textarea
matInput
@ -31,7 +33,9 @@
</mat-form-field>
<!-- 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>
<textarea
matInput
@ -58,7 +62,9 @@
<ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
<ng-container *ngIf="!card.dueDate">Not set</ng-container>
</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
matInput
[formControlName]="'dueDate'"
@ -107,7 +113,7 @@
<!-- Labels -->
<ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
<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'"
[checked]="hasLabel(label)"
(change)="toggleProductTag(label, $event)">

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

@ -62,13 +62,15 @@
<!-- Title -->
<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>
<textarea
matInput
[formControlName]="'title'"
[spellcheck]="false"
matTextareaAutosize
cdkTextareaAutosize
#titleField></textarea>
</mat-form-field>
</div>
@ -144,7 +146,7 @@
<ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<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)"
matRipple>
<mat-checkbox
@ -162,7 +164,9 @@
<div class="py-2 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<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
matInput
[value]="tag.title"
@ -293,7 +297,9 @@
<ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
<ng-container *ngIf="!task.dueDate">Not set</ng-container>
</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
matInput
[formControlName]="'dueDate'"
@ -321,13 +327,15 @@
<!-- Notes -->
<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>
<textarea
matInput
[formControlName]="'notes'"
[spellcheck]="false"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</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">
<mat-form-field>
<mat-label>Action</mat-label>
<span
class="flex items-center justify-center"
matPrefix>
<ng-container *ngIf="buySellSelect.value === 'buy'">
<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-icon
class="icon-size-5"
[svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
matPrefix></mat-icon>
<mat-select
[value]="'buy'"
#buySellSelect="matSelect">

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

@ -89,6 +89,7 @@
<!-- Tabs -->
<mat-tab-group
class="sm:px-2"
mat-stretch-tabs="false"
[animationDuration]="'0'">
<!-- Home -->
@ -690,7 +691,13 @@
</mat-tab>
<!-- 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>
<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">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -18,7 +18,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

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

@ -68,7 +68,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@ -127,8 +127,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

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

@ -18,7 +18,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
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>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
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>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
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 -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@ -127,8 +127,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

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

@ -18,7 +18,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@ -77,8 +77,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -538,12 +538,14 @@
alt="Card cover image">
<div class="sm:hidden">Brian Hughes</div>
</div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
<mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea
matInput
[placeholder]="'What\'s on your mind?'"
[rows]="3"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex items-center mt-6 sm:mt-8 -mx-3">
@ -551,25 +553,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
<span>Photo / Video</span>
<span class="ml-2">Photo / Video</span>
</button>
<button
class="px-3 mr-1 hidden sm:inline-flex"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<span>Tag Friends</span>
<span class="ml-2">Tag Friends</span>
</button>
<button
class="px-3 mr-1 hidden sm:inline-flex"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
<span>Feeling</span>
<span class="ml-2">Feeling</span>
</button>
<button
class="px-3"
@ -723,25 +725,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<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"
src="assets/images/avatars/brian-hughes.jpg"
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
matInput
[placeholder]="'Write a comment...'"
[rows]="3"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex items-center mt-3 ml-auto -mr-3">
@ -1070,25 +1074,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1229,25 +1233,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1383,25 +1387,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1534,25 +1538,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -1688,25 +1692,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<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">
<!-- Name -->
<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-icon
class="icon-size-5"
@ -24,7 +26,9 @@
</div>
<!-- Username -->
<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>
<div
class="text-secondary"
@ -38,7 +42,9 @@
</div>
<!-- Title -->
<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-icon
class="icon-size-5"
@ -51,7 +57,9 @@
</div>
<!-- Company -->
<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-icon
class="icon-size-5"
@ -64,7 +72,9 @@
</div>
<!-- About -->
<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>
<textarea
matInput
@ -87,7 +97,9 @@
<div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
<!-- Email -->
<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-icon
class="icon-size-5"
@ -100,7 +112,9 @@
</div>
<!-- Phone -->
<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-icon
class="icon-size-5"
@ -113,7 +127,9 @@
</div>
<!-- Country -->
<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-icon
class="icon-size-5"
@ -131,7 +147,9 @@
</div>
<!-- Language -->
<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-icon
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"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
</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="flex-auto"></div>
<div class="mt-8 text-lg">
@ -57,7 +57,9 @@
<div class="grid grid-cols-4 gap-6 w-full mt-8">
<!-- Card holder -->
<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-icon
class="icon-size-5"
@ -70,7 +72,9 @@
</div>
<!-- Card number -->
<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-icon
class="icon-size-5"
@ -84,8 +88,8 @@
<!-- Card expiration -->
<div class="col-span-2 sm:col-span-1">
<mat-form-field
class="fuse-mat-no-subscript w-full"
[floatLabel]="'always'">
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Expiration date</mat-label>
<mat-icon
class="icon-size-5"
@ -99,7 +103,9 @@
</div>
<!-- Card CVC -->
<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-icon
class="icon-size-5"
@ -112,7 +118,9 @@
</div>
<!-- Country -->
<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-icon
class="icon-size-5"
@ -130,7 +138,9 @@
</div>
<!-- ZIP -->
<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-icon
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">
<!-- Current password -->
<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-icon
class="icon-size-5"
@ -25,7 +27,9 @@
</div>
<!-- New password -->
<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-icon
class="icon-size-5"

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

@ -3,8 +3,8 @@
<!-- Add team member -->
<div class="w-full">
<mat-form-field
class="fuse-mat-no-subscript w-full"
[floatLabel]="'always'">
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Add team members</mat-label>
<mat-icon
class="icon-size-5"
@ -48,7 +48,9 @@
</div>
<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">
<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
[panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'"
[value]="member.role"

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

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

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

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

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

@ -1,24 +1,24 @@
animations {
.mat-form-field {
.mat-mdc-form-field {
width: 100%;
margin-top: 32px;
}
mat-tab-group {
.mat-mdc-tab-group {
.mat-tab-header {
.mat-mdc-tab-header {
padding: 24px 0;
border-top-width: 1px;
}
.mat-tab-body-wrapper {
.mat-mdc-tab-body-wrapper {
.mat-tab-body {
.mat-mdc-tab-body {
&:first-child {
.mat-tab-body-content {
.mat-mdc-tab-body-content {
display: flex;
justify-content: center;
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="font-medium text-secondary">USER INTERFACE (5)</span>
</div>
<div class="flex flex-col mt-2 ml-6">
<div class="flex flex-col mt-2 ml-4">
<mat-checkbox
class="my-1"
[color]="'primary'">
@ -1075,7 +1075,7 @@
<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>
</div>
<div class="flex flex-col mt-2 ml-6">
<div class="flex flex-col mt-2 ml-4">
<mat-checkbox
class="my-1"
[color]="'primary'"
@ -2169,12 +2169,14 @@
alt="Card cover image">
<div class="sm:hidden">Brian Hughes</div>
</div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
<mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<textarea
matInput
[placeholder]="'What\'s on your mind?'"
[rows]="3"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex items-center mt-6 sm:mt-8 -mx-3">
@ -2182,25 +2184,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
<span>Photo / Video</span>
<span class="ml-2">Photo / Video</span>
</button>
<button
class="px-3 mr-1 hidden sm:inline-flex"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<span>Tag Friends</span>
<span class="ml-2">Tag Friends</span>
</button>
<button
class="px-3 mr-1 hidden sm:inline-flex"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
<span>Feeling</span>
<span class="ml-2">Feeling</span>
</button>
<button
class="px-3"
@ -2355,25 +2357,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<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"
src="assets/images/avatars/brian-hughes.jpg"
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
matInput
[rows]="3"
[placeholder]="'Write a comment...'"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex items-center mt-3 ml-auto -mr-3">
@ -2709,25 +2713,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -2869,25 +2873,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3037,25 +3041,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3211,25 +3215,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3389,25 +3393,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3535,25 +3539,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3690,25 +3694,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@ -3845,25 +3849,25 @@
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 text-red-500 mr-2"
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span>Unlike</span>
<span class="ml-2">Unlike</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
<span>Comment</span>
<span class="ml-2">Comment</span>
</button>
<button
class="px-3 mr-1"
mat-button>
<mat-icon
class="icon-size-5 mr-2"
class="icon-size-5"
[svgIcon]="'heroicons_solid:share'"></mat-icon>
<span>Share</span>
<span class="ml-2">Share</span>
</button>
</div>
<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"
src="assets/images/avatars/brian-hughes.jpg"
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
class="leading-normal my-2"
matInput
[placeholder]="'Write a comment...'"
matTextareaAutosize
cdkTextareaAutosize
[rows]="3"></textarea>
</mat-form-field>
</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">
<!-- Title -->
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-form-field
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-label>Title</mat-label>
<input
matInput
@ -63,7 +65,9 @@
</mat-form-field>
<!-- 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>
<textarea
matInput
@ -85,7 +89,9 @@
</mat-checkbox>
<div class="flex items-center w-full mt-6">
<!-- 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>
<input
matInput
@ -93,7 +99,9 @@
</mat-form-field>
<!-- 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-select [formControlName]="'color'">
<ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
@ -123,7 +131,9 @@
</mat-checkbox>
<div class="flex items-center w-full mt-4">
<!-- 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>
<input
matInput
@ -131,7 +141,9 @@
</mat-form-field>
<!-- 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-select [formControlName]="'color'">
<ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
@ -154,7 +166,9 @@
</mat-checkbox>
<div class="flex items-center w-full mt-4">
<!-- 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>
<input
matInput

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

@ -66,12 +66,12 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<mat-label>Address</mat-label>
<textarea
matInput
[rows]="3"
matTextareaAutosize></textarea>
cdkTextareaAutosize
[cdkAutosizeMinRows]="3"></textarea>
<mat-icon
class="icon-size-5"
matSuffix
@ -142,8 +142,7 @@
</mat-form-field>
<mat-form-field
[ngClass]="formFieldHelpers"
class="w-full"
[floatLabel]="'always'">
class="w-full">
<mat-label>Label and Placeholder</mat-label>
<input
matInput
@ -159,35 +158,81 @@
</mat-form-field>
</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">
<h2 class="mt-12">Field variations</h2>
<p>
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.
</p>
<h3>Required classes</h3>
<ul>
<li>
<p><code>.fuse-mat-textarea</code></p>
<p><code>.fuse-mat-bold</code></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
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.
Provides set of adjustments to make the fields' border bolder.
</p>
</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>
<p><code>.fuse-mat-dense</code></p>
<p>
@ -199,14 +244,6 @@
<p><code>.fuse-mat-rounded</code></p>
<p>Provides set of adjustments to make the fields look fully rounded.</p>
</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>
<p><code>.fuse-mat-emphasized-affix</code></p>
<p>
@ -223,9 +260,9 @@
<mat-button-toggle-group
[(ngModel)]="formFieldHelpers"
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-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-group>
</p>
@ -340,7 +377,7 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<mat-label>Textarea</mat-label>
<textarea matInput></textarea>
</mat-form-field>
@ -348,7 +385,7 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<mat-label>Textarea with prefix & suffix</mat-label>
<textarea matInput></textarea>
<mat-icon
@ -364,21 +401,21 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<mat-label>Textarea with autosize</mat-label>
<textarea
matInput
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<mat-label>Textarea with autosize, prefix & suffix</mat-label>
<textarea
matInput
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
<mat-icon
class="icon-size-5"
matPrefix
@ -611,7 +648,7 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<textarea
matInput
[placeholder]="'Textarea'"></textarea>
@ -620,7 +657,7 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<textarea
matInput
[placeholder]="'Textarea with prefix & suffix'"></textarea>
@ -637,21 +674,21 @@
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<textarea
matInput
[placeholder]="'Textarea with autosize'"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="flex">
<mat-form-field
[ngClass]="formFieldHelpers"
class="fuse-mat-textarea flex-auto">
class="flex-auto">
<textarea
matInput
[placeholder]="'Textarea with autosize, prefix & suffix'"
matTextareaAutosize></textarea>
cdkTextareaAutosize></textarea>
<mat-icon
class="icon-size-5"
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 { UntypedFormBuilder } from '@angular/forms';
import { FormControl, UntypedFormBuilder, Validators } from '@angular/forms';
@Component({
selector : 'forms-fields',
@ -9,6 +9,10 @@ import { UntypedFormBuilder } from '@angular/forms';
export class FormsFieldsComponent
{
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

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

@ -121,7 +121,7 @@
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<textarea
matInput
[placeholder]="'About'"
@ -303,7 +303,7 @@
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<mat-label>About</mat-label>
<textarea
matInput
@ -441,7 +441,7 @@
<input matInput>
<span matPrefix>www.example.com/</span>
</mat-form-field>
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<mat-label>About</mat-label>
<textarea
matInput
@ -600,7 +600,7 @@
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<textarea
matInput
[placeholder]="'About'"
@ -741,7 +741,7 @@
<input matInput>
<span matPrefix>www.example.com/</span>
</mat-form-field>
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<mat-label>About</mat-label>
<textarea
matInput
@ -890,7 +890,7 @@
</div>
<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>
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<textarea
matInput
[rows]="3"></textarea>

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

@ -163,7 +163,7 @@
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<textarea
matInput
[formControlName]="'about'"
@ -413,7 +413,7 @@
</mat-form-field>
</div>
<div class="flex">
<mat-form-field class="fuse-mat-textarea flex-auto">
<mat-form-field class="flex-auto">
<textarea
matInput
[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
</mat-slide-toggle>
<mat-slider [color]="'primary'">
<input
matSliderThumb
[(value)]="sliderValue"
(valueChange)="setProgress()">
<div>
Progress value
</mat-slider>
<mat-slider [color]="'primary'">
<input
matSliderThumb
[(value)]="sliderValue"
(valueChange)="setProgress()">
</mat-slider>
</div>
</div>
</div>

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

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

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

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

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

@ -18,7 +18,16 @@
<!-- 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"
[appearance]="'outline'"
[showIcon]="false"
@ -77,8 +86,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

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

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

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

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