First pass on the new control flow syntax migration

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,41 +1,37 @@
<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 -->
<ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
<!-- Basic -->
<ng-container *ngIf="item.type === 'basic'">
@if (item.type === 'basic') {
<fuse-horizontal-navigation-basic-item
class="fuse-horizontal-navigation-menu-item"
[item]="item"
[name]="name"
></fuse-horizontal-navigation-basic-item>
</ng-container>
}
<!-- Branch: aside, collapsable, group -->
<ng-container
*ngIf="
item.type === 'aside' ||
item.type === 'collapsable' ||
item.type === 'group'
"
>
@if (
item.type === 'aside' ||
item.type === 'collapsable' ||
item.type === 'group'
) {
<fuse-horizontal-navigation-branch-item
class="fuse-horizontal-navigation-menu-item"
[item]="item"
[name]="name"
></fuse-horizontal-navigation-branch-item>
</ng-container>
}
<!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'">
@if (item.type === 'spacer') {
<fuse-horizontal-navigation-spacer-item
class="fuse-horizontal-navigation-menu-item"
[item]="item"
[name]="name"
></fuse-horizontal-navigation-spacer-item>
</ng-container>
</ng-container>
</ng-container>
}
}
}
</div>

View File

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

View File

@ -8,18 +8,18 @@
[ngClass]="{
'fuse-vertical-navigation-item-active': active,
'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 -->
<ng-container *ngIf="item.icon">
@if (item.icon) {
<mat-icon
class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon"
[svgIcon]="item.icon"
></mat-icon>
</ng-container>
}
<!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper">
@ -28,17 +28,17 @@
{{ item.title }}
</span>
</div>
<ng-container *ngIf="item.subtitle">
@if (item.subtitle) {
<div class="fuse-vertical-navigation-item-subtitle">
<span [ngClass]="item.classes?.subtitle">
{{ item.subtitle }}
</span>
</div>
</ng-container>
}
</div>
<!-- Badge -->
<ng-container *ngIf="item.badge">
@if (item.badge) {
<div class="fuse-vertical-navigation-item-badge">
<div
class="fuse-vertical-navigation-item-badge-content"
@ -47,58 +47,56 @@
{{ item.badge.title }}
</div>
</div>
</ng-container>
}
</div>
</div>
<ng-container *ngIf="!skipChildren">
@if (!skipChildren) {
<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 -->
<ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
<!-- Basic -->
<ng-container *ngIf="item.type === 'basic'">
@if (item.type === 'basic') {
<fuse-vertical-navigation-basic-item
[item]="item"
[name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container>
}
<!-- Collapsable -->
<ng-container *ngIf="item.type === 'collapsable'">
@if (item.type === 'collapsable') {
<fuse-vertical-navigation-collapsable-item
[item]="item"
[name]="name"
[autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item>
</ng-container>
}
<!-- Divider -->
<ng-container *ngIf="item.type === 'divider'">
@if (item.type === 'divider') {
<fuse-vertical-navigation-divider-item
[item]="item"
[name]="name"
></fuse-vertical-navigation-divider-item>
</ng-container>
}
<!-- Group -->
<ng-container *ngIf="item.type === 'group'">
@if (item.type === 'group') {
<fuse-vertical-navigation-group-item
[item]="item"
[name]="name"
></fuse-vertical-navigation-group-item>
</ng-container>
}
<!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'">
@if (item.type === 'spacer') {
<fuse-vertical-navigation-spacer-item
[item]="item"
[name]="name"
></fuse-vertical-navigation-spacer-item>
</ng-container>
</ng-container>
</ng-container>
}
}
}
</div>
</ng-container>
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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