purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fuse/navigation) Moved *ngIf directives into their own "ng-container" containers

Browse Source
This commit is contained in:
sercan 2021-06-20 21:59:24 +03:00
parent d693a08136
commit 8f4f7886d5
9 changed files with 469 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
View File

@ -5,77 +5,83 @@
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper">
<!-- Item with an internal link --> <!-- Item with an internal link -->
<div <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <div
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item with an external link --> <!-- Item with an external link -->
<a <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <a
*ngIf="item.link && item.externalLink && !item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with a function --> <!-- Item with a function -->
<div <ng-container *ngIf="!item.link && item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <div
*ngIf="!item.link && item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item with an internal link and function --> <!-- Item with an internal link and function -->
<div <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <div
*ngIf="item.link && !item.externalLink && item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item with an external link and function --> <!-- Item with an external link and function -->
<a <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <a
*ngIf="item.link && item.externalLink && item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)" (click)="item.function(item)"
mat-menu-item> mat-menu-item>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with a no link and no function --> <!-- Item with a no link and no function -->
<div <ng-container *ngIf="!item.link && !item.function && !item.disabled">
class="fuse-horizontal-navigation-item" <div
*ngIf="!item.link && !item.function && !item.disabled" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item is disabled --> <!-- Item is disabled -->
<div <ng-container *ngIf="item.disabled">
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled" <div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
*ngIf="item.disabled"> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> </div>
</div> </ng-container>
</div> </div>
@ -83,11 +89,12 @@
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-horizontal-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-horizontal-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-horizontal-navigation-item-title-wrapper"> <div class="fuse-horizontal-navigation-item-title-wrapper">
@ -96,24 +103,24 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-horizontal-navigation-item-subtitle text-hint" <div class="fuse-horizontal-navigation-item-subtitle text-hint">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-horizontal-navigation-item-badge" <div class="fuse-horizontal-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-horizontal-navigation-item-badge-content"
class="fuse-horizontal-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
</ng-template> </ng-template>

125
src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
View File

@ -1,59 +1,63 @@
<div <ng-container *ngIf="!child">
*ngIf="!child" <div
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen, [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
'fuse-horizontal-navigation-menu-active-forced': item.active}" 'fuse-horizontal-navigation-menu-active-forced': item.active}"
[matMenuTriggerFor]="matMenu" [matMenuTriggerFor]="matMenu"
(onMenuOpen)="triggerChangeDetection()" (onMenuOpen)="triggerChangeDetection()"
(onMenuClose)="triggerChangeDetection()" (onMenuClose)="triggerChangeDetection()"
#trigger="matMenuTrigger"> #trigger="matMenuTrigger">
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
</div> </div>
</ng-container>
<mat-menu <mat-menu
class="fuse-horizontal-navigation-menu-panel" class="fuse-horizontal-navigation-menu-panel"
[overlapTrigger]="false" [overlapTrigger]="false"
#matMenu="matMenu"> #matMenu="matMenu">
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<div <ng-container *ngIf="item.type === 'basic'">
class="fuse-horizontal-navigation-menu-item" <div
*ngIf="item.type === 'basic'" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
mat-menu-item> mat-menu-item>
<fuse-horizontal-navigation-basic-item <fuse-horizontal-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-basic-item> [name]="name"></fuse-horizontal-navigation-basic-item>
</div> </div>
</ng-container>
<!-- Branch: aside, collapsable, group --> <!-- Branch: aside, collapsable, group -->
<div <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
class="fuse-horizontal-navigation-menu-item" <div
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
[matMenuTriggerFor]="branch.matMenu" [matMenuTriggerFor]="branch.matMenu"
mat-menu-item> mat-menu-item>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
<fuse-horizontal-navigation-branch-item <fuse-horizontal-navigation-branch-item
[child]="true" [child]="true"
[item]="item" [item]="item"
[name]="name" [name]="name"
#branch></fuse-horizontal-navigation-branch-item> #branch></fuse-horizontal-navigation-branch-item>
</div> </div>
</ng-container>
<!-- Divider --> <!-- Divider -->
<div <ng-container *ngIf="item.type === 'divider'">
class="fuse-horizontal-navigation-menu-item" <div
*ngIf="item.type === 'divider'" class="fuse-horizontal-navigation-menu-item"
mat-menu-item> mat-menu-item>
<fuse-horizontal-navigation-divider-item <fuse-horizontal-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-divider-item> [name]="name"></fuse-horizontal-navigation-divider-item>
</div> </div>
</ng-container>
</ng-container> </ng-container>
@ -78,11 +82,12 @@
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-horizontal-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-horizontal-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-horizontal-navigation-item-title-wrapper"> <div class="fuse-horizontal-navigation-item-title-wrapper">
@ -91,25 +96,25 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-horizontal-navigation-item-subtitle text-hint" <div class="fuse-horizontal-navigation-item-subtitle text-hint">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-horizontal-navigation-item-badge" <div class="fuse-horizontal-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-horizontal-navigation-item-badge-content"
class="fuse-horizontal-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
</div> </div>
</div> </div>

11
src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
View File

@ -81,4 +81,15 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
} }

35
src/@fuse/components/navigation/horizontal/horizontal.component.html
View File

@ -1,30 +1,33 @@
<div class="fuse-horizontal-navigation-wrapper"> <div class="fuse-horizontal-navigation-wrapper">
<ng-container *ngFor="let item of navigation"> <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<fuse-horizontal-navigation-basic-item <ng-container *ngIf="item.type === 'basic'">
class="fuse-horizontal-navigation-menu-item" <fuse-horizontal-navigation-basic-item
*ngIf="item.type === 'basic'" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-basic-item> [name]="name"></fuse-horizontal-navigation-basic-item>
</ng-container>
<!-- Branch: aside, collapsable, group --> <!-- Branch: aside, collapsable, group -->
<fuse-horizontal-navigation-branch-item <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
class="fuse-horizontal-navigation-menu-item" <fuse-horizontal-navigation-branch-item
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-branch-item> [name]="name"></fuse-horizontal-navigation-branch-item>
</ng-container>
<!-- Spacer --> <!-- Spacer -->
<fuse-horizontal-navigation-spacer-item <ng-container *ngIf="item.type === 'spacer'">
class="fuse-horizontal-navigation-menu-item" <fuse-horizontal-navigation-spacer-item
*ngIf="item.type === 'spacer'" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-spacer-item> [name]="name"></fuse-horizontal-navigation-spacer-item>
</ng-container>
</ng-container> </ng-container>

88
src/@fuse/components/navigation/vertical/components/aside/aside.component.html
View File

@ -11,11 +11,12 @@
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-vertical-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-vertical-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
@ -24,25 +25,25 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-vertical-navigation-item-subtitle" <div class="fuse-vertical-navigation-item-subtitle">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-vertical-navigation-item-badge" <div class="fuse-vertical-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-vertical-navigation-item-badge-content"
class="fuse-vertical-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
</div> </div>
@ -58,35 +59,40 @@
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<fuse-vertical-navigation-basic-item <ng-container *ngIf="item.type === 'basic'">
*ngIf="item.type === 'basic'" <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"></fuse-vertical-navigation-basic-item>
</ng-container>
<!-- Collapsable --> <!-- Collapsable -->
<fuse-vertical-navigation-collapsable-item <ng-container *ngIf="item.type === 'collapsable'">
*ngIf="item.type === 'collapsable'" <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
</ng-container>
<!-- Divider --> <!-- Divider -->
<fuse-vertical-navigation-divider-item <ng-container *ngIf="item.type === 'divider'">
*ngIf="item.type === 'divider'" <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"></fuse-vertical-navigation-divider-item>
</ng-container>
<!-- Group --> <!-- Group -->
<fuse-vertical-navigation-group-item <ng-container *ngIf="item.type === 'group'">
*ngIf="item.type === 'group'" <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"></fuse-vertical-navigation-group-item>
</ng-container>
<!-- Spacer --> <!-- Spacer -->
<fuse-vertical-navigation-spacer-item <ng-container *ngIf="item.type === 'spacer'">
*ngIf="item.type === 'spacer'" <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"></fuse-vertical-navigation-spacer-item>
</ng-container>
</ng-container> </ng-container>

166
src/@fuse/components/navigation/vertical/components/basic/basic.component.html
View File

@ -5,77 +5,84 @@
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper">
<!-- Item with an internal link --> <!-- Item with an internal link -->
<a <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
class="fuse-vertical-navigation-item" <a
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with an external link --> <!-- Item with an external link -->
<a <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
class="fuse-vertical-navigation-item" <a
*ngIf="item.link && item.externalLink && !item.function && !item.disabled" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with a function --> <!-- Item with a function -->
<div <ng-container *ngIf="!item.link && item.function && !item.disabled">
class="fuse-vertical-navigation-item" <div
*ngIf="!item.link && item.function && !item.disabled" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item with an internal link and function --> <!-- Item with an internal link and function -->
<a <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
class="fuse-vertical-navigation-item" <a
*ngIf="item.link && !item.externalLink && item.function && !item.disabled" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with an external link and function --> <!-- Item with an external link and function -->
<a <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
class="fuse-vertical-navigation-item" <a
*ngIf="item.link && item.externalLink && item.function && !item.disabled" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container>
<!-- Item with a no link and no function --> <!-- Item with a no link and no function -->
<div <ng-container *ngIf="!item.link && !item.function && !item.disabled">
class="fuse-vertical-navigation-item" <div
*ngIf="!item.link && !item.function && !item.disabled" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
<!-- Item is disabled --> <!-- Item is disabled -->
<div <ng-container *ngIf="item.disabled">
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled" <div
*ngIf="item.disabled" class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container>
</div> </div>
@ -83,11 +90,12 @@
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-vertical-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-vertical-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
@ -96,24 +104,24 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-vertical-navigation-item-subtitle" <div class="fuse-vertical-navigation-item-subtitle">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-vertical-navigation-item-badge" <div class="fuse-vertical-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-vertical-navigation-item-badge-content"
class="fuse-vertical-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
</ng-template> </ng-template>

88
src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
View File

@ -10,11 +10,12 @@
(click)="toggleCollapsable()"> (click)="toggleCollapsable()">
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-vertical-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-vertical-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
@ -23,25 +24,25 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-vertical-navigation-item-subtitle" <div class="fuse-vertical-navigation-item-subtitle">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-vertical-navigation-item-badge" <div class="fuse-vertical-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-vertical-navigation-item-badge-content"
class="fuse-vertical-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
<!-- Arrow --> <!-- Arrow -->
<mat-icon <mat-icon
@ -63,35 +64,40 @@
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<fuse-vertical-navigation-basic-item <ng-container *ngIf="item.type === 'basic'">
*ngIf="item.type === 'basic'" <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"></fuse-vertical-navigation-basic-item>
</ng-container>
<!-- Collapsable --> <!-- Collapsable -->
<fuse-vertical-navigation-collapsable-item <ng-container *ngIf="item.type === 'collapsable'">
*ngIf="item.type === 'collapsable'" <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
</ng-container>
<!-- Divider --> <!-- Divider -->
<fuse-vertical-navigation-divider-item <ng-container *ngIf="item.type === 'divider'">
*ngIf="item.type === 'divider'" <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"></fuse-vertical-navigation-divider-item>
</ng-container>
<!-- Group --> <!-- Group -->
<fuse-vertical-navigation-group-item <ng-container *ngIf="item.type === 'group'">
*ngIf="item.type === 'group'" <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"></fuse-vertical-navigation-group-item>
</ng-container>
<!-- Spacer --> <!-- Spacer -->
<fuse-vertical-navigation-spacer-item <ng-container *ngIf="item.type === 'spacer'">
*ngIf="item.type === 'spacer'" <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"></fuse-vertical-navigation-spacer-item>
</ng-container>
</ng-container> </ng-container>

88
src/@fuse/components/navigation/vertical/components/group/group.component.html
View File

@ -7,11 +7,12 @@
<div class="fuse-vertical-navigation-item"> <div class="fuse-vertical-navigation-item">
<!-- Icon --> <!-- Icon -->
<mat-icon <ng-container *ngIf="item.icon">
class="fuse-vertical-navigation-item-icon" <mat-icon
[ngClass]="item.classes?.icon" class="fuse-vertical-navigation-item-icon"
*ngIf="item.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"></mat-icon>
</ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
@ -20,25 +21,25 @@
{{item.title}} {{item.title}}
</span> </span>
</div> </div>
<div <ng-container *ngIf="item.subtitle">
class="fuse-vertical-navigation-item-subtitle" <div class="fuse-vertical-navigation-item-subtitle">
*ngIf="item.subtitle"> <span [ngClass]="item.classes?.subtitle">
<span [ngClass]="item.classes?.subtitle"> {{item.subtitle}}
{{item.subtitle}} </span>
</span> </div>
</div> </ng-container>
</div> </div>
<!-- Badge --> <!-- Badge -->
<div <ng-container *ngIf="item.badge">
class="fuse-vertical-navigation-item-badge" <div class="fuse-vertical-navigation-item-badge">
*ngIf="item.badge"> <div
<div class="fuse-vertical-navigation-item-badge-content"
class="fuse-vertical-navigation-item-badge-content" [ngClass]="item.badge.classes">
[ngClass]="item.badge.classes"> {{item.badge.title}}
{{item.badge.title}} </div>
</div> </div>
</div> </ng-container>
</div> </div>
@ -50,35 +51,40 @@
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<fuse-vertical-navigation-basic-item <ng-container *ngIf="item.type === 'basic'">
*ngIf="item.type === 'basic'" <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"></fuse-vertical-navigation-basic-item>
</ng-container>
<!-- Collapsable --> <!-- Collapsable -->
<fuse-vertical-navigation-collapsable-item <ng-container *ngIf="item.type === 'collapsable'">
*ngIf="item.type === 'collapsable'" <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
</ng-container>
<!-- Divider --> <!-- Divider -->
<fuse-vertical-navigation-divider-item <ng-container *ngIf="item.type === 'divider'">
*ngIf="item.type === 'divider'" <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"></fuse-vertical-navigation-divider-item>
</ng-container>
<!-- Group --> <!-- Group -->
<fuse-vertical-navigation-group-item <ng-container *ngIf="item.type === 'group'">
*ngIf="item.type === 'group'" <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"></fuse-vertical-navigation-group-item>
</ng-container>
<!-- Spacer --> <!-- Spacer -->
<fuse-vertical-navigation-spacer-item <ng-container *ngIf="item.type === 'spacer'">
*ngIf="item.type === 'spacer'" <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"></fuse-vertical-navigation-spacer-item>
</ng-container>
</ng-container> </ng-container>

112
src/@fuse/components/navigation/vertical/vertical.component.html
View File

@ -24,46 +24,52 @@
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Aside --> <!-- Aside -->
<fuse-vertical-navigation-aside-item <ng-container *ngIf="item.type === 'aside'">
*ngIf="item.type === 'aside'" <fuse-vertical-navigation-aside-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[activeItemId]="activeAsideItemId" [activeItemId]="activeAsideItemId"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
[skipChildren]="true" [skipChildren]="true"
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item> (click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
</ng-container>
<!-- Basic --> <!-- Basic -->
<fuse-vertical-navigation-basic-item <ng-container *ngIf="item.type === 'basic'">
*ngIf="item.type === 'basic'" <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"></fuse-vertical-navigation-basic-item>
</ng-container>
<!-- Collapsable --> <!-- Collapsable -->
<fuse-vertical-navigation-collapsable-item <ng-container *ngIf="item.type === 'collapsable'">
*ngIf="item.type === 'collapsable'" <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
</ng-container>
<!-- Divider --> <!-- Divider -->
<fuse-vertical-navigation-divider-item <ng-container *ngIf="item.type === 'divider'">
*ngIf="item.type === 'divider'" <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"></fuse-vertical-navigation-divider-item>
</ng-container>
<!-- Group --> <!-- Group -->
<fuse-vertical-navigation-group-item <ng-container *ngIf="item.type === 'group'">
*ngIf="item.type === 'group'" <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
</ng-container>
<!-- Spacer --> <!-- Spacer -->
<fuse-vertical-navigation-spacer-item <ng-container *ngIf="item.type === 'spacer'">
*ngIf="item.type === 'spacer'" <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"></fuse-vertical-navigation-spacer-item>
</ng-container>
</ng-container> </ng-container>
@ -84,31 +90,33 @@
</div> </div>
<!-- Aside --> <!-- Aside -->
<div <ng-container *ngIf="activeAsideItemId">
class="fuse-vertical-navigation-aside-wrapper" <div
*ngIf="activeAsideItemId" class="fuse-vertical-navigation-aside-wrapper"
fuseScrollbar fuseScrollbar
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}" [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
[@fadeInLeft]="position === 'left'" [@fadeInLeft]="position === 'left'"
[@fadeInRight]="position === 'right'" [@fadeInRight]="position === 'right'"
[@fadeOutLeft]="position === 'left'" [@fadeOutLeft]="position === 'left'"
[@fadeOutRight]="position === 'right'"> [@fadeOutRight]="position === 'right'">
<!-- Items --> <!-- Items -->
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Aside --> <!-- Aside -->
<fuse-vertical-navigation-aside-item <ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
*ngIf="item.type === 'aside' && item.id === activeAsideItemId" <fuse-vertical-navigation-aside-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item> [autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
</ng-container>
</ng-container>
</ng-container> </ng-container>
</ng-container> </div>
</ng-container>
</div>