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

First pass on the new control flow syntax migration

Browse Source
This commit is contained in:
Sercan Yemen 2024-06-03 09:19:47 +03:00
parent db4cb459e5
commit b083fd3ebb
24 changed files with 341 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/@fuse/components/alert/alert.component.html
View File

@ -1,80 +1,93 @@
<div @if (!dismissible || (dismissible && !dismissed)) {
class="fuse-alert-container" <div
*ngIf="!dismissible || (dismissible && !dismissed)" class="fuse-alert-container"
[@fadeIn]="!dismissed" [@fadeIn]="!dismissed"
[@fadeOut]="!dismissed" [@fadeOut]="!dismissed"
>
<!-- Border -->
<div class="fuse-alert-border" *ngIf="appearance === 'border'"></div>
<!-- Icon -->
<div class="fuse-alert-icon" *ngIf="showIcon">
<!-- Custom icon -->
<div class="fuse-alert-custom-icon">
<ng-content select="[fuseAlertIcon]"></ng-content>
</div>
<!-- Default icons -->
<div class="fuse-alert-default-icon">
<mat-icon
*ngIf="type === 'primary'"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'accent'"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'warn'"
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'basic'"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'info'"
[svgIcon]="'heroicons_solid:information-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'success'"
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon
*ngIf="type === 'warning'"
[svgIcon]="'heroicons_solid:exclamation-triangle'"
></mat-icon>
<mat-icon
*ngIf="type === 'error'"
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</div>
</div>
<!-- Content -->
<div class="fuse-alert-content">
<div class="fuse-alert-title">
<ng-content select="[fuseAlertTitle]"></ng-content>
</div>
<div class="fuse-alert-message">
<ng-content></ng-content>
</div>
</div>
<!-- Dismiss button -->
<button
class="fuse-alert-dismiss-button"
mat-icon-button
(click)="dismiss()"
> >
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon> <!-- Border -->
</button> @if (appearance === 'border') {
</div> <div class="fuse-alert-border"></div>
}
<!-- Icon -->
@if (showIcon) {
<div class="fuse-alert-icon">
<!-- Custom icon -->
<div class="fuse-alert-custom-icon">
<ng-content select="[fuseAlertIcon]"></ng-content>
</div>
<!-- Default icons -->
<div class="fuse-alert-default-icon">
@if (type === 'primary') {
<mat-icon
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
}
@if (type === 'accent') {
<mat-icon
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
}
@if (type === 'warn') {
<mat-icon
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
}
@if (type === 'basic') {
<mat-icon
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
}
@if (type === 'info') {
<mat-icon
[svgIcon]="'heroicons_solid:information-circle'"
></mat-icon>
}
@if (type === 'success') {
<mat-icon
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
}
@if (type === 'warning') {
<mat-icon
[svgIcon]="'heroicons_solid:exclamation-triangle'"
></mat-icon>
}
@if (type === 'error') {
<mat-icon
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
}
</div>
</div>
}
<!-- Content -->
<div class="fuse-alert-content">
<div class="fuse-alert-title">
<ng-content select="[fuseAlertTitle]"></ng-content>
</div>
<div class="fuse-alert-message">
<ng-content></ng-content>
</div>
</div>
<!-- Dismiss button -->
<button
class="fuse-alert-dismiss-button"
mat-icon-button
(click)="dismiss()"
>
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
</button>
</div>
}

4
src/@fuse/components/alert/alert.component.ts
View File

@ -1,5 +1,5 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -35,7 +35,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
animations: fuseAnimations, animations: fuseAnimations,
exportAs: 'fuseAlert', exportAs: 'fuseAlert',
standalone: true, standalone: true,
imports: [NgIf, MatIconModule, MatButtonModule], imports: [MatIconModule, MatButtonModule],
}) })
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy { export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */

16
src/@fuse/components/card/card.component.html
View File

@ -1,5 +1,5 @@
<!-- Flippable card --> <!-- Flippable card -->
<ng-container *ngIf="flippable"> @if (flippable) {
<!-- Front --> <!-- Front -->
<div class="fuse-card-front"> <div class="fuse-card-front">
<ng-content select="[fuseCardFront]"></ng-content> <ng-content select="[fuseCardFront]"></ng-content>
@ -9,15 +9,17 @@
<div class="fuse-card-back"> <div class="fuse-card-back">
<ng-content select="[fuseCardBack]"></ng-content> <ng-content select="[fuseCardBack]"></ng-content>
</div> </div>
</ng-container> }
<!-- Normal card --> <!-- Normal card -->
<ng-container *ngIf="!flippable"> @if (!flippable) {
<!-- Content --> <!-- Content -->
<ng-content></ng-content> <ng-content></ng-content>
<!-- Expansion --> <!-- Expansion -->
<div class="fuse-card-expansion" *ngIf="expanded" [@expandCollapse]> @if (expanded) {
<ng-content select="[fuseCardExpansion]"></ng-content> <div class="fuse-card-expansion" [@expandCollapse]>
</div> <ng-content select="[fuseCardExpansion]"></ng-content>
</ng-container> </div>
}
}

4
src/@fuse/components/card/card.component.ts
View File

@ -1,5 +1,5 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { import {
Component, Component,
HostBinding, HostBinding,
@ -19,7 +19,7 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
animations: fuseAnimations, animations: fuseAnimations,
exportAs: 'fuseCard', exportAs: 'fuseCard',
standalone: true, standalone: true,
imports: [NgIf], imports: [],
}) })
export class FuseCardComponent implements OnChanges { export class FuseCardComponent implements OnChanges {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */

4
src/@fuse/components/loading-bar/loading-bar.component.html
View File

@ -1,3 +1,3 @@
<ng-container *ngIf="show"> @if (show) {
<mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar> <mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar>
</ng-container> }

4
src/@fuse/components/loading-bar/loading-bar.component.ts
View File

@ -1,5 +1,5 @@
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { import {
Component, Component,
inject, inject,
@ -21,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs: 'fuseLoadingBar', exportAs: 'fuseLoadingBar',
standalone: true, standalone: true,
imports: [NgIf, MatProgressBarModule], imports: [MatProgressBarModule],
}) })
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy { export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
private _fuseLoadingService = inject(FuseLoadingService); private _fuseLoadingService = inject(FuseLoadingService);

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

@ -5,15 +5,11 @@
[ngClass]="item.classes?.wrapper" [ngClass]="item.classes?.wrapper"
> >
<!-- Item with an internal link --> <!-- Item with an internal link -->
<ng-container @if (item.link && !item.externalLink && !item.function && !item.disabled) {
*ngIf="
item.link && !item.externalLink && !item.function && !item.disabled
"
>
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active 'fuse-horizontal-navigation-item-active-forced': item.active,
}" }"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
@ -26,14 +22,10 @@
> >
<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 -->
<ng-container @if (item.link && item.externalLink && !item.function && !item.disabled) {
*ngIf="
item.link && item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
@ -42,32 +34,28 @@
> >
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> }
<!-- Item with a function --> <!-- Item with a function -->
<ng-container *ngIf="!item.link && item.function && !item.disabled"> @if (!item.link && item.function && !item.disabled) {
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active '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 -->
<ng-container @if (item.link && !item.externalLink && item.function && !item.disabled) {
*ngIf="
item.link && !item.externalLink && item.function && !item.disabled
"
>
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active 'fuse-horizontal-navigation-item-active-forced': item.active,
}" }"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
@ -81,14 +69,10 @@
> >
<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 -->
<ng-container @if (item.link && item.externalLink && item.function && !item.disabled) {
*ngIf="
item.link && item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
@ -99,41 +83,41 @@
> >
<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 -->
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> @if (!item.link && !item.function && !item.disabled) {
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active '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 -->
<ng-container *ngIf="item.disabled"> @if (item.disabled) {
<div <div
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled" class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
> >
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> }
</div> </div>
<!-- Item template --> <!-- Item template -->
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-horizontal-navigation-item-icon" class="fuse-horizontal-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -142,17 +126,17 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> <div class="fuse-horizontal-navigation-item-subtitle text-hint">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{ item.subtitle }} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> }
</div> </div>
<!-- Badge --> <!-- Badge -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-horizontal-navigation-item-badge"> <div class="fuse-horizontal-navigation-item-badge">
<div <div
class="fuse-horizontal-navigation-item-badge-content" class="fuse-horizontal-navigation-item-badge-content"
@ -161,5 +145,5 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
</ng-template> </ng-template>

3
src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
View File

@ -1,4 +1,4 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgTemplateOutlet } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -29,7 +29,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
NgClass, NgClass,
NgIf,
RouterLink, RouterLink,
RouterLinkActive, RouterLinkActive,
MatTooltipModule, MatTooltipModule,

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

@ -1,8 +1,8 @@
<ng-container *ngIf="!child"> @if (!child) {
<div <div
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-menu-active': trigger.menuOpen, '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()"
@ -13,20 +13,18 @@
*ngTemplateOutlet="itemTemplate; context: { $implicit: item }" *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
></ng-container> ></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; trackBy: trackByFn"> @for (item of item.children; track trackByFn($index, item)) {
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> @if (item.type === 'basic') {
<div <div
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
@ -37,16 +35,14 @@
[name]="name" [name]="name"
></fuse-horizontal-navigation-basic-item> ></fuse-horizontal-navigation-basic-item>
</div> </div>
</ng-container> }
<!-- Branch: aside, collapsable, group --> <!-- Branch: aside, collapsable, group -->
<ng-container @if (
*ngIf=" item.type === 'aside' ||
item.type === 'aside' || item.type === 'collapsable' ||
item.type === 'collapsable' || item.type === 'group'
item.type === 'group' ) {
"
>
<div <div
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
@ -66,19 +62,19 @@
#branch #branch
></fuse-horizontal-navigation-branch-item> ></fuse-horizontal-navigation-branch-item>
</div> </div>
</ng-container> }
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> @if (item.type === 'divider') {
<div class="fuse-horizontal-navigation-menu-item" mat-menu-item> <div class="fuse-horizontal-navigation-menu-item" mat-menu-item>
<fuse-horizontal-navigation-divider-item <fuse-horizontal-navigation-divider-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-horizontal-navigation-divider-item> ></fuse-horizontal-navigation-divider-item>
</div> </div>
</ng-container> }
</ng-container> }
</ng-container> }
</mat-menu> </mat-menu>
<!-- Item template --> <!-- Item template -->
@ -92,18 +88,18 @@
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-horizontal-navigation-item-disabled': item.disabled, '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 || ''" [matTooltip]="item.tooltip || ''"
> >
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-horizontal-navigation-item-icon" class="fuse-horizontal-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -112,7 +108,7 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div <div
class="fuse-horizontal-navigation-item-subtitle text-hint" class="fuse-horizontal-navigation-item-subtitle text-hint"
> >
@ -120,11 +116,11 @@
{{ item.subtitle }} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> }
</div> </div>
<!-- Badge --> <!-- Badge -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-horizontal-navigation-item-badge"> <div class="fuse-horizontal-navigation-item-badge">
<div <div
class="fuse-horizontal-navigation-item-badge-content" class="fuse-horizontal-navigation-item-badge-content"
@ -133,7 +129,7 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
</ng-template> </ng-template>

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

