barhen
3 years ago
345 changed files with 9025 additions and 55115 deletions
File diff suppressed because it is too large
@ -1 +0,0 @@ |
|||||
export * from '@fuse/animations/public-api'; |
|
||||
@ -1,82 +0,0 @@ |
|||||
<div |
|
||||
class="fuse-alert-container" |
|
||||
*ngIf="!dismissible || dismissible && !dismissed" |
|
||||
[@fadeIn]="!dismissed" |
|
||||
[@fadeOut]="!dismissed"> |
|
||||
|
|
||||
<!-- Border --> |
|
||||
<div |
|
||||
class="fuse-alert-border" |
|
||||
*ngIf="appearance === 'border'"></div> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<div |
|
||||
class="fuse-alert-icon" |
|
||||
*ngIf="showIcon"> |
|
||||
|
|
||||
<!-- Custom icon --> |
|
||||
<div class="fuse-alert-custom-icon"> |
|
||||
<ng-content select="[fuseAlertIcon]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Default icons --> |
|
||||
<div class="fuse-alert-default-icon"> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'primary'" |
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'accent'" |
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'warn'" |
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'basic'" |
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'info'" |
|
||||
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'success'" |
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'warning'" |
|
||||
[svgIcon]="'heroicons_solid:exclamation'"></mat-icon> |
|
||||
|
|
||||
<mat-icon |
|
||||
*ngIf="type === 'error'" |
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Content --> |
|
||||
<div class="fuse-alert-content"> |
|
||||
|
|
||||
<div class="fuse-alert-title"> |
|
||||
<ng-content select="[fuseAlertTitle]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
<div class="fuse-alert-message"> |
|
||||
<ng-content></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Dismiss button --> |
|
||||
<button |
|
||||
class="fuse-alert-dismiss-button" |
|
||||
mat-icon-button |
|
||||
(click)="dismiss()"> |
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon> |
|
||||
</button> |
|
||||
|
|
||||
</div> |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/alert/public-api'; |
|
||||
@ -1,4 +0,0 @@ |
|||||
export * from '@fuse/components/alert/alert.component'; |
|
||||
export * from '@fuse/components/alert/alert.module'; |
|
||||
export * from '@fuse/components/alert/alert.service'; |
|
||||
export * from '@fuse/components/alert/alert.types'; |
|
||||
@ -1,30 +0,0 @@ |
|||||
<!-- Flippable card --> |
|
||||
<ng-container *ngIf="flippable"> |
|
||||
|
|
||||
<!-- Front --> |
|
||||
<div class="fuse-card-front"> |
|
||||
<ng-content select="[fuseCardFront]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Back --> |
|
||||
<div class="fuse-card-back"> |
|
||||
<ng-content select="[fuseCardBack]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Normal card --> |
|
||||
<ng-container *ngIf="!flippable"> |
|
||||
|
|
||||
<!-- Content --> |
|
||||
<ng-content></ng-content> |
|
||||
|
|
||||
<!-- Expansion --> |
|
||||
<div |
|
||||
class="fuse-card-expansion" |
|
||||
*ngIf="expanded" |
|
||||
[@expandCollapse]> |
|
||||
<ng-content select="[fuseCardExpansion]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
</ng-container> |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/card/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/components/card/card.component'; |
|
||||
export * from '@fuse/components/card/card.module'; |
|
||||
@ -1,101 +0,0 @@ |
|||||
<div |
|
||||
class="range" |
|
||||
(click)="openPickerPanel()" |
|
||||
#pickerPanelOrigin> |
|
||||
|
|
||||
<div class="start"> |
|
||||
<div class="date">{{range.startDate}}</div> |
|
||||
<div |
|
||||
class="time" |
|
||||
*ngIf="range.startTime">{{range.startTime}}</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="separator">-</div> |
|
||||
|
|
||||
<div class="end"> |
|
||||
<div class="date">{{range.endDate}}</div> |
|
||||
<div |
|
||||
class="time" |
|
||||
*ngIf="range.endTime">{{range.endTime}}</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<ng-template #pickerPanel> |
|
||||
|
|
||||
<!-- Start --> |
|
||||
<div class="start"> |
|
||||
|
|
||||
<div class="month"> |
|
||||
<div class="month-header"> |
|
||||
<button |
|
||||
class="previous-button" |
|
||||
mat-icon-button |
|
||||
(click)="prev()" |
|
||||
tabindex="1"> |
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon> |
|
||||
</button> |
|
||||
<div class="month-label">{{getMonthLabel(1)}}</div> |
|
||||
</div> |
|
||||
<mat-month-view |
|
||||
[(activeDate)]="activeDates.month1" |
|
||||
[dateFilter]="dateFilter()" |
|
||||
[dateClass]="dateClass()" |
|
||||
(click)="$event.stopImmediatePropagation()" |
|
||||
(selectedChange)="onSelectedDateChange($event)" |
|
||||
#matMonthView1> |
|
||||
</mat-month-view> |
|
||||
</div> |
|
||||
|
|
||||
<mat-form-field |
|
||||
class="fuse-mat-no-subscript time start-time" |
|
||||
*ngIf="timeRange"> |
|
||||
<input |
|
||||
matInput |
|
||||
[autocomplete]="'off'" |
|
||||
[formControl]="startTimeFormControl" |
|
||||
(blur)="updateStartTime($event)" |
|
||||
tabindex="3"> |
|
||||
<mat-label>Start time</mat-label> |
|
||||
</mat-form-field> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- End --> |
|
||||
<div class="end"> |
|
||||
|
|
||||
<div class="month"> |
|
||||
<div class="month-header"> |
|
||||
<div class="month-label">{{getMonthLabel(2)}}</div> |
|
||||
<button |
|
||||
class="next-button" |
|
||||
mat-icon-button |
|
||||
(click)="next()" |
|
||||
tabindex="2"> |
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon> |
|
||||
</button> |
|
||||
</div> |
|
||||
<mat-month-view |
|
||||
[(activeDate)]="activeDates.month2" |
|
||||
[dateFilter]="dateFilter()" |
|
||||
[dateClass]="dateClass()" |
|
||||
(click)="$event.stopImmediatePropagation()" |
|
||||
(selectedChange)="onSelectedDateChange($event)" |
|
||||
#matMonthView2> |
|
||||
</mat-month-view> |
|
||||
</div> |
|
||||
|
|
||||
<mat-form-field |
|
||||
class="fuse-mat-no-subscript time end-time" |
|
||||
*ngIf="timeRange"> |
|
||||
<input |
|
||||
matInput |
|
||||
[formControl]="endTimeFormControl" |
|
||||
(blur)="updateEndTime($event)" |
|
||||
tabindex="4"> |
|
||||
<mat-label>End time</mat-label> |
|
||||
</mat-form-field> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</ng-template> |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/date-range/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/components/date-range/date-range.component'; |
|
||||
export * from '@fuse/components/date-range/date-range.module'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
<div class="fuse-drawer-content"> |
|
||||
<ng-content></ng-content> |
|
||||
</div> |
|
||||
@ -1,7 +0,0 @@ |
|||||
export type FuseDrawerMode = |
|
||||
| 'over' |
|
||||
| 'side'; |
|
||||
|
|
||||
export type FuseDrawerPosition = |
|
||||
| 'left' |
|
||||
| 'right'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/drawer/public-api'; |
|
||||
@ -1,4 +0,0 @@ |
|||||
export * from '@fuse/components/drawer/drawer.component'; |
|
||||
export * from '@fuse/components/drawer/drawer.module'; |
|
||||
export * from '@fuse/components/drawer/drawer.service'; |
|
||||
export * from '@fuse/components/drawer/drawer.types'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/fullscreen/public-api'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export * from '@fuse/components/fullscreen/fullscreen.component'; |
|
||||
export * from '@fuse/components/fullscreen/fullscreen.module'; |
|
||||
export * from '@fuse/components/fullscreen/fullscreen.types'; |
|
||||
@ -1,9 +0,0 @@ |
|||||
<ng-content></ng-content> |
|
||||
|
|
||||
<!-- @formatter:off --> |
|
||||
<ng-template let-highlightedCode="highlightedCode" let-lang="lang"> |
|
||||
<div class="fuse-highlight fuse-highlight-code-container"> |
|
||||
<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
<!-- @formatter:on --> |
|
||||
@ -1,3 +0,0 @@ |
|||||
textarea[fuse-highlight] { |
|
||||
display: none; |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/highlight/public-api'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export * from '@fuse/components/highlight/highlight.component'; |
|
||||
export * from '@fuse/components/highlight/highlight.module'; |
|
||||
export * from '@fuse/components/highlight/highlight.service'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/masonry/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/components/masonry/masonry.component'; |
|
||||
export * from '@fuse/components/masonry/masonry.module'; |
|
||||
@ -1,126 +0,0 @@ |
|||||
<!-- Item wrapper --> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-wrapper" |
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<!-- Item with an internal link --> |
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" |
|
||||
[routerLink]="[item.link]" |
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" |
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an external link --> |
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[href]="item.link" |
|
||||
[target]="item.target || '_self'" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with a function --> |
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an internal link and function --> |
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" |
|
||||
[routerLink]="[item.link]" |
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" |
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an external link and function --> |
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[href]="item.link" |
|
||||
[target]="item.target || '_self'" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)" |
|
||||
mat-menu-item> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with a no link and no function --> |
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item is disabled --> |
|
||||
<ng-container *ngIf="item.disabled"> |
|
||||
<div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Item template --> |
|
||||
<ng-template #itemTemplate> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-horizontal-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-horizontal-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-horizontal-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-template> |
|
||||
@ -1,121 +0,0 @@ |
|||||
<ng-container *ngIf="!child"> |
|
||||
<div |
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen, |
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active}" |
|
||||
[matMenuTriggerFor]="matMenu" |
|
||||
(onMenuOpen)="triggerChangeDetection()" |
|
||||
(onMenuClose)="triggerChangeDetection()" |
|
||||
#trigger="matMenuTrigger"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<mat-menu |
|
||||
class="fuse-horizontal-navigation-menu-panel" |
|
||||
[overlapTrigger]="false" |
|
||||
#matMenu="matMenu"> |
|
||||
|
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
[disabled]="item.disabled" |
|
||||
mat-menu-item> |
|
||||
<fuse-horizontal-navigation-basic-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Branch: aside, collapsable, group --> |
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
[disabled]="item.disabled" |
|
||||
[matMenuTriggerFor]="branch.matMenu" |
|
||||
mat-menu-item> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> |
|
||||
<fuse-horizontal-navigation-branch-item |
|
||||
[child]="true" |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
#branch></fuse-horizontal-navigation-branch-item> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Divider --> |
|
||||
<ng-container *ngIf="item.type === 'divider'"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
mat-menu-item> |
|
||||
<fuse-horizontal-navigation-divider-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</mat-menu> |
|
||||
|
|
||||
<!-- Item template --> |
|
||||
<ng-template |
|
||||
let-item |
|
||||
#itemTemplate> |
|
||||
|
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-wrapper" |
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item" |
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled, |
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-horizontal-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-horizontal-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-horizontal-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</ng-template> |
|
||||
@ -1,4 +0,0 @@ |
|||||
<!-- Divider --> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-wrapper divider" |
|
||||
[ngClass]="item.classes?.wrapper"></div> |
|
||||
@ -1,4 +0,0 @@ |
|||||
<!-- Spacer --> |
|
||||
<div |
|
||||
class="fuse-horizontal-navigation-item-wrapper" |
|
||||
[ngClass]="item.classes?.wrapper"></div> |
|
||||
@ -1,36 +0,0 @@ |
|||||
<div class="fuse-horizontal-navigation-wrapper"> |
|
||||
|
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<fuse-horizontal-navigation-basic-item |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Branch: aside, collapsable, group --> |
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"> |
|
||||
<fuse-horizontal-navigation-branch-item |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Spacer --> |
|
||||
<ng-container *ngIf="item.type === 'spacer'"> |
|
||||
<fuse-horizontal-navigation-spacer-item |
|
||||
class="fuse-horizontal-navigation-menu-item" |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/components/navigation/public-api'; |
|
||||
@ -1,55 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { CommonModule } from '@angular/common'; |
|
||||
import { RouterModule } from '@angular/router'; |
|
||||
import { MatButtonModule } from '@angular/material/button'; |
|
||||
import { MatDividerModule } from '@angular/material/divider'; |
|
||||
import { MatIconModule } from '@angular/material/icon'; |
|
||||
import { MatMenuModule } from '@angular/material/menu'; |
|
||||
import { MatTooltipModule } from '@angular/material/tooltip'; |
|
||||
import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api'; |
|
||||
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component'; |
|
||||
import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component'; |
|
||||
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component'; |
|
||||
import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component'; |
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; |
|
||||
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component'; |
|
||||
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component'; |
|
||||
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component'; |
|
||||
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component'; |
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component'; |
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; |
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
declarations: [ |
|
||||
FuseHorizontalNavigationBasicItemComponent, |
|
||||
FuseHorizontalNavigationBranchItemComponent, |
|
||||
FuseHorizontalNavigationDividerItemComponent, |
|
||||
FuseHorizontalNavigationSpacerItemComponent, |
|
||||
FuseHorizontalNavigationComponent, |
|
||||
FuseVerticalNavigationAsideItemComponent, |
|
||||
FuseVerticalNavigationBasicItemComponent, |
|
||||
FuseVerticalNavigationCollapsableItemComponent, |
|
||||
FuseVerticalNavigationDividerItemComponent, |
|
||||
FuseVerticalNavigationGroupItemComponent, |
|
||||
FuseVerticalNavigationSpacerItemComponent, |
|
||||
FuseVerticalNavigationComponent |
|
||||
], |
|
||||
imports : [ |
|
||||
CommonModule, |
|
||||
RouterModule, |
|
||||
MatButtonModule, |
|
||||
MatDividerModule, |
|
||||
MatIconModule, |
|
||||
MatMenuModule, |
|
||||
MatTooltipModule, |
|
||||
FuseScrollbarModule |
|
||||
], |
|
||||
exports : [ |
|
||||
FuseHorizontalNavigationComponent, |
|
||||
FuseVerticalNavigationComponent |
|
||||
] |
|
||||
}) |
|
||||
export class FuseNavigationModule |
|
||||
{ |
|
||||
} |
|
||||
@ -1,5 +0,0 @@ |
|||||
export * from '@fuse/components/navigation/horizontal/horizontal.component'; |
|
||||
export * from '@fuse/components/navigation/vertical/vertical.component'; |
|
||||
export * from '@fuse/components/navigation/navigation.module'; |
|
||||
export * from '@fuse/components/navigation/navigation.service'; |
|
||||
export * from '@fuse/components/navigation/navigation.types'; |
|
||||
@ -1,103 +0,0 @@ |
|||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper" |
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active': active, |
|
||||
'fuse-vertical-navigation-item-disabled': item.disabled, |
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-vertical-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-vertical-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-vertical-navigation-item-subtitle"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-vertical-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<ng-container *ngIf="!skipChildren"> |
|
||||
|
|
||||
<div class="fuse-vertical-navigation-item-children"> |
|
||||
|
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<fuse-vertical-navigation-basic-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-basic-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Collapsable --> |
|
||||
<ng-container *ngIf="item.type === 'collapsable'"> |
|
||||
<fuse-vertical-navigation-collapsable-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Divider --> |
|
||||
<ng-container *ngIf="item.type === 'divider'"> |
|
||||
<fuse-vertical-navigation-divider-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-divider-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Group --> |
|
||||
<ng-container *ngIf="item.type === 'group'"> |
|
||||
<fuse-vertical-navigation-group-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-group-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Spacer --> |
|
||||
<ng-container *ngIf="item.type === 'spacer'"> |
|
||||
<fuse-vertical-navigation-spacer-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</ng-container> |
|
||||
@ -1,127 +0,0 @@ |
|||||
<!-- Item wrapper --> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper" |
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<!-- Item with an internal link --> |
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" |
|
||||
[routerLink]="[item.link]" |
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'" |
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an external link --> |
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[href]="item.link" |
|
||||
[target]="item.target || '_self'" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with a function --> |
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an internal link and function --> |
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" |
|
||||
[routerLink]="[item.link]" |
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'" |
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with an external link and function --> |
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled"> |
|
||||
<a |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[href]="item.link" |
|
||||
[target]="item.target || '_self'" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="item.function(item)"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</a> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item with a no link and no function --> |
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Item is disabled --> |
|
||||
<ng-container *ngIf="item.disabled"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled" |
|
||||
[matTooltip]="item.tooltip || ''"> |
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Item template --> |
|
||||
<ng-template #itemTemplate> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-vertical-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-vertical-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-vertical-navigation-item-subtitle"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-vertical-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-template> |
|
||||
@ -1,106 +0,0 @@ |
|||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper" |
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item" |
|
||||
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}" |
|
||||
[matTooltip]="item.tooltip || ''" |
|
||||
(click)="toggleCollapsable()"> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-vertical-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-vertical-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-vertical-navigation-item-subtitle"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-vertical-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Arrow --> |
|
||||
<mat-icon |
|
||||
class="fuse-vertical-navigation-item-arrow icon-size-4" |
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-children" |
|
||||
*ngIf="!isCollapsed" |
|
||||
@expandCollapse> |
|
||||
|
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<fuse-vertical-navigation-basic-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-basic-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Collapsable --> |
|
||||
<ng-container *ngIf="item.type === 'collapsable'"> |
|
||||
<fuse-vertical-navigation-collapsable-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Divider --> |
|
||||
<ng-container *ngIf="item.type === 'divider'"> |
|
||||
<fuse-vertical-navigation-divider-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-divider-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Group --> |
|
||||
<ng-container *ngIf="item.type === 'group'"> |
|
||||
<fuse-vertical-navigation-group-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-group-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Spacer --> |
|
||||
<ng-container *ngIf="item.type === 'spacer'"> |
|
||||
<fuse-vertical-navigation-spacer-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
@ -1,4 +0,0 @@ |
|||||
<!-- Divider --> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper divider" |
|
||||
[ngClass]="item.classes?.wrapper"></div> |
|
||||
@ -1,91 +0,0 @@ |
|||||
<!-- Item wrapper --> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper" |
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
|
||||
[ngClass]="item.classes?.wrapper"> |
|
||||
|
|
||||
<div class="fuse-vertical-navigation-item"> |
|
||||
|
|
||||
<!-- Icon --> |
|
||||
<ng-container *ngIf="item.icon"> |
|
||||
<mat-icon |
|
||||
class="fuse-vertical-navigation-item-icon" |
|
||||
[ngClass]="item.classes?.icon" |
|
||||
[svgIcon]="item.icon"></mat-icon> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Title & Subtitle --> |
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper"> |
|
||||
<div class="fuse-vertical-navigation-item-title"> |
|
||||
<span [ngClass]="item.classes?.title"> |
|
||||
{{item.title}} |
|
||||
</span> |
|
||||
</div> |
|
||||
<ng-container *ngIf="item.subtitle"> |
|
||||
<div class="fuse-vertical-navigation-item-subtitle"> |
|
||||
<span [ngClass]="item.classes?.subtitle"> |
|
||||
{{item.subtitle}} |
|
||||
</span> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Badge --> |
|
||||
<ng-container *ngIf="item.badge"> |
|
||||
<div class="fuse-vertical-navigation-item-badge"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-badge-content" |
|
||||
[ngClass]="item.badge.classes"> |
|
||||
{{item.badge.title}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<fuse-vertical-navigation-basic-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-basic-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Collapsable --> |
|
||||
<ng-container *ngIf="item.type === 'collapsable'"> |
|
||||
<fuse-vertical-navigation-collapsable-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Divider --> |
|
||||
<ng-container *ngIf="item.type === 'divider'"> |
|
||||
<fuse-vertical-navigation-divider-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-divider-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Group --> |
|
||||
<ng-container *ngIf="item.type === 'group'"> |
|
||||
<fuse-vertical-navigation-group-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-group-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Spacer --> |
|
||||
<ng-container *ngIf="item.type === 'spacer'"> |
|
||||
<fuse-vertical-navigation-spacer-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
@ -1,4 +0,0 @@ |
|||||
<!-- Spacer --> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-item-wrapper" |
|
||||
[ngClass]="item.classes?.wrapper"></div> |
|
||||
@ -1,110 +0,0 @@ |
|||||
/* Variables */ |
|
||||
$fuse-vertical-navigation-compact-width: 112; |
|
||||
|
|
||||
fuse-vertical-navigation { |
|
||||
|
|
||||
/* Compact appearance overrides */ |
|
||||
&.fuse-vertical-navigation-appearance-compact { |
|
||||
width: #{$fuse-vertical-navigation-compact-width}px; |
|
||||
min-width: #{$fuse-vertical-navigation-compact-width}px; |
|
||||
max-width: #{$fuse-vertical-navigation-compact-width}px; |
|
||||
|
|
||||
/* Left positioned */ |
|
||||
&.fuse-vertical-navigation-position-left { |
|
||||
|
|
||||
/* Side mode */ |
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-left: -#{$fuse-vertical-navigation-compact-width}px; |
|
||||
} |
|
||||
|
|
||||
/* Opened */ |
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Right positioned */ |
|
||||
&.fuse-vertical-navigation-position-right { |
|
||||
|
|
||||
/* Side mode */ |
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-right: -#{$fuse-vertical-navigation-compact-width}px; |
|
||||
} |
|
||||
|
|
||||
/* Opened */ |
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
/* Aside wrapper */ |
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: auto; |
|
||||
right: #{$fuse-vertical-navigation-compact-width}px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Wrapper */ |
|
||||
.fuse-vertical-navigation-wrapper { |
|
||||
|
|
||||
/* Content */ |
|
||||
.fuse-vertical-navigation-content { |
|
||||
|
|
||||
> fuse-vertical-navigation-aside-item, |
|
||||
> fuse-vertical-navigation-basic-item { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-wrapper { |
|
||||
margin: 4px 8px 0 8px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
padding: 12px; |
|
||||
border-radius: 6px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-icon { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-item-title-wrapper { |
|
||||
margin-top: 8px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-title { |
|
||||
font-size: 12px; |
|
||||
font-weight: 500; |
|
||||
text-align: center; |
|
||||
line-height: 16px; |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-item-subtitle { |
|
||||
display: none !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-item-badge { |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
left: 64px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
> fuse-vertical-navigation-collapsable-item { |
|
||||
display: none |
|
||||
} |
|
||||
|
|
||||
> fuse-vertical-navigation-group-item { |
|
||||
|
|
||||
> .fuse-vertical-navigation-item-wrapper { |
|
||||
display: none |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Aside wrapper */ |
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: #{$fuse-vertical-navigation-compact-width}px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,189 +0,0 @@ |
|||||
/* Variables */ |
|
||||
$fuse-vertical-navigation-width: 280; |
|
||||
$fuse-vertical-navigation-dense-width: 80; |
|
||||
|
|
||||
fuse-vertical-navigation { |
|
||||
|
|
||||
/* Dense appearance overrides */ |
|
||||
&.fuse-vertical-navigation-appearance-dense { |
|
||||
|
|
||||
&:not(.fuse-vertical-navigation-mode-over) { |
|
||||
width: #{$fuse-vertical-navigation-dense-width}px; |
|
||||
min-width: #{$fuse-vertical-navigation-dense-width}px; |
|
||||
max-width: #{$fuse-vertical-navigation-dense-width}px; |
|
||||
|
|
||||
/* Left positioned */ |
|
||||
&.fuse-vertical-navigation-position-left { |
|
||||
|
|
||||
/* Side mode */ |
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-left: -#{$fuse-vertical-navigation-dense-width}px; |
|
||||
} |
|
||||
|
|
||||
/* Opened */ |
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Right positioned */ |
|
||||
&.fuse-vertical-navigation-position-right { |
|
||||
|
|
||||
/* Side mode */ |
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-right: -#{$fuse-vertical-navigation-dense-width}px; |
|
||||
} |
|
||||
|
|
||||
/* Opened */ |
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
/* Aside wrapper */ |
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: auto; |
|
||||
right: #{$fuse-vertical-navigation-dense-width}px; |
|
||||
} |
|
||||
|
|
||||
&.fuse-vertical-navigation-hover { |
|
||||
|
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: auto; |
|
||||
right: #{$fuse-vertical-navigation-width}px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Wrapper */ |
|
||||
.fuse-vertical-navigation-wrapper { |
|
||||
|
|
||||
/* Content */ |
|
||||
.fuse-vertical-navigation-content { |
|
||||
|
|
||||
fuse-vertical-navigation-aside-item, |
|
||||
fuse-vertical-navigation-basic-item, |
|
||||
fuse-vertical-navigation-collapsable-item, |
|
||||
fuse-vertical-navigation-group-item { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-wrapper { |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
width: #{$fuse-vertical-navigation-width}px - 24px; |
|
||||
min-width: #{$fuse-vertical-navigation-width}px - 24px; |
|
||||
max-width: #{$fuse-vertical-navigation-width}px - 24px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-arrow, |
|
||||
.fuse-vertical-navigation-item-badge, |
|
||||
.fuse-vertical-navigation-item-title-wrapper { |
|
||||
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
fuse-vertical-navigation-group-item { |
|
||||
|
|
||||
&:first-of-type { |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) { |
|
||||
|
|
||||
/* Wrapper */ |
|
||||
.fuse-vertical-navigation-wrapper { |
|
||||
|
|
||||
/* Content */ |
|
||||
.fuse-vertical-navigation-content { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-wrapper { |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
padding: 10px 16px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-arrow, |
|
||||
.fuse-vertical-navigation-item-badge, |
|
||||
.fuse-vertical-navigation-item-title-wrapper { |
|
||||
white-space: nowrap; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
fuse-vertical-navigation-collapsable-item { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-children { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
fuse-vertical-navigation-group-item { |
|
||||
|
|
||||
> .fuse-vertical-navigation-item-wrapper { |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
|
|
||||
&:before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 20px; |
|
||||
width: 23px; |
|
||||
border-top-width: 2px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Aside wrapper */ |
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: #{$fuse-vertical-navigation-dense-width}px; |
|
||||
} |
|
||||
|
|
||||
/* Hover */ |
|
||||
&.fuse-vertical-navigation-hover { |
|
||||
|
|
||||
.fuse-vertical-navigation-wrapper { |
|
||||
width: #{$fuse-vertical-navigation-width}px; |
|
||||
|
|
||||
.fuse-vertical-navigation-content { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-wrapper { |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
|
|
||||
.fuse-vertical-navigation-item-arrow, |
|
||||
.fuse-vertical-navigation-item-badge, |
|
||||
.fuse-vertical-navigation-item-title-wrapper { |
|
||||
white-space: nowrap; |
|
||||
animation: removeWhiteSpaceNoWrap 1ms linear 350ms; |
|
||||
animation-fill-mode: forwards; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: #{$fuse-vertical-navigation-width}px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes removeWhiteSpaceNoWrap { |
|
||||
0% { |
|
||||
white-space: nowrap |
|
||||
} |
|
||||
99% { |
|
||||
white-space: nowrap |
|
||||
} |
|
||||
100% { |
|
||||
white-space: normal; |
|
||||
} |
|
||||
} |
|
||||
@ -1,97 +0,0 @@ |
|||||
/* Variables */ |
|
||||
$fuse-vertical-navigation-thin-width: 80; |
|
||||
|
|
||||
fuse-vertical-navigation { |
|
||||
|
|
||||
/* Thin appearance overrides */ |
|
||||
&.fuse-vertical-navigation-appearance-thin { |
|
||||
width: #{$fuse-vertical-navigation-thin-width}px; |
|
||||
min-width: #{$fuse-vertical-navigation-thin-width}px; |
|
||||
max-width: #{$fuse-vertical-navigation-thin-width}px; |
|
||||
|
|
||||
/* Left positioned */ |
|
||||
&.fuse-vertical-navigation-position-left { |
|
||||
|
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-left: -#{$fuse-vertical-navigation-thin-width}px; |
|
||||
} |
|
||||
|
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Right positioned */ |
|
||||
&.fuse-vertical-navigation-position-right { |
|
||||
|
|
||||
&.fuse-vertical-navigation-mode-side { |
|
||||
margin-right: -#{$fuse-vertical-navigation-thin-width}px; |
|
||||
} |
|
||||
|
|
||||
&.fuse-vertical-navigation-opened { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: auto; |
|
||||
right: #{$fuse-vertical-navigation-thin-width}px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Wrapper */ |
|
||||
.fuse-vertical-navigation-wrapper { |
|
||||
|
|
||||
/* Content */ |
|
||||
.fuse-vertical-navigation-content { |
|
||||
|
|
||||
> fuse-vertical-navigation-aside-item, |
|
||||
> fuse-vertical-navigation-basic-item { |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
height: 64px; |
|
||||
min-height: 64px; |
|
||||
max-height: 64px; |
|
||||
padding: 0 16px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-wrapper { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
.fuse-vertical-navigation-item { |
|
||||
justify-content: center; |
|
||||
padding: 12px; |
|
||||
border-radius: 4px; |
|
||||
|
|
||||
.fuse-vertical-navigation-item-icon { |
|
||||
margin: 0; |
|
||||
} |
|
||||
|
|
||||
.fuse-vertical-navigation-item-arrow, |
|
||||
.fuse-vertical-navigation-item-badge-content, |
|
||||
.fuse-vertical-navigation-item-title-wrapper { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
> fuse-vertical-navigation-collapsable-item { |
|
||||
display: none |
|
||||
} |
|
||||
|
|
||||
> fuse-vertical-navigation-group-item { |
|
||||
|
|
||||
> .fuse-vertical-navigation-item-wrapper { |
|
||||
display: none |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Aside wrapper */ |
|
||||
.fuse-vertical-navigation-aside-wrapper { |
|
||||
left: #{$fuse-vertical-navigation-thin-width}px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,122 +0,0 @@ |
|||||
<div class="fuse-vertical-navigation-wrapper"> |
|
||||
|
|
||||
<!-- Header --> |
|
||||
<div class="fuse-vertical-navigation-header"> |
|
||||
<ng-content select="[fuseVerticalNavigationHeader]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Content --> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-content" |
|
||||
fuseScrollbar |
|
||||
[fuseScrollbarOptions]="{wheelPropagation: inner, suppressScrollX: true}" |
|
||||
#navigationContent> |
|
||||
|
|
||||
<!-- Content header --> |
|
||||
<div class="fuse-vertical-navigation-content-header"> |
|
||||
<ng-content select="[fuseVerticalNavigationContentHeader]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Items --> |
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Aside --> |
|
||||
<ng-container *ngIf="item.type === 'aside'"> |
|
||||
<fuse-vertical-navigation-aside-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[activeItemId]="activeAsideItemId" |
|
||||
[autoCollapse]="autoCollapse" |
|
||||
[skipChildren]="true" |
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Basic --> |
|
||||
<ng-container *ngIf="item.type === 'basic'"> |
|
||||
<fuse-vertical-navigation-basic-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-basic-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Collapsable --> |
|
||||
<ng-container *ngIf="item.type === 'collapsable'"> |
|
||||
<fuse-vertical-navigation-collapsable-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Divider --> |
|
||||
<ng-container *ngIf="item.type === 'divider'"> |
|
||||
<fuse-vertical-navigation-divider-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-divider-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Group --> |
|
||||
<ng-container *ngIf="item.type === 'group'"> |
|
||||
<fuse-vertical-navigation-group-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Spacer --> |
|
||||
<ng-container *ngIf="item.type === 'spacer'"> |
|
||||
<fuse-vertical-navigation-spacer-item |
|
||||
[item]="item" |
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
<!-- Content footer --> |
|
||||
<div class="fuse-vertical-navigation-content-footer"> |
|
||||
<ng-content select="[fuseVerticalNavigationContentFooter]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Footer --> |
|
||||
<div class="fuse-vertical-navigation-footer"> |
|
||||
<ng-content select="[fuseVerticalNavigationFooter]"></ng-content> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- Aside --> |
|
||||
<ng-container *ngIf="activeAsideItemId"> |
|
||||
<div |
|
||||
class="fuse-vertical-navigation-aside-wrapper" |
|
||||
fuseScrollbar |
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}" |
|
||||
[@fadeInLeft]="position === 'left'" |
|
||||
[@fadeInRight]="position === 'right'" |
|
||||
[@fadeOutLeft]="position === 'left'" |
|
||||
[@fadeOutRight]="position === 'right'"> |
|
||||
|
|
||||
<!-- Items --> |
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> |
|
||||
|
|
||||
<!-- Skip the hidden items --> |
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
|
||||
|
|
||||
<!-- Aside --> |
|
||||
<ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId"> |
|
||||
<fuse-vertical-navigation-aside-item |
|
||||
[item]="item" |
|
||||
[name]="name" |
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item> |
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</ng-container> |
|
||||
|
|
||||
</div> |
|
||||
</ng-container> |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/directives/scroll-reset/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/directives/scroll-reset/scroll-reset.directive'; |
|
||||
export * from '@fuse/directives/scroll-reset/scroll-reset.module'; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
declarations: [ |
|
||||
FuseScrollResetDirective |
|
||||
], |
|
||||
exports : [ |
|
||||
FuseScrollResetDirective |
|
||||
] |
|
||||
}) |
|
||||
export class FuseScrollResetModule |
|
||||
{ |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/directives/scrollbar/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/directives/scrollbar/scrollbar.directive'; |
|
||||
export * from '@fuse/directives/scrollbar/scrollbar.module'; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
declarations: [ |
|
||||
FuseScrollbarDirective |
|
||||
], |
|
||||
exports : [ |
|
||||
FuseScrollbarDirective |
|
||||
] |
|
||||
}) |
|
||||
export class FuseScrollbarModule |
|
||||
{ |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from './fuse.module'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/lib/mock-api/public-api'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
import { InjectionToken } from '@angular/core'; |
|
||||
|
|
||||
export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>('FUSE_MOCK_API_DEFAULT_DELAY'); |
|
||||
@ -1,5 +0,0 @@ |
|||||
export * from '@fuse/lib/mock-api/mock-api.constants'; |
|
||||
export * from '@fuse/lib/mock-api/mock-api.module'; |
|
||||
export * from '@fuse/lib/mock-api/mock-api.service'; |
|
||||
export * from '@fuse/lib/mock-api/mock-api.types'; |
|
||||
export * from '@fuse/lib/mock-api/mock-api.utils'; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
declarations: [ |
|
||||
FuseFindByKeyPipe |
|
||||
], |
|
||||
exports : [ |
|
||||
FuseFindByKeyPipe |
|
||||
] |
|
||||
}) |
|
||||
export class FuseFindByKeyPipeModule |
|
||||
{ |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/pipes/find-by-key/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/pipes/find-by-key/find-by-key.pipe'; |
|
||||
export * from '@fuse/pipes/find-by-key/find-by-key.module'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
import { InjectionToken } from '@angular/core'; |
|
||||
|
|
||||
export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG'); |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/config/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/services/config/config.module'; |
|
||||
export * from '@fuse/services/config/config.service'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/confirmation/public-api'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export * from '@fuse/services/confirmation/confirmation.module'; |
|
||||
export * from '@fuse/services/confirmation/confirmation.service'; |
|
||||
export * from '@fuse/services/confirmation/confirmation.types'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/media-watcher/public-api'; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
providers: [ |
|
||||
FuseMediaWatcherService |
|
||||
] |
|
||||
}) |
|
||||
export class FuseMediaWatcherModule |
|
||||
{ |
|
||||
/** |
|
||||
* Constructor |
|
||||
*/ |
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService) |
|
||||
{ |
|
||||
} |
|
||||
} |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/services/media-watcher/media-watcher.module'; |
|
||||
export * from '@fuse/services/media-watcher/media-watcher.service'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/splash-screen/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/services/splash-screen/splash-screen.module'; |
|
||||
export * from '@fuse/services/splash-screen/splash-screen.service'; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
providers: [ |
|
||||
FuseSplashScreenService |
|
||||
] |
|
||||
}) |
|
||||
export class FuseSplashScreenModule |
|
||||
{ |
|
||||
/** |
|
||||
* Constructor |
|
||||
*/ |
|
||||
constructor(private _fuseSplashScreenService: FuseSplashScreenService) |
|
||||
{ |
|
||||
} |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/tailwind/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/services/tailwind/tailwind.module'; |
|
||||
export * from '@fuse/services/tailwind/tailwind.service'; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
providers: [ |
|
||||
FuseTailwindService |
|
||||
] |
|
||||
}) |
|
||||
export class FuseTailwindConfigModule |
|
||||
{ |
|
||||
/** |
|
||||
* Constructor |
|
||||
*/ |
|
||||
constructor(private _fuseTailwindConfigService: FuseTailwindService) |
|
||||
{ |
|
||||
} |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/services/utils/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/services/utils/utils.module'; |
|
||||
export * from '@fuse/services/utils/utils.service'; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { NgModule } from '@angular/core'; |
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
|
||||
|
|
||||
@NgModule({ |
|
||||
providers: [ |
|
||||
FuseUtilsService |
|
||||
] |
|
||||
}) |
|
||||
export class FuseUtilsModule |
|
||||
{ |
|
||||
/** |
|
||||
* Constructor |
|
||||
*/ |
|
||||
constructor(private _fuseUtilsService: FuseUtilsService) |
|
||||
{ |
|
||||
} |
|
||||
} |
|
||||
@ -1,167 +0,0 @@ |
|||||
@use '@angular/material' as mat; |
|
||||
@use "sass:map"; |
|
||||
|
|
||||
/* Include the core Angular Material styles */ |
|
||||
@include mat.core(); |
|
||||
|
|
||||
/* Create a base theme without color. |
|
||||
This will globally set the density and typography for all future color themes. */ |
|
||||
@include mat.all-component-themes(( |
|
||||
color: null, |
|
||||
density: -2, |
|
||||
typography: mat.define-typography-config( |
|
||||
$font-family: theme('fontFamily.sans'), |
|
||||
$title: mat.define-typography-level(1.25rem, 2rem, 600), |
|
||||
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600), |
|
||||
$button: mat.define-typography-level(0.875rem, 0.875rem, 500), |
|
||||
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */ |
|
||||
) |
|
||||
)); |
|
||||
|
|
||||
/* Generate Primary, Accent and Warn palettes */ |
|
||||
$palettes: (); |
|
||||
@each $name in (primary, accent, warn) { |
|
||||
$palettes: map.merge($palettes, (#{$name}: ( |
|
||||
50: var(--fuse-#{$name}-50), |
|
||||
100: var(--fuse-#{$name}-100), |
|
||||
200: var(--fuse-#{$name}-200), |
|
||||
300: var(--fuse-#{$name}-300), |
|
||||
400: var(--fuse-#{$name}-400), |
|
||||
500: var(--fuse-#{$name}-500), |
|
||||
600: var(--fuse-#{$name}-600), |
|
||||
700: var(--fuse-#{$name}-700), |
|
||||
800: var(--fuse-#{$name}-800), |
|
||||
900: var(--fuse-#{$name}-900), |
|
||||
contrast: ( |
|
||||
50: var(--fuse-on-#{$name}-50), |
|
||||
100: var(--fuse-on-#{$name}-100), |
|
||||
200: var(--fuse-on-#{$name}-200), |
|
||||
300: var(--fuse-on-#{$name}-300), |
|
||||
400: var(--fuse-on-#{$name}-400), |
|
||||
500: var(--fuse-on-#{$name}-500), |
|
||||
600: var(--fuse-on-#{$name}-600), |
|
||||
700: var(--fuse-on-#{$name}-700), |
|
||||
800: var(--fuse-on-#{$name}-800), |
|
||||
900: var(--fuse-on-#{$name}-900) |
|
||||
), |
|
||||
default: var(--fuse-#{$name}), |
|
||||
lighter: var(--fuse-#{$name}-100), |
|
||||
darker: var(--fuse-#{$name}-700), |
|
||||
text: var(--fuse-#{$name}), |
|
||||
default-contrast: var(--fuse-on-#{$name}), |
|
||||
lighter-contrast: var(--fuse-on-#{$name}-100), |
|
||||
darker-contrast: var(--fuse-on-#{$name}-700) |
|
||||
))); |
|
||||
} |
|
||||
|
|
||||
/* Generate Angular Material themes. Since we are using CSS Custom Properties, |
|
||||
we don't have to generate a separate Angular Material theme for each color |
|
||||
set. We can just create one light and one dark theme and then switch the |
|
||||
CSS Custom Properties to dynamically switch the colors. */ |
|
||||
body.light, |
|
||||
body .light { |
|
||||
$base-light-theme: mat.define-light-theme(( |
|
||||
color: ($palettes) |
|
||||
)); |
|
||||
|
|
||||
$light-theme: ( |
|
||||
color: ( |
|
||||
primary: map.get(map.get($base-light-theme, color), primary), |
|
||||
accent: map.get(map.get($base-light-theme, color), accent), |
|
||||
warn: map.get(map.get($base-light-theme, color), warn), |
|
||||
is-dark: map.get(map.get($base-light-theme, color), is-dark), |
|
||||
foreground: ( |
|
||||
base: #000000, |
|
||||
divider: #E2E8F0, /* blueGray.200 */ |
|
||||
dividers: #E2E8F0, /* blueGray.200 */ |
|
||||
disabled: #94A3B8, /* blueGray.400 */ |
|
||||
disabled-button: #94A3B8, /* blueGray.400 */ |
|
||||
disabled-text: #94A3B8, /* blueGray.400 */ |
|
||||
elevation: #000000, |
|
||||
hint-text: #94A3B8, /* blueGray.400 */ |
|
||||
secondary-text: #64748B, /* blueGray.500 */ |
|
||||
icon: #64748B, /* blueGray.500 */ |
|
||||
icons: #64748B, /* blueGray.500 */ |
|
||||
mat-icon: #64748B, /* blueGray.500 */ |
|
||||
text: #1E293B, /* blueGray.800 */ |
|
||||
slider-min: #1E293B, /* blueGray.800 */ |
|
||||
slider-off: #CBD5E1, /* blueGray.300 */ |
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */ |
|
||||
), |
|
||||
background: ( |
|
||||
status-bar: #CBD5E1, /* blueGray.300 */ |
|
||||
app-bar: #FFFFFF, |
|
||||
background: #F1F5F9, /* blueGray.100 */ |
|
||||
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */ |
|
||||
card: #FFFFFF, |
|
||||
dialog: #FFFFFF, |
|
||||
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */ |
|
||||
raised-button: #FFFFFF, |
|
||||
focused-button: #64748B, /* blueGray.500 */ |
|
||||
selected-button: #E2E8F0, /* blueGray.200 */ |
|
||||
selected-disabled-button: #E2E8F0, /* blueGray.200 */ |
|
||||
disabled-button-toggle: #CBD5E1, /* blueGray.300 */ |
|
||||
unselected-chip: #E2E8F0, /* blueGray.200 */ |
|
||||
disabled-list-option: #CBD5E1, /* blueGray.300 */ |
|
||||
tooltip: #1E293B /* blueGray.800 */ |
|
||||
) |
|
||||
) |
|
||||
); |
|
||||
|
|
||||
/* Use all-component-colors to only generate the colors */ |
|
||||
@include mat.all-component-colors($light-theme); |
|
||||
} |
|
||||
|
|
||||
body.dark, |
|
||||
body .dark { |
|
||||
$base-dark-theme: mat.define-dark-theme(( |
|
||||
color: ($palettes) |
|
||||
)); |
|
||||
|
|
||||
$dark-theme: ( |
|
||||
color: ( |
|
||||
primary: map.get(map.get($base-dark-theme, color), primary), |
|
||||
accent: map.get(map.get($base-dark-theme, color), accent), |
|
||||
warn: map.get(map.get($base-dark-theme, color), warn), |
|
||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark), |
|
||||
foreground: ( |
|
||||
base: #FFFFFF, |
|
||||
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */ |
|
||||
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */ |
|
||||
disabled: #475569, /* blueGray.600 */ |
|
||||
disabled-button: #1E293B, /* blueGray.800 */ |
|
||||
disabled-text: #475569, /* blueGray.600 */ |
|
||||
elevation: #000000, |
|
||||
hint-text: #64748B, /* blueGray.500 */ |
|
||||
secondary-text: #94A3B8, /* blueGray.400 */ |
|
||||
icon: #F1F5F9, /* blueGray.100 */ |
|
||||
icons: #F1F5F9, /* blueGray.100 */ |
|
||||
mat-icon: #94A3B8, /* blueGray.400 */ |
|
||||
text: #FFFFFF, |
|
||||
slider-min: #FFFFFF, |
|
||||
slider-off: #64748B, /* blueGray.500 */ |
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */ |
|
||||
), |
|
||||
background: ( |
|
||||
status-bar: #0F172A, /* blueGray.900 */ |
|
||||
app-bar: #0F172A, /* blueGray.900 */ |
|
||||
background: #0F172A, /* blueGray.900 */ |
|
||||
hover: rgba(255, 255, 255, 0.05), |
|
||||
card: #1E293B, /* blueGray.800 */ |
|
||||
dialog: #1E293B, /* blueGray.800 */ |
|
||||
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */ |
|
||||
raised-button: #0F172A, /* blueGray.900 */ |
|
||||
focused-button: #E2E8F0, /* blueGray.200 */ |
|
||||
selected-button: rgba(255, 255, 255, 0.05), |
|
||||
selected-disabled-button: #1E293B, /* blueGray.800 */ |
|
||||
disabled-button-toggle: #0F172A, /* blueGray.900 */ |
|
||||
unselected-chip: #475569, /* blueGray.600 */ |
|
||||
disabled-list-option: #E2E8F0, /* blueGray.200 */ |
|
||||
tooltip: #64748B /* blueGray.500 */ |
|
||||
) |
|
||||
) |
|
||||
); |
|
||||
|
|
||||
/* Use all-component-colors to only generate the colors */ |
|
||||
@include mat.all-component-colors($dark-theme); |
|
||||
} |
|
||||
@ -1,75 +0,0 @@ |
|||||
const plugin = require('tailwindcss/plugin'); |
|
||||
|
|
||||
const utilities = plugin(({ |
|
||||
addComponents |
|
||||
}) => |
|
||||
{ |
|
||||
/* |
|
||||
* Add base components. These are very important for everything to look |
|
||||
* correct. We are adding these to the 'components' layer because they must |
|
||||
* be defined before pretty much everything else. |
|
||||
*/ |
|
||||
addComponents( |
|
||||
{ |
|
||||
'.mat-icon' : { |
|
||||
'--tw-text-opacity': '1', |
|
||||
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))' |
|
||||
}, |
|
||||
'.text-default' : { |
|
||||
'--tw-text-opacity': '1 !important', |
|
||||
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important' |
|
||||
}, |
|
||||
'.text-secondary' : { |
|
||||
'--tw-text-opacity': '1 !important', |
|
||||
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important' |
|
||||
}, |
|
||||
'.text-hint' : { |
|
||||
'--tw-text-opacity': '1 !important', |
|
||||
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important' |
|
||||
}, |
|
||||
'.text-disabled' : { |
|
||||
'--tw-text-opacity': '1 !important', |
|
||||
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important' |
|
||||
}, |
|
||||
'.divider' : { |
|
||||
color: 'var(--fuse-divider) !important' |
|
||||
}, |
|
||||
'.bg-card' : { |
|
||||
'--tw-bg-opacity': '1 !important', |
|
||||
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important' |
|
||||
}, |
|
||||
'.bg-default' : { |
|
||||
'--tw-bg-opacity': '1 !important', |
|
||||
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important' |
|
||||
}, |
|
||||
'.bg-dialog' : { |
|
||||
'--tw-bg-opacity': '1 !important', |
|
||||
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important' |
|
||||
}, |
|
||||
'.ring-bg-default': { |
|
||||
'--tw-ring-opacity': '1 !important', |
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important' |
|
||||
}, |
|
||||
'.ring-bg-card' : { |
|
||||
'--tw-ring-opacity': '1 !important', |
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important' |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
variants: ['dark', 'responsive', 'group-hover', 'hover'] |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
addComponents( |
|
||||
{ |
|
||||
'.bg-hover': { |
|
||||
backgroundColor: 'var(--fuse-bg-hover) !important' |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
variants: ['dark', 'group-hover', 'hover'] |
|
||||
} |
|
||||
); |
|
||||
}); |
|
||||
|
|
||||
module.exports = utilities; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/validators/public-api'; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/validators/validators'; |
|
||||
@ -1,3 +0,0 @@ |
|||||
import { Version } from '@fuse/version/version'; |
|
||||
|
|
||||
export const FUSE_VERSION = new Version('13.6.2').full; |
|
||||
@ -1 +0,0 @@ |
|||||
export * from '@fuse/version/public-api'; |
|
||||
@ -1,2 +0,0 @@ |
|||||
export * from '@fuse/version/fuse-version'; |
|
||||
export * from '@fuse/version/version'; |
|
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@teso/animations/public-api'; |
||||
@ -1,10 +1,10 @@ |
|||||
import { expandCollapse } from '@fuse/animations/expand-collapse'; |
import { expandCollapse } from '@teso/animations/expand-collapse'; |
||||
import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade'; |
import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@teso/animations/fade'; |
||||
import { shake } from '@fuse/animations/shake'; |
import { shake } from '@teso/animations/shake'; |
||||
import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide'; |
import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@teso/animations/slide'; |
||||
import { zoomIn, zoomOut } from '@fuse/animations/zoom'; |
import { zoomIn, zoomOut } from '@teso/animations/zoom'; |
||||
|
|
||||
export const fuseAnimations = [ |
export const tesoAnimations = [ |
||||
expandCollapse, |
expandCollapse, |
||||
fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, |
fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, |
||||
fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight, |
fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight, |
||||
@ -0,0 +1,55 @@ |
|||||
|
<div class="teso-alert-container" *ngIf="!dismissible || dismissible && !dismissed" [@fadeIn]="!dismissed" [@fadeOut]="!dismissed"> |
||||
|
|
||||
|
<!-- Border --> |
||||
|
<div class="teso-alert-border" *ngIf="appearance === 'border'"></div> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<div class="teso-alert-icon" *ngIf="showIcon"> |
||||
|
|
||||
|
<!-- Custom icon --> |
||||
|
<div class="teso-alert-custom-icon"> |
||||
|
<ng-content select="[tesoAlertIcon]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Default icons --> |
||||
|
<div class="teso-alert-default-icon"> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'primary'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'accent'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'warn'" [svgIcon]="'heroicons_solid:x-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'basic'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'info'" [svgIcon]="'heroicons_solid:information-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'success'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'warning'" [svgIcon]="'heroicons_solid:exclamation'"></mat-icon> |
||||
|
|
||||
|
<mat-icon *ngIf="type === 'error'" [svgIcon]="'heroicons_solid:x-circle'"></mat-icon> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- Content --> |
||||
|
<div class="teso-alert-content"> |
||||
|
|
||||
|
<div class="teso-alert-title"> |
||||
|
<ng-content select="[tesoAlertTitle]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
<div class="teso-alert-message"> |
||||
|
<ng-content></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- Dismiss button --> |
||||
|
<button class="teso-alert-dismiss-button" mat-icon-button (click)="dismiss()"> |
||||
|
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon> |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
File diff suppressed because it is too large
@ -1,10 +1,10 @@ |
|||||
export type FuseAlertAppearance = |
export type tesoAlertAppearance = |
||||
| 'border' |
| 'border' |
||||
| 'fill' |
| 'fill' |
||||
| 'outline' |
| 'outline' |
||||
| 'soft'; |
| 'soft'; |
||||
|
|
||||
export type FuseAlertType = |
export type tesoAlertType = |
||||
| 'primary' |
| 'primary' |
||||
| 'accent' |
| 'accent' |
||||
| 'warn' |
| 'warn' |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@teso/components/alert/public-api'; |
||||
@ -0,0 +1,4 @@ |
|||||
|
export * from '@teso/components/alert/alert.component'; |
||||
|
export * from '@teso/components/alert/alert.module'; |
||||
|
export * from '@teso/components/alert/alert.service'; |
||||
|
export * from '@teso/components/alert/alert.types'; |
||||
@ -0,0 +1,27 @@ |
|||||
|
<!-- Flippable card --> |
||||
|
<ng-container *ngIf="flippable"> |
||||
|
|
||||
|
<!-- Front --> |
||||
|
<div class="teso-card-front"> |
||||
|
<ng-content select="[tesoCardFront]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Back --> |
||||
|
<div class="teso-card-back"> |
||||
|
<ng-content select="[tesoCardBack]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Normal card --> |
||||
|
<ng-container *ngIf="!flippable"> |
||||
|
|
||||
|
<!-- Content --> |
||||
|
<ng-content></ng-content> |
||||
|
|
||||
|
<!-- Expansion --> |
||||
|
<div class="teso-card-expansion" *ngIf="expanded" [@expandCollapse]> |
||||
|
<ng-content select="[tesoCardExpansion]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
</ng-container> |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue