mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
Updated the application to reflect the changes
This commit is contained in:
parent
8000e53bae
commit
08266c3e51
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -140,10 +140,12 @@
|
|||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToPreviousStep()">
|
||||
<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="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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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'">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
[placeholder]="'Note'"
|
||||
[(ngModel)]="note.content"
|
||||
(input)="updateNoteDetails(note)"
|
||||
matTextareaAutosize></textarea>
|
||||
cdkTextareaAutosize></textarea>
|
||||
</div>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="note.tasks">
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -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()"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)">
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
[svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
|
||||
matPrefix></mat-icon>
|
||||
<mat-select
|
||||
[value]="'buy'"
|
||||
#buySellSelect="matSelect">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
<textarea matInput></textarea>
|
||||
</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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -393,13 +393,15 @@
|
|||
Toggle determinate mode
|
||||
</mat-slide-toggle>
|
||||
|
||||
<div>
|
||||
Progress value
|
||||
<mat-slider [color]="'primary'">
|
||||
<input
|
||||
matSliderThumb
|
||||
[(value)]="sliderValue"
|
||||
(valueChange)="setProgress()">
|
||||
Progress value
|
||||
</mat-slider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mt-8 -mb-4"
|
||||
class="mt-8"
|
||||
*ngIf="showAlert"
|
||||
[appearance]="'outline'"
|
||||
[showIcon]="false"
|
||||
|
|
Loading…
Reference in New Issue
Block a user