@ -1,5 +1,5 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgTemplateOutlet } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -27,11 +27,9 @@ import { Subject, takeUntil } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
NgClass, NgClass,
MatMenuModule, MatMenuModule,
NgTemplateOutlet, NgTemplateOutlet,
NgFor,
FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBasicItemComponent,
forwardRef(() => FuseHorizontalNavigationBranchItemComponent), forwardRef(() => FuseHorizontalNavigationBranchItemComponent),
FuseHorizontalNavigationDividerItemComponent, FuseHorizontalNavigationDividerItemComponent,

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

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

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

@ -1,4 +1,3 @@
import { NgFor, NgIf } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -30,8 +29,6 @@ import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer
exportAs: 'fuseHorizontalNavigation', exportAs: 'fuseHorizontalNavigation',
standalone: true, standalone: true,
imports: [ imports: [
NgFor,
NgIf,
FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBasicItemComponent,
FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationBranchItemComponent,
FuseHorizontalNavigationSpacerItemComponent, FuseHorizontalNavigationSpacerItemComponent,

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

@ -8,18 +8,18 @@
[ngClass]="{ [ngClass]="{
'fuse-vertical-navigation-item-active': active, '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 || ''" [matTooltip]="item.tooltip || ''"
> >
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -28,17 +28,17 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-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 -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
@ -47,58 +47,56 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
<ng-container *ngIf="!skipChildren"> @if (!skipChildren) {
<div class="fuse-vertical-navigation-item-children"> <div class="fuse-vertical-navigation-item-children">
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> @for (item of item.children; track trackByFn($index, item)) {
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> @if (item.type === 'basic') {
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-basic-item> ></fuse-vertical-navigation-basic-item>
</ng-container> }
<!-- Collapsable --> <!-- Collapsable -->
<ng-container *ngIf="item.type === 'collapsable'"> @if (item.type === 'collapsable') {
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item> ></fuse-vertical-navigation-collapsable-item>
</ng-container> }
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> @if (item.type === 'divider') {
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-divider-item> ></fuse-vertical-navigation-divider-item>
</ng-container> }
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> @if (item.type === 'group') {
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-group-item> ></fuse-vertical-navigation-group-item>
</ng-container> }
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> @if (item.type === 'spacer') {
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-spacer-item> ></fuse-vertical-navigation-spacer-item>
</ng-container> }
</ng-container> }
</ng-container> }
</div> </div>
</ng-container> }

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

@ -1,5 +1,5 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -32,9 +32,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
imports: [ imports: [
NgClass, NgClass,
MatTooltipModule, MatTooltipModule,
NgIf,
MatIconModule, MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationDividerItemComponent,

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

@ -5,15 +5,11 @@
[ngClass]="item.classes?.wrapper" [ngClass]="item.classes?.wrapper"
> >
<!-- Item with an internal link --> <!-- Item with an internal link -->
<ng-container @if (item.link && !item.externalLink && !item.function && !item.disabled) {
*ngIf="
item.link && !item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active 'fuse-vertical-navigation-item-active-forced': item.active,
}" }"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
@ -26,14 +22,10 @@
> >
<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 -->
<ng-container @if (item.link && item.externalLink && !item.function && !item.disabled) {
*ngIf="
item.link && item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
@ -42,32 +34,28 @@
> >
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> }
<!-- Item with a function --> <!-- Item with a function -->
<ng-container *ngIf="!item.link && item.function && !item.disabled"> @if (!item.link && item.function && !item.disabled) {
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active '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 -->
<ng-container @if (item.link && !item.externalLink && item.function && !item.disabled) {
*ngIf="
item.link && !item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active 'fuse-vertical-navigation-item-active-forced': item.active,
}" }"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
@ -81,14 +69,10 @@
> >
<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 -->
<ng-container @if (item.link && item.externalLink && item.function && !item.disabled) {
*ngIf="
item.link && item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
@ -98,42 +82,42 @@
> >
<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 -->
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> @if (!item.link && !item.function && !item.disabled) {
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{ [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active '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 -->
<ng-container *ngIf="item.disabled"> @if (item.disabled) {
<div <div
class="fuse-vertical-navigation-item fuse-vertical-navigation-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>
<!-- Item template --> <!-- Item template -->
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -142,17 +126,17 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-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 -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
@ -161,5 +145,5 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
</ng-template> </ng-template>

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

@ -1,4 +1,4 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgTemplateOutlet } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -28,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
NgClass, NgClass,
NgIf,
RouterLink, RouterLink,
RouterLinkActive, RouterLinkActive,
MatTooltipModule, MatTooltipModule,

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

@ -10,13 +10,13 @@
(click)="toggleCollapsable()" (click)="toggleCollapsable()"
> >
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -25,17 +25,17 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-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 -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
@ -44,7 +44,7 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
<!-- Arrow --> <!-- Arrow -->
<mat-icon <mat-icon
@ -54,56 +54,52 @@
</div> </div>
</div> </div>
<div @if (!isCollapsed) {
class="fuse-vertical-navigation-item-children" <div class="fuse-vertical-navigation-item-children" @expandCollapse>
*ngIf="!isCollapsed" @for (item of item.children; track trackByFn($index, item)) {
@expandCollapse <!-- Skip the hidden items -->
> @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> <!-- Basic -->
<!-- Skip the hidden items --> @if (item.type === 'basic') {
<ng-container <fuse-vertical-navigation-basic-item
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden" [item]="item"
> [name]="name"
<!-- Basic --> ></fuse-vertical-navigation-basic-item>
<ng-container *ngIf="item.type === 'basic'"> }
<fuse-vertical-navigation-basic-item
[item]="item"
[name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container>
<!-- Collapsable --> <!-- Collapsable -->
<ng-container *ngIf="item.type === 'collapsable'"> @if (item.type === 'collapsable') {
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item> ></fuse-vertical-navigation-collapsable-item>
</ng-container> }
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> @if (item.type === 'divider') {
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-divider-item> ></fuse-vertical-navigation-divider-item>
</ng-container> }
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> @if (item.type === 'group') {
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-group-item> ></fuse-vertical-navigation-group-item>
</ng-container> }
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> @if (item.type === 'spacer') {
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-spacer-item> ></fuse-vertical-navigation-spacer-item>
</ng-container> }
</ng-container> }
</ng-container> }
</div> </div>
}

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

@ -1,5 +1,5 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -33,9 +33,7 @@ import { Subject, filter, takeUntil } from 'rxjs';
imports: [ imports: [
NgClass, NgClass,
MatTooltipModule, MatTooltipModule,
NgIf,
MatIconModule, MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationBasicItemComponent,
forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), forwardRef(() => FuseVerticalNavigationCollapsableItemComponent),
FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationDividerItemComponent,

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

@ -6,13 +6,13 @@
> >
<div class="fuse-vertical-navigation-item"> <div class="fuse-vertical-navigation-item">
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> @if (item.icon) {
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon" [svgIcon]="item.icon"
></mat-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">
@ -21,17 +21,17 @@
{{ item.title }} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> @if (item.subtitle) {
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-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 -->
<ng-container *ngIf="item.badge"> @if (item.badge) {
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
@ -40,52 +40,52 @@
{{ item.badge.title }} {{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> @for (item of item.children; track trackByFn($index, item)) {
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> @if (item.type === 'basic') {
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-basic-item> ></fuse-vertical-navigation-basic-item>
</ng-container> }
<!-- Collapsable --> <!-- Collapsable -->
<ng-container *ngIf="item.type === 'collapsable'"> @if (item.type === 'collapsable') {
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item> ></fuse-vertical-navigation-collapsable-item>
</ng-container> }
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> @if (item.type === 'divider') {
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-divider-item> ></fuse-vertical-navigation-divider-item>
</ng-container> }
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> @if (item.type === 'group') {
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-group-item> ></fuse-vertical-navigation-group-item>
</ng-container> }
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> @if (item.type === 'spacer') {
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-spacer-item> ></fuse-vertical-navigation-spacer-item>
</ng-container> }
</ng-container> }
</ng-container> }

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

@ -1,5 +1,5 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -27,9 +27,7 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
NgClass, NgClass,
NgIf,
MatIconModule, MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationDividerItemComponent,

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

@ -10,7 +10,7 @@
fuseScrollbar fuseScrollbar
[fuseScrollbarOptions]="{ [fuseScrollbarOptions]="{
wheelPropagation: inner, wheelPropagation: inner,
suppressScrollX: true suppressScrollX: true,
}" }"
#navigationContent #navigationContent
> >
@ -22,13 +22,11 @@
</div> </div>
<!-- Items --> <!-- Items -->
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> @for (item of navigation; track trackByFn($index, item)) {
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Aside --> <!-- Aside -->
<ng-container *ngIf="item.type === 'aside'"> @if (item.type === 'aside') {
<fuse-vertical-navigation-aside-item <fuse-vertical-navigation-aside-item
[item]="item" [item]="item"
[name]="name" [name]="name"
@ -37,51 +35,51 @@
[skipChildren]="true" [skipChildren]="true"
(click)="toggleAside(item)" (click)="toggleAside(item)"
></fuse-vertical-navigation-aside-item> ></fuse-vertical-navigation-aside-item>
</ng-container> }
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> @if (item.type === 'basic') {
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-basic-item> ></fuse-vertical-navigation-basic-item>
</ng-container> }
<!-- Collapsable --> <!-- Collapsable -->
<ng-container *ngIf="item.type === 'collapsable'"> @if (item.type === 'collapsable') {
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item> ></fuse-vertical-navigation-collapsable-item>
</ng-container> }
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> @if (item.type === 'divider') {
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-divider-item> ></fuse-vertical-navigation-divider-item>
</ng-container> }
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> @if (item.type === 'group') {
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-group-item> ></fuse-vertical-navigation-group-item>
</ng-container> }
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> @if (item.type === 'spacer') {
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name" [name]="name"
></fuse-vertical-navigation-spacer-item> ></fuse-vertical-navigation-spacer-item>
</ng-container> }
</ng-container> }
</ng-container> }
<!-- Content footer --> <!-- Content footer -->
<div class="fuse-vertical-navigation-content-footer"> <div class="fuse-vertical-navigation-content-footer">
@ -98,13 +96,13 @@
</div> </div>
<!-- Aside --> <!-- Aside -->
<ng-container *ngIf="activeAsideItemId"> @if (activeAsideItemId) {
<div <div
class="fuse-vertical-navigation-aside-wrapper" class="fuse-vertical-navigation-aside-wrapper"
fuseScrollbar fuseScrollbar
[fuseScrollbarOptions]="{ [fuseScrollbarOptions]="{
wheelPropagation: false, wheelPropagation: false,
suppressScrollX: true suppressScrollX: true,
}" }"
[@fadeInLeft]="position === 'left'" [@fadeInLeft]="position === 'left'"
[@fadeInRight]="position === 'right'" [@fadeInRight]="position === 'right'"
@ -112,24 +110,18 @@
[@fadeOutRight]="position === 'right'" [@fadeOutRight]="position === 'right'"
> >
<!-- Items --> <!-- Items -->
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> @for (item of navigation; track trackByFn($index, item)) {
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container @if ((item.hidden && !item.hidden(item)) || !item.hidden) {
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Aside --> <!-- Aside -->
<ng-container @if (item.type === 'aside' && item.id === activeAsideItemId) {
*ngIf="
item.type === 'aside' && item.id === activeAsideItemId
"
>
<fuse-vertical-navigation-aside-item <fuse-vertical-navigation-aside-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-aside-item> ></fuse-vertical-navigation-aside-item>
</ng-container> }
</ng-container> }
</ng-container> }
</div> </div>
</ng-container> }

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

@ -6,7 +6,7 @@ import {
} from '@angular/animations'; } from '@angular/animations';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { DOCUMENT, NgFor, NgIf } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { import {
AfterViewInit, AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
@ -67,8 +67,6 @@ import {
standalone: true, standalone: true,
imports: [ imports: [
FuseScrollbarDirective, FuseScrollbarDirective,
NgFor,
NgIf,
FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationAsideItemComponent,
FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationCollapsableItemComponent,

34
src/@fuse/services/confirmation/dialog/dialog.component.html
View File

@ -1,6 +1,6 @@
<div class="relative flex h-full w-full flex-col"> <div class="relative flex h-full w-full flex-col">
<!-- Dismiss button --> <!-- Dismiss button -->
<ng-container *ngIf="data.dismissible"> @if (data.dismissible) {
<div class="absolute right-0 top-0 pr-4 pt-4"> <div class="absolute right-0 top-0 pr-4 pt-4">
<button mat-icon-button [matDialogClose]="undefined"> <button mat-icon-button [matDialogClose]="undefined">
<mat-icon <mat-icon
@ -9,14 +9,14 @@
></mat-icon> ></mat-icon>
</button> </button>
</div> </div>
</ng-container> }
<!-- Content --> <!-- Content -->
<div <div
class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8" class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8"
> >
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="data.icon.show"> @if (data.icon.show) {
<div <div
class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4" class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4"
[ngClass]="{ [ngClass]="{
@ -35,7 +35,7 @@
'bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-amber-50': 'bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-amber-50':
data.icon.color === 'warning', data.icon.color === 'warning',
'bg-red-100 text-red-600 dark:bg-red-600 dark:text-red-50': 'bg-red-100 text-red-600 dark:bg-red-600 dark:text-red-50':
data.icon.color === 'error' data.icon.color === 'error',
}" }"
> >
<mat-icon <mat-icon
@ -43,45 +43,45 @@
[svgIcon]="data.icon.name" [svgIcon]="data.icon.name"
></mat-icon> ></mat-icon>
</div> </div>
</ng-container> }
<ng-container *ngIf="data.title || data.message"> @if (data.title || data.message) {
<div <div
class="mt-4 flex flex-col items-center space-y-1 text-center sm:mt-0 sm:items-start sm:pr-8 sm:text-left" class="mt-4 flex flex-col items-center space-y-1 text-center sm:mt-0 sm:items-start sm:pr-8 sm:text-left"
> >
<!-- Title --> <!-- Title -->
<ng-container *ngIf="data.title"> @if (data.title) {
<div <div
class="text-xl font-medium leading-6" class="text-xl font-medium leading-6"
[innerHTML]="data.title" [innerHTML]="data.title"
></div> ></div>
</ng-container> }
<!-- Message --> <!-- Message -->
<ng-container *ngIf="data.message"> @if (data.message) {
<div <div
class="text-secondary" class="text-secondary"
[innerHTML]="data.message" [innerHTML]="data.message"
></div> ></div>
</ng-container> }
</div> </div>
</ng-container> }
</div> </div>
<!-- Actions --> <!-- Actions -->
<ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show"> @if (data.actions.confirm.show || data.actions.cancel.show) {
<div <div
class="flex items-center justify-center space-x-3 bg-gray-50 px-6 py-4 dark:bg-black dark:bg-opacity-10 sm:justify-end" class="flex items-center justify-center space-x-3 bg-gray-50 px-6 py-4 dark:bg-black dark:bg-opacity-10 sm:justify-end"
> >
<!-- Cancel --> <!-- Cancel -->
<ng-container *ngIf="data.actions.cancel.show"> @if (data.actions.cancel.show) {
<button mat-stroked-button [matDialogClose]="'cancelled'"> <button mat-stroked-button [matDialogClose]="'cancelled'">
{{ data.actions.cancel.label }} {{ data.actions.cancel.label }}
</button> </button>
</ng-container> }
<!-- Confirm --> <!-- Confirm -->
<ng-container *ngIf="data.actions.confirm.show"> @if (data.actions.confirm.show) {
<button <button
mat-flat-button mat-flat-button
[color]="data.actions.confirm.color" [color]="data.actions.confirm.color"
@ -89,7 +89,7 @@
> >
{{ data.actions.confirm.label }} {{ data.actions.confirm.label }}
</button> </button>
</ng-container> }
</div> </div>
</ng-container> }
</div> </div>

4
src/@fuse/services/confirmation/dialog/dialog.component.ts
View File

@ -1,4 +1,4 @@
import { NgClass, NgIf } from '@angular/common'; import { NgClass } from '@angular/common';
import { Component, ViewEncapsulation, inject } from '@angular/core'; import { Component, ViewEncapsulation, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@ -25,7 +25,7 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
], ],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass], imports: [MatButtonModule, MatDialogModule, MatIconModule, NgClass],
}) })
export class FuseConfirmationDialogComponent { export class FuseConfirmationDialogComponent {
data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA); data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA);