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

Merge remote-tracking branch 'origin/demo' into starter

Browse Source
This commit is contained in:
sercan 2021-07-01 14:28:05 +03:00
commit 21652570c2
32 changed files with 619 additions and 564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
package.json
View File

@ -1,6 +1,8 @@
{ {
"name": "@fuse/demo", "name": "@fuse/demo",
"version": "13.1.0", "version": "13.2.0",
"description": "Fuse - Angular Admin Template and Starter Project",
"author": "https://themeforest.net/user/srcn",
"license": "https://themeforest.net/licenses/standard", "license": "https://themeforest.net/licenses/standard",
"private": true, "private": true,
"scripts": { "scripts": {
@ -12,17 +14,17 @@
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "12.0.4", "@angular/animations": "12.1.1",
"@angular/cdk": "12.0.4", "@angular/cdk": "12.1.1",
"@angular/common": "12.0.4", "@angular/common": "12.1.1",
"@angular/compiler": "12.0.4", "@angular/compiler": "12.1.1",
"@angular/core": "12.0.4", "@angular/core": "12.1.1",
"@angular/forms": "12.0.4", "@angular/forms": "12.1.1",
"@angular/material": "12.0.4", "@angular/material": "12.1.1",
"@angular/material-moment-adapter": "12.0.4", "@angular/material-moment-adapter": "12.1.1",
"@angular/platform-browser": "12.0.4", "@angular/platform-browser": "12.1.1",
"@angular/platform-browser-dynamic": "12.0.4", "@angular/platform-browser-dynamic": "12.1.1",
"@angular/router": "12.0.4", "@angular/router": "12.1.1",
"@fullcalendar/angular": "4.4.5-beta", "@fullcalendar/angular": "4.4.5-beta",
"@fullcalendar/core": "4.4.2", "@fullcalendar/core": "4.4.2",
"@fullcalendar/daygrid": "4.4.2", "@fullcalendar/daygrid": "4.4.2",
@ -39,7 +41,7 @@
"moment": "2.29.1", "moment": "2.29.1",
"ng-apexcharts": "1.5.12", "ng-apexcharts": "1.5.12",
"ngx-markdown": "12.0.1", "ngx-markdown": "12.0.1",
"ngx-quill": "14.0.0", "ngx-quill": "14.1.1",
"perfect-scrollbar": "1.5.1", "perfect-scrollbar": "1.5.1",
"quill": "1.3.7", "quill": "1.3.7",
"rrule": "2.6.8", "rrule": "2.6.8",
@ -49,15 +51,14 @@
"zone.js": "0.11.4" "zone.js": "0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "12.0.4", "@angular-devkit/build-angular": "12.1.0",
"@angular-eslint/builder": "12.1.0", "@angular-eslint/builder": "12.2.0",
"@angular-eslint/eslint-plugin": "12.1.0", "@angular-eslint/eslint-plugin": "12.2.0",
"@angular-eslint/eslint-plugin-template": "12.1.0", "@angular-eslint/eslint-plugin-template": "12.2.0",
"@angular-eslint/schematics": "12.1.0", "@angular-eslint/schematics": "12.2.0",
"@angular-eslint/template-parser": "12.1.0", "@angular-eslint/template-parser": "12.2.0",
"@angular/cli": "12.0.4", "@angular/cli": "12.1.0",
"@angular/compiler-cli": "12.0.4", "@angular/compiler-cli": "12.1.1",
"@angular/language-service": "12.0.4",
"@tailwindcss/aspect-ratio": "0.2.1", "@tailwindcss/aspect-ratio": "0.2.1",
"@tailwindcss/line-clamp": "0.2.1", "@tailwindcss/line-clamp": "0.2.1",
"@tailwindcss/typography": "0.4.1", "@tailwindcss/typography": "0.4.1",
@ -68,13 +69,13 @@
"@types/lodash": "4.14.170", "@types/lodash": "4.14.170",
"@types/lodash-es": "4.17.4", "@types/lodash-es": "4.17.4",
"@types/node": "12.20.15", "@types/node": "12.20.15",
"@typescript-eslint/eslint-plugin": "4.26.1", "@typescript-eslint/eslint-plugin": "4.28.1",
"@typescript-eslint/parser": "4.26.1", "@typescript-eslint/parser": "4.28.1",
"autoprefixer": "10.2.6", "autoprefixer": "10.2.6",
"chroma-js": "2.1.2", "chroma-js": "2.1.2",
"eslint": "7.28.0", "eslint": "7.29.0",
"eslint-plugin-import": "2.23.4", "eslint-plugin-import": "2.23.4",
"eslint-plugin-jsdoc": "35.2.0", "eslint-plugin-jsdoc": "35.4.1",
"eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "3.7.1", "jasmine-core": "3.7.1",
"karma": "6.3.4", "karma": "6.3.4",
@ -83,8 +84,8 @@
"karma-jasmine": "4.0.1", "karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.6.0", "karma-jasmine-html-reporter": "1.6.0",
"lodash": "4.17.21", "lodash": "4.17.21",
"postcss": "8.3.3", "postcss": "8.3.5",
"tailwindcss": "2.1.4", "tailwindcss": "2.2.4",
"typescript": "4.2.4" "typescript": "4.3.5"
} }
} }

10
src/@fuse/components/drawer/drawer.component.ts
View File

@ -341,6 +341,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
]).create(this._overlay); ]).create(this._overlay);
// Once the animation is done...
this._player.onDone(() => {
// Destroy the player
this._player.destroy();
});
// Play the animation // Play the animation
this._player.play(); this._player.play();
@ -373,6 +380,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => { this._player.onDone(() => {
// Destroy the player
this._player.destroy();
// If the backdrop still exists... // If the backdrop still exists...
if ( this._overlay ) if ( this._overlay )
{ {

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

@ -5,71 +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"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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'"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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}"
(click)="item.function(item)"> [matTooltip]="item.tooltip || ''"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> (click)="item.function(item)">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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"
(click)="item.function(item)"> [matTooltip]="item.tooltip || ''"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> (click)="item.function(item)">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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'"
(click)="item.function(item)" [matTooltip]="item.tooltip || ''"
mat-menu-item> (click)="item.function(item)"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> mat-menu-item>
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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}"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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>
@ -77,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">
@ -90,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>

128
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>
@ -74,14 +78,16 @@
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled, [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
'fuse-horizontal-navigation-item-active-forced': item.active}"> 'fuse-horizontal-navigation-item-active-forced': item.active}"
[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">
@ -90,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>

1
src/@fuse/components/navigation/navigation.types.ts
View File

@ -15,6 +15,7 @@ export interface FuseNavigationItem
hidden?: (item: FuseNavigationItem) => boolean; hidden?: (item: FuseNavigationItem) => boolean;
active?: boolean; active?: boolean;
disabled?: boolean; disabled?: boolean;
tooltip?: string;
link?: string; link?: string;
externalLink?: boolean; externalLink?: boolean;
target?: target?:

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

@ -7,14 +7,16 @@
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active': active, [ngClass]="{'fuse-vertical-navigation-item-active': active,
'fuse-vertical-navigation-item-disabled': item.disabled, 'fuse-vertical-navigation-item-disabled': item.disabled,
'fuse-vertical-navigation-item-active-forced': item.active}"> 'fuse-vertical-navigation-item-active-forced': item.active}"
[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">
@ -23,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>
@ -57,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>

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

@ -5,70 +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"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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'"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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}"
(click)="item.function(item)"> [matTooltip]="item.tooltip || ''"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> (click)="item.function(item)">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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"
(click)="item.function(item)"> [matTooltip]="item.tooltip || ''"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> (click)="item.function(item)">
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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'"
(click)="item.function(item)"> [matTooltip]="item.tooltip || ''"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> (click)="item.function(item)">
</a> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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}"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</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"
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> [matTooltip]="item.tooltip || ''">
</div> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div>
</ng-container>
</div> </div>
@ -76,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">
@ -89,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>

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

@ -6,14 +6,16 @@
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}" [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
[matTooltip]="item.tooltip || ''"
(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">
@ -22,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
@ -62,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>

4
src/@fuse/components/navigation/vertical/vertical.component.ts
View File

@ -374,6 +374,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
*/ */
ngOnDestroy(): void ngOnDestroy(): void
{ {
// Forcefully close the navigation and aside in case they are opened
this.close();
this.closeAside();
// Deregister the navigation component from the registry // Deregister the navigation component from the registry
this._fuseNavigationService.deregisterComponent(this.name); this._fuseNavigationService.deregisterComponent(this.name);

139
src/@fuse/styles/overrides/angular-material.scss
View File

@ -136,11 +136,8 @@
.mat-flat-button, .mat-flat-button,
.mat-raised-button, .mat-raised-button,
.mat-stroked-button { .mat-stroked-button {
padding: 0 20px !important;
.fuse-mat-rounded & { border-radius: 9999px !important;
padding: 0 20px;
border-radius: 9999px;
}
} }
/* Target all buttons */ /* Target all buttons */
@ -334,6 +331,8 @@
/* @ Button Toggle /* @ Button Toggle
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
.mat-button-toggle-group { .mat-button-toggle-group {
border: none !important;
@apply space-x-1;
&.mat-button-toggle-group-appearance-standard { &.mat-button-toggle-group-appearance-standard {
@ -341,36 +340,27 @@
background-clip: padding-box; background-clip: padding-box;
} }
} }
}
/* Rounded design */ .mat-button-toggle {
.fuse-mat-rounded { border-radius: 9999px;
overflow: hidden;
.mat-button-toggle-group {
border: none !important; border: none !important;
@apply space-x-1; font-weight: 500;
.mat-button-toggle { &.mat-button-toggle-checked {
border-radius: 9999px;
overflow: hidden;
border: none !important;
font-weight: 500;
&.mat-button-toggle-checked {
.mat-button-toggle-label-content {
@apply text-default #{'!important'};
}
}
.mat-button-toggle-label-content { .mat-button-toggle-label-content {
padding: 0 20px; @apply text-default #{'!important'};
@apply text-secondary;
} }
}
.mat-ripple { .mat-button-toggle-label-content {
border-radius: 9999px; padding: 0 20px;
} @apply text-secondary;
}
.mat-ripple {
border-radius: 9999px;
} }
} }
} }
@ -1329,62 +1319,55 @@
opacity: 0 !important; opacity: 0 !important;
} }
} }
.mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
padding: 0 24px;
.mat-tab-list {
.mat-tab-labels {
.mat-tab-label {
min-width: 0 !important;
height: 40px !important;
padding: 0 20px !important;
border-radius: 9999px !important;
@apply text-secondary;
&.mat-tab-label-active {
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
@apply text-default #{'!important'};
}
+ .mat-tab-label {
margin-left: 4px;
}
.mat-tab-label-content {
line-height: 20px;
}
}
}
.mat-ink-bar {
display: none !important;
}
}
}
}
.mat-tab-body-content {
padding: 24px;
}
} }
.mat-tab-label { .mat-tab-label {
opacity: 1 !important; opacity: 1 !important;
} }
/* Rounded design */
.fuse-mat-rounded {
.mat-tab-group {
.mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
padding: 0 24px;
.mat-tab-list {
.mat-tab-labels {
.mat-tab-label {
min-width: 0 !important;
height: 40px !important;
padding: 0 20px !important;
border-radius: 9999px !important;
@apply text-secondary;
&.mat-tab-label-active {
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
@apply text-default #{'!important'};
}
+ .mat-tab-label {
margin-left: 4px;
}
.mat-tab-label-content {
line-height: 20px;
}
}
}
.mat-ink-bar {
display: none !important;
}
}
}
}
.mat-tab-body-content {
padding: 24px;
}
}
}
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
/* @ Textarea /* @ Textarea
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */

2
src/@fuse/version/fuse-version.ts
View File

@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version'; import { Version } from '@fuse/version/version';
export const FUSE_VERSION = new Version('13.1.0').full; export const FUSE_VERSION = new Version('13.2.0').full;

2
src/app/core/transloco/transloco.http-loader.ts
View File

@ -27,6 +27,6 @@ export class TranslocoHttpLoader implements TranslocoLoader
*/ */
getTranslation(lang: string): Observable<Translation> getTranslation(lang: string): Observable<Translation>
{ {
return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`); return this._httpClient.get<Translation>(`./assets/i18n/${lang}.json`);
} }
} }

2
src/app/layout/common/messages/messages.component.ts
View File

@ -167,7 +167,7 @@ export class MessagesComponent implements OnInit, OnDestroy
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement) .flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement)
.withLockedPosition() .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {

2
src/app/layout/common/notifications/notifications.component.ts
View File

@ -167,7 +167,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement) .flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
.withLockedPosition() .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {

2
src/app/layout/common/shortcuts/shortcuts.component.ts
View File

@ -221,7 +221,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement) .flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement)
.withLockedPosition() .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {

10
src/app/layout/layout.component.html
View File

@ -54,7 +54,7 @@
</div> </div>
<fuse-drawer <fuse-drawer
class="w-100 min-w-100" class="w-screen min-w-screen sm:w-100 sm:min-w-100"
fixed fixed
transparentOverlay transparentOverlay
[mode]="'over'" [mode]="'over'"
@ -74,17 +74,17 @@
<!-- Theme --> <!-- Theme -->
<div class="text-md font-semibold text-secondary">THEME</div> <div class="text-md font-semibold text-secondary">THEME</div>
<div class="grid grid-cols-3 gap-3 mt-6"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
<ng-container *ngFor="let theme of themes"> <ng-container *ngFor="let theme of themes">
<div <div
class="flex items-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover" class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.theme === theme[0]" [class.ring-2]="config.theme === theme[0]"
(click)="setTheme(theme[0])"> (click)="setTheme(theme[0])">
<div <div
class="w-4 h-4 rounded-full" class="flex-0 w-3 h-3 rounded-full"
[style.background-color]="theme[1].primary"></div> [style.background-color]="theme[1].primary"></div>
<div <div
class="ml-2.5 font-medium leading-5" class="ml-2.5 font-medium leading-5 truncate"
[class.text-secondary]="config.theme !== theme[0]"> [class.text-secondary]="config.theme !== theme[0]">
{{theme[0] | titlecase}} {{theme[0] | titlecase}}
</div> </div>

4
src/app/layout/layouts/horizontal/centered/centered.component.html
View File

@ -62,9 +62,9 @@
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
View File

@ -45,9 +45,9 @@
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/horizontal/material/material.component.html
View File

@ -51,9 +51,9 @@
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/horizontal/modern/modern.component.html
View File

@ -54,9 +54,9 @@
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/classic/classic.component.html
View File

@ -35,9 +35,9 @@
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/classy/classy.component.html
View File

@ -65,9 +65,9 @@
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/compact/compact.component.html
View File

@ -30,9 +30,9 @@
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/dense/dense.component.html
View File

@ -39,9 +39,9 @@
</button> </button>
</div> </div>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
View File

@ -44,9 +44,9 @@
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

4
src/app/layout/layouts/vertical/thin/thin.component.html
View File

@ -31,9 +31,9 @@
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2"> <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
<shortcuts></shortcuts> <shortcuts></shortcuts>
<messages></messages> <messages></messages>

3
src/index.html
View File

@ -50,8 +50,7 @@
</head> </head>
<!-- Apply the rounded design throughout the Angular Material library --> <body>
<body class="fuse-mat-rounded">
<!-- Splash screen --> <!-- Splash screen -->
<fuse-splash-screen> <fuse-splash-screen>

35
tailwind.config.js
View File

@ -78,7 +78,8 @@ const config = {
content: ['./src/**/*.{html,scss,ts}'], content: ['./src/**/*.{html,scss,ts}'],
options: { options: {
safelist: { safelist: {
deep: [/^theme/, /^dark/, /^mat/] standard: ['dark'],
deep : [/^theme/, /^mat/]
} }
} }
}, },
@ -181,32 +182,12 @@ const config = {
*/ */
extendedSpacing: { extendedSpacing: {
// Fractional values // Fractional values
'1/2' : '50%', '1/2': '50%',
'1/3' : '33.333333%', '1/3': '33.333333%',
'2/3' : '66.666667%', '2/3': '66.666667%',
'1/4' : '25%', '1/4': '25%',
'2/4' : '50%', '2/4': '50%',
'3/4' : '75%', '3/4': '75%',
'1/5' : '20%',
'2/5' : '40%',
'3/5' : '60%',
'4/5' : '80%',
'1/6' : '16.666667%',
'2/6' : '33.333333%',
'3/6' : '50%',
'4/6' : '66.666667%',
'5/6' : '83.333333%',
'1/12' : '8.333333%',
'2/12' : '16.666667%',
'3/12' : '25%',
'4/12' : '33.333333%',
'5/12' : '41.666667%',
'6/12' : '50%',
'7/12' : '58.333333%',
'8/12' : '66.666667%',
'9/12' : '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
// Bigger values // Bigger values
'100': '25rem', '100': '25rem',