From 83f5f8e5451fa76285e1b44399fcf662acd511f4 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:38:44 +0100
Subject: [PATCH 1/3] fix(chartjs): canvas already in use, refactor

---
 .../src/lib/chartjs.component.ts              | 132 ++++++++++++------
 1 file changed, 91 insertions(+), 41 deletions(-)

diff --git a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
index a0358fa0..6ccfb4d2 100644
--- a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
+++ b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
@@ -22,10 +22,19 @@ import {
 
 import merge from 'lodash-es/merge';
 
-import { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from 'chart.js';
+import {
+  Chart as ChartJS,
+  ChartConfiguration,
+  ChartData,
+  ChartOptions,
+  ChartType,
+  InteractionItem,
+  Plugin,
+  registerables
+} from 'chart.js';
 import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
 
-Chart.register(...registerables);
+ChartJS.register(...registerables);
 
 let nextId = 0;
 
@@ -39,26 +48,70 @@ let nextId = 0;
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   // host: { ngSkipHydration: 'true' }
 })
-export class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {
-
-  @Input() customTooltips = true;
-  @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];
-
+export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
+
+  /**
+   * Enables custom html based tooltips instead of standard tooltips.
+   * @type boolean
+   * @default true
+   */
+  @Input({ transform: booleanAttribute }) customTooltips: boolean = true;
+
+  /**
+   * The data object that is passed into the Chart.js chart (more info).
+   */
+  @Input() data?: ChartData;
+
+  /**
+   * Height attribute applied to the rendered canvas.
+   * @type number | undefined
+   * @default 150
+   */
   @HostBinding('style.height.px')
-  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) height?: string | number;
-
-  @Input() id = `c-chartjs-${nextId++}`;
-  @Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];
-  @Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];
-
-  @Input({ transform: booleanAttribute }) redraw: string | boolean = false;
-
-  @Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;
-
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) height?: number;
+
+  /**
+   * ID attribute applied to the rendered canvas.
+   * @type string
+   */
+  @Input() id: string = `c-chartjs-${nextId++}`;
+
+  /**
+   * The options object that is passed into the Chart.js chart.
+   */
+  @Input() options?: ChartOptions = {};
+
+  /**
+   * The plugins array that is passed into the Chart.js chart
+   */
+  @Input() plugins: Plugin[] = [];
+
+  /**
+   * If true, will tear down and redraw chart on all updates.
+   * @type boolean
+   * @default false
+   */
+  @Input({ transform: booleanAttribute }) redraw: boolean = false;
+
+  /**
+   * Chart.js chart type.
+   * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+   */
+  @Input() type: ChartType = 'bar';
+
+  /**
+   * Width attribute applied to the rendered canvas.
+   * @type number | undefined
+   * @default 300
+   */
   @HostBinding('style.width.px')
-  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) width?: string | number;
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) width?: number;
 
-  @Input() wrapper = true;
+  /**
+   * Put the chart into the wrapper div element.
+   * @default true
+   */
+  @Input({ transform: booleanAttribute }) wrapper = true;
 
   @Output() readonly getDatasetAtEvent = new EventEmitter<any>();
   @Output() readonly getElementAtEvent = new EventEmitter<any>();
@@ -68,7 +121,7 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
 
   @ViewChild('canvasElement') canvasElement!: ElementRef;
 
-  chart!: Chart<TType, TData, TLabel>;
+  chart!: ChartJS;
   ctx!: CanvasRenderingContext2D;
 
   @HostBinding('class')
@@ -79,10 +132,9 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
   }
 
   constructor(
-    private elementRef: ElementRef,
-    private ngZone: NgZone,
-    private renderer: Renderer2,
-    private changeDetectorRef: ChangeDetectorRef
+    private readonly ngZone: NgZone,
+    private readonly renderer: Renderer2,
+    private readonly changeDetectorRef: ChangeDetectorRef
   ) {
     // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
     afterRender(() => {
@@ -110,13 +162,13 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
       return;
     }
 
-    const datasetAtEvent = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);
+    const datasetAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);
     this.getDatasetAtEvent.emit(datasetAtEvent);
 
-    const elementAtEvent = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);
+    const elementAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);
     this.getElementAtEvent.emit(elementAtEvent);
 
-    const elementsAtEvent = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);
+    const elementsAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);
     this.getElementsAtEvent.emit(elementsAtEvent);
   }
 
@@ -126,15 +178,15 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
   }
 
   public chartRender() {
-    if (!this.canvasElement?.nativeElement || !this.ctx) {
+    if (!this.canvasElement?.nativeElement || !this.ctx || this.chart) {
       return;
     }
 
     this.ngZone.runOutsideAngular(() => {
       const config = this.chartConfig();
       if (config) {
-        setTimeout(() => {
-          this.chart = new Chart(this.ctx, config);
+        this.chart = new ChartJS(this.ctx, config);
+        this.ngZone.run(() => {
           this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
           this.changeDetectorRef.markForCheck();
           this.chartRef.emit(this.chart);
@@ -150,13 +202,11 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
 
     if (this.redraw) {
       this.chartDestroy();
-      setTimeout(() => {
-        this.chartRender();
-      });
+      this.chartRender();
       return;
     }
 
-    const config = this.chartConfig();
+    const config: ChartConfiguration = this.chartConfig();
 
     if (this.options) {
       Object.assign(this.chart.options ?? {}, config.options ?? {});
@@ -180,7 +230,9 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
     setTimeout(() => {
       this.ngZone.runOutsideAngular(() => {
         this.chart?.update();
-        this.changeDetectorRef.markForCheck();
+        this.ngZone.run(() => {
+          this.changeDetectorRef.markForCheck();
+        });
       });
     });
   }
@@ -189,18 +241,18 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
     return this.chart?.toBase64Image();
   }
 
-  private chartDataConfig(): ChartConfiguration<TType, TData, TLabel>['data'] {
+  private chartDataConfig(): ChartData {
     return {
       labels: this.data?.labels ?? [],
       datasets: this.data?.datasets ?? []
     };
   }
 
-  private chartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {
-    return this.options;
+  private chartOptions(): ChartOptions {
+    return this.options ?? {};
   }
 
-  private chartConfig(): ChartConfiguration<TType, TData, TLabel> {
+  private chartConfig(): ChartConfiguration {
     this.chartCustomTooltips();
     return {
       data: this.chartDataConfig(),
@@ -213,9 +265,7 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
   private chartCustomTooltips() {
     if (this.customTooltips) {
       const options = this.options;
-      // @ts-ignore
       const plugins = this.options?.plugins;
-      // @ts-ignore
       const tooltip = this.options?.plugins?.tooltip;
       this.options = merge({
         ...options,

From 9e51a4f4bc562e40a8b757cdc40de813db1850c3 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:40:32 +0100
Subject: [PATCH 2/3] refactor: use control flow

---
 .../src/lib/alert/alert.component.html        |  13 +--
 .../src/lib/alert/alert.component.ts          |   4 +-
 .../src/lib/avatar/avatar.component.html      |  15 ++-
 .../src/lib/avatar/avatar.component.ts        |   5 +-
 .../breadcrumb-item.component.html            |  37 +++----
 .../breadcrumb-item.component.ts              |   4 +-
 .../breadcrumb-router.component.html          |   8 +-
 .../breadcrumb-router.component.scss          |   3 -
 .../breadcrumb-router.component.ts            |   5 +-
 .../carousel-control.component.html           |  11 +-
 .../carousel-control.component.ts             |   4 +-
 .../carousel-indicators.component.html        |  12 +-
 .../carousel-indicators.component.ts          |   4 +-
 .../carousel-item.component.html              |   7 +-
 .../carousel-item.component.scss              |   1 -
 .../carousel-item/carousel-item.component.ts  |   4 +-
 .../lib/header/header/header.component.html   |  13 ++-
 .../src/lib/header/header/header.component.ts |   4 +-
 .../sidebar-brand.component.html              |  23 ++--
 .../sidebar-brand/sidebar-brand.component.ts  |   4 +-
 .../sidebar-nav-group.component.html          |  16 ++-
 .../sidebar-nav-label.component.html          |   8 +-
 .../sidebar-nav-label.component.ts            |   4 +-
 .../sidebar-nav-link.component.html           | 103 ++++++++++--------
 .../sidebar-nav/sidebar-nav-link.component.ts |  14 +--
 .../sidebar-nav/sidebar-nav.component.html    |  87 ++++++++-------
 .../sidebar-nav/sidebar-nav.component.ts      |  16 +--
 .../toast-header/toast-header.component.html  |   6 +-
 .../toast-header/toast-header.component.scss  |   0
 .../toast-header/toast-header.component.ts    |   3 +-
 .../widget-stat-a.component.html              |  28 +++--
 .../widget-stat-a/widget-stat-a.component.ts  |   4 +-
 .../widget-stat-b.component.html              |  18 ++-
 .../widget-stat-b/widget-stat-b.component.ts  |   4 +-
 .../widget-stat-c.component.html              |  34 +++---
 .../widget-stat-c/widget-stat-c.component.ts  |   4 +-
 .../widget-stat-d.component.html              |  14 ++-
 .../widget-stat-d/widget-stat-d.component.ts  |   4 +-
 .../widget-stat-e.component.html              |  10 +-
 .../widget-stat-e/widget-stat-e.component.ts  |   4 +-
 .../widget-stat-f.component.html              |  18 +--
 .../widget-stat-f/widget-stat-f.component.ts  |   4 +-
 42 files changed, 310 insertions(+), 274 deletions(-)
 delete mode 100644 projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss
 delete mode 100644 projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.scss

diff --git a/projects/coreui-angular/src/lib/alert/alert.component.html b/projects/coreui-angular/src/lib/alert/alert.component.html
index 5c0762a6..824532aa 100644
--- a/projects/coreui-angular/src/lib/alert/alert.component.html
+++ b/projects/coreui-angular/src/lib/alert/alert.component.html
@@ -1,10 +1,9 @@
-<ng-container *ngIf="visible || !hide">
-  <ng-template [ngIf]="dismissible">
-    <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate">
-    </ng-container>
-  </ng-template>
-  <ng-content></ng-content>
-</ng-container>
+@if (visible || !hide) {
+  @if (dismissible) {
+    <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate" />
+  }
+  <ng-content />
+}
 
 <ng-template #defaultAlertButtonCloseTemplate>
   <button (click)="visible=false" aria-label="Close" cButtonClose></button>
diff --git a/projects/coreui-angular/src/lib/alert/alert.component.ts b/projects/coreui-angular/src/lib/alert/alert.component.ts
index 35bc2105..c7d9f024 100644
--- a/projects/coreui-angular/src/lib/alert/alert.component.ts
+++ b/projects/coreui-angular/src/lib/alert/alert.component.ts
@@ -9,7 +9,7 @@ import {
   Output,
   QueryList
 } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
@@ -25,7 +25,7 @@ type AnimateType = ('hide' | 'show');
   styleUrls: ['./alert.component.scss'],
   exportAs: 'cAlert',
   standalone: true,
-  imports: [NgIf, NgTemplateOutlet, ButtonCloseDirective],
+  imports: [NgTemplateOutlet, ButtonCloseDirective],
   animations: [
     trigger('fadeInOut', [
       state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.html b/projects/coreui-angular/src/lib/avatar/avatar.component.html
index a3c3f737..17cc35e5 100644
--- a/projects/coreui-angular/src/lib/avatar/avatar.component.html
+++ b/projects/coreui-angular/src/lib/avatar/avatar.component.html
@@ -1,11 +1,14 @@
 <ng-container>
-  <ng-container *ngTemplateOutlet="defaultImageTemplate"></ng-container>
-  <span *ngIf="!!status" [ngClass]="statusClass"></span>
+  <ng-container *ngTemplateOutlet="defaultImageTemplate" />
+  @if (!!status) {
+    <span [ngClass]="statusClass"></span>
+  }
 </ng-container>
 
 <ng-template #defaultImageTemplate>
-  <img *ngIf="!!src; else imageContent" [src]="src" class="avatar-img" />
-  <ng-template #imageContent>
-    <ng-content></ng-content>
-  </ng-template>
+  @if (!!src) {
+    <img [src]="src" class="avatar-img" />
+  } @else {
+    <ng-content />
+  }
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/avatar/avatar.component.ts b/projects/coreui-angular/src/lib/avatar/avatar.component.ts
index 56e3ded0..782a6cd8 100644
--- a/projects/coreui-angular/src/lib/avatar/avatar.component.ts
+++ b/projects/coreui-angular/src/lib/avatar/avatar.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 
@@ -9,8 +9,7 @@ import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
   standalone: true,
   imports: [
     NgTemplateOutlet,
-    NgClass,
-    NgIf
+    NgClass
   ]
 })
 export class AvatarComponent {
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html
index fea45be1..ff8e0bf0 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html
+++ b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html
@@ -1,24 +1,23 @@
-<a *ngIf="!active; else activeItem"
-   [routerLink]="url"
-   [cHtmlAttr]="attributes ?? {}"
-   [target]="attributes?.['target']"
-   [queryParams]="linkProps?.queryParams ?? null"
-   [fragment]="linkProps?.fragment"
-   [queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
-   [preserveFragment]="linkProps?.preserveFragment ?? false"
-   [skipLocationChange]="linkProps?.skipLocationChange ?? false"
-   [replaceUrl]="linkProps?.replaceUrl ?? false"
-   [state]="linkProps?.state ?? {}"
->
-  <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
-</a>
-
-<ng-template #activeItem>
+@if (!active) {
+  <a [routerLink]="url"
+     [cHtmlAttr]="attributes ?? {}"
+     [target]="attributes?.['target']"
+     [queryParams]="linkProps?.queryParams ?? null"
+     [fragment]="linkProps?.fragment"
+     [queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
+     [preserveFragment]="linkProps?.preserveFragment ?? false"
+     [skipLocationChange]="linkProps?.skipLocationChange ?? false"
+     [replaceUrl]="linkProps?.replaceUrl ?? false"
+     [state]="linkProps?.state ?? {}"
+  >
+    <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
+  </a>
+} @else {
   <span [cHtmlAttr]="attributes ?? {}">
-      <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
   </span>
-</ng-template>
+}
 
 <ng-template #defaultBreadcrumbItemContentTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
index 05c6e413..4f8492e0 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
+++ b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 import { HtmlAttributesDirective } from '../../shared';
@@ -10,7 +10,7 @@ import { INavAttributes, INavLinkProps } from './breadcrumb-item';
   templateUrl: './breadcrumb-item.component.html',
   styleUrls: ['./breadcrumb-item.component.scss'],
   standalone: true,
-  imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective]
+  imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
 })
 export class BreadcrumbItemComponent {
 
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html
index 68125217..b20dbde4 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html
+++ b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html
@@ -1,6 +1,6 @@
 <c-breadcrumb class="m-0">
-  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last="last">
-    <ng-container *ngIf="breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)">
+  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
+    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
       <c-breadcrumb-item
         [active]="last"
         [url]="breadcrumb?.url"
@@ -9,6 +9,6 @@
       >
         {{ breadcrumb?.label }}
       </c-breadcrumb-item>
-    </ng-container>
-  </ng-template>
+    }
+  }
 </c-breadcrumb>
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss
deleted file mode 100644
index 88149dde..00000000
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-//:host .breadcrumb-item {
-//  display: list-item;
-//}
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts
index 8016cd84..50ce54ec 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts
+++ b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -10,9 +10,8 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
 @Component({
   selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
   templateUrl: './breadcrumb-router.component.html',
-  styleUrls: ['./breadcrumb-router.component.scss'],
   standalone: true,
-  imports: [BreadcrumbComponent, BreadcrumbItemComponent, NgForOf, NgIf, AsyncPipe]
+  imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
 })
 export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
   constructor(
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html b/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html
index db697345..a952982b 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html
+++ b/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html
@@ -1,5 +1,8 @@
-<div #content *ngIf = "hasContent; else defaultContent"><ng-content></ng-content></div>
-<ng-template #defaultContent>
+@if (hasContent) {
+  <div #content>
+    <ng-content />
+  </div>
+} @else {
   <span [class]="carouselControlIconClass" [attr.aria-label]="direction" [attr.aria-hidden]="true"></span>
-  <span class="visually-hidden">{{caption}}</span>
-</ng-template>
+  <span class="visually-hidden">{{ caption }}</span>
+}
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts b/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts
index f435d4f5..d2b3c399 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts
@@ -8,15 +8,13 @@ import {
   Input,
   ViewChild
 } from '@angular/core';
-import { NgIf } from '@angular/common';
 
 import { CarouselState } from '../carousel-state';
 
 @Component({
   selector: 'c-carousel-control',
   templateUrl: './carousel-control.component.html',
-  standalone: true,
-  imports: [NgIf]
+  standalone: true
 })
 export class CarouselControlComponent implements AfterViewInit {
 
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html b/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html
index a51a05c9..45aa2d98 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html
+++ b/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html
@@ -1,5 +1,11 @@
 <div class="carousel-indicators">
-  <ng-container *ngFor="let item of items; let i=index">
-    <button [attr.data-coreui-target]="i" type="button" (click)="onClick(i)" [class]="{active: active === i}" [attr.aria-current]="active === i"></button>
-  </ng-container>
+  @for (item of items; track item; let i = $index) {
+    <button
+      [attr.data-coreui-target]="i"
+      type="button"
+      (click)="onClick(i)"
+      [class]="{ active: active === i }"
+      [attr.aria-current]="active === i"
+    ></button>
+  }
 </div>
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts b/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts
index c0d41c51..c17d0f32 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NgForOf } from '@angular/common';
 import { Subscription } from 'rxjs';
 
 import { CarouselState } from '../carousel-state';
@@ -8,8 +7,7 @@ import { CarouselService } from '../carousel.service';
 @Component({
   selector: 'c-carousel-indicators',
   templateUrl: './carousel-indicators.component.html',
-  standalone: true,
-  imports: [NgForOf]
+  standalone: true
 })
 export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
   constructor(
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html
index ba6f57e4..bd1063ba 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html
+++ b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html
@@ -1,5 +1,4 @@
-<!--todo ngIf-->
-<ng-container *ngIf="active">
-  <ng-content></ng-content>
-</ng-container>
+@if (active) {
+  <ng-content />
+}
 
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss
index 8f7a46d4..5d4e87f3 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss
+++ b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss
@@ -1,4 +1,3 @@
 :host {
   display: block;
-  //display: block !important;
 }
diff --git a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts
index 5eebd09a..bf29221c 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts
@@ -1,5 +1,4 @@
 import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy } from '@angular/core';
-import { NgIf } from '@angular/common';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
 
@@ -9,8 +8,7 @@ import { CarouselService } from '../carousel.service';
   selector: 'c-carousel-item',
   templateUrl: './carousel-item.component.html',
   styleUrls: ['./carousel-item.component.scss'],
-  standalone: true,
-  imports: [NgIf]
+  standalone: true
 })
 export class CarouselItemComponent implements OnDestroy, AfterViewInit {
 
diff --git a/projects/coreui-angular/src/lib/header/header/header.component.html b/projects/coreui-angular/src/lib/header/header/header.component.html
index bde2f1cc..ade67cda 100644
--- a/projects/coreui-angular/src/lib/header/header/header.component.html
+++ b/projects/coreui-angular/src/lib/header/header/header.component.html
@@ -1,8 +1,9 @@
-<div [ngClass]="headerClasses" *ngIf="!!container; else elseBlock">
-  <ng-content></ng-content>
-</div>
-<ng-template #elseBlock>
-  <ng-content></ng-content>
-</ng-template>
+@if (!!container) {
+  <div [ngClass]="headerClasses">
+    <ng-content />
+  </div>
+} @else {
+  <ng-content />
+}
 
 
diff --git a/projects/coreui-angular/src/lib/header/header/header.component.ts b/projects/coreui-angular/src/lib/header/header/header.component.ts
index 8819656d..09716701 100644
--- a/projects/coreui-angular/src/lib/header/header/header.component.ts
+++ b/projects/coreui-angular/src/lib/header/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 import { Positions } from '../../coreui.types';
 
@@ -9,7 +9,7 @@ type Container = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
   selector: 'c-header, [c-header]',
   templateUrl: './header.component.html',
   standalone: true,
-  imports: [NgClass, NgIf]
+  imports: [NgClass]
 })
 export class HeaderComponent {
   /**
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
index 80241f0f..a800f6e5 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
@@ -1,13 +1,14 @@
-<ng-template [ngIf]="brandImg">
+@if (brandImg) {
   <a [routerLink]="routerLink">
-    <img *ngIf="brandFull"
-         [cHtmlAttr]="brandFull"
-         [ngClass]="'sidebar-brand-full'">
-    <img *ngIf="brandNarrow"
-         [cHtmlAttr]="brandNarrow"
-         [ngClass]="'sidebar-brand-narrow'">
+    @if (brandFull) {
+      <img [cHtmlAttr]="brandFull"
+           [ngClass]="'sidebar-brand-full'">
+    }
+    @if (brandNarrow) {
+      <img [cHtmlAttr]="brandNarrow"
+           [ngClass]="'sidebar-brand-narrow'">
+    }
   </a>
-</ng-template>
-<ng-template [ngIf]="!brandImg">
-  <ng-content></ng-content>
-</ng-template>
+} @else {
+  <ng-content />
+}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
index 711d5915..18586378 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
 import { HtmlAttributesDirective } from '../../shared';
@@ -8,7 +8,7 @@ import { HtmlAttributesDirective } from '../../shared';
   selector: 'c-sidebar-brand',
   templateUrl: './sidebar-brand.component.html',
   standalone: true,
-  imports: [RouterLink, HtmlAttributesDirective, NgIf, NgClass]
+  imports: [RouterLink, HtmlAttributesDirective, NgClass]
 })
 export class SidebarBrandComponent implements OnInit {
 
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
index a415cdef..95be6b65 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
@@ -4,7 +4,9 @@
    href>
   <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}" />
   <ng-container>{{ item.name }}</ng-container>
-  <span *ngIf="helper.hasBadge(item)" [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
+  @if (helper.hasBadge(item)) {
+    <span [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
+  }
 </a>
 <c-sidebar-nav
   (@openClose.done)="onAnimationDone($event)"
@@ -17,13 +19,17 @@
 />
 
 <ng-template #iconTemplate let-item>
-  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>
-  <ng-template [ngIf]="item?.iconComponent">
+  @if (item?.icon) {
+    <i [ngClass]="item | cSidebarNavIcon"></i>
+  }
+  @if ("item?.iconComponent") {
     <svg
       [cIcon]="item.iconComponent?.content"
       [customClasses]="item | cSidebarNavIcon"
       [name]="item.iconComponent?.name"
     />
-  </ng-template>
-  <span *ngIf="!item?.icon && !item?.iconComponent" [ngClass]="item | cSidebarNavIcon"></span>
+  }
+  @if (!item?.icon && !item?.iconComponent) {
+    <span [ngClass]="item | cSidebarNavIcon"></span>
+  }
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
index 44266100..954834bb 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
@@ -1,7 +1,11 @@
 <a [ngClass]="getItemClass()"
    href="{{item.url}}"
    [cHtmlAttr]="item.attributes">
-  <i *ngIf="helper.hasIcon(item)" [ngClass]="getLabelIconClass()"></i>
+  @if (helper.hasIcon(item)) {
+    <i [ngClass]="getLabelIconClass()"></i>
+  }
   <ng-container>{{ item.name }}</ng-container>
-  <span *ngIf="helper.hasBadge(item)" [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
+  @if (helper.hasBadge(item)) {
+    <span [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
+  }
 </a>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
index a1b7b238..9be3223f 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 import { HtmlAttributesDirective } from '../../shared';
 import { SidebarNavHelper } from './sidebar-nav.service';
@@ -9,7 +9,7 @@ import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
   selector: 'c-sidebar-nav-label',
   templateUrl: './sidebar-nav-label.component.html',
   standalone: true,
-  imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass, NgIf]
+  imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
 })
 export class SidebarNavLabelComponent implements OnInit {
 
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
index fadc7999..43f3da10 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
@@ -1,53 +1,66 @@
-<ng-container [ngSwitch]="linkType">
-  <a *ngSwitchCase="'disabled'"
-     [ngClass]="item | cSidebarNavLink"
-     [cHtmlAttr]="item.attributes ?? {}"
-  >
-    <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}"></ng-container>
-    <c-sidebar-nav-link-content [item]="item"></c-sidebar-nav-link-content>
-    <span *ngIf="item.badge" [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
-  </a>
-  <a *ngSwitchCase="'external'"
-     [ngClass]="item | cSidebarNavLink"
-     [href]="href"
-     [cHtmlAttr]="item.attributes ?? {}"
-     (click)="linkClicked()"
-  >
-    <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}"></ng-container>
-    <c-sidebar-nav-link-content [item]="item"></c-sidebar-nav-link-content>
-    <span *ngIf="item.badge" [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
-  </a>
-  <a *ngSwitchDefault
-     [ngClass]="item | cSidebarNavLink"
-     [cHtmlAttr]="item.attributes ?? {}"
-     [target]="item.attributes?.['target']"
-     [queryParams]="item.linkProps?.queryParams ?? null"
-     [fragment]="item.linkProps?.fragment"
-     [queryParamsHandling]="item.linkProps?.queryParamsHandling"
-     [preserveFragment]="item.linkProps?.preserveFragment ?? false"
-     [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
-     [replaceUrl]="item.linkProps?.replaceUrl ?? false"
-     [state]="item.linkProps?.state ?? {}"
-     [routerLink]="item.url"
-     routerLinkActive="active"
-     [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
-     (click)="linkClicked()"
-  >
-<!--    [class.active]="linkActive"-->
-    <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}"></ng-container>
-    <c-sidebar-nav-link-content [item]="item"></c-sidebar-nav-link-content>
-    <span *ngIf="item.badge" [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
-  </a>
-</ng-container>
+@switch (linkType) {
+  @case ('disabled') {
+    <a [ngClass]="item | cSidebarNavLink"
+       [cHtmlAttr]="item.attributes ?? {}"
+    >
+      <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
+      <c-sidebar-nav-link-content [item]="item" />
+      @if (item.badge) {
+        <span [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
+      }
+    </a>
+  }
+  @case ('external') {
+    <a [ngClass]="item | cSidebarNavLink"
+       [href]="href"
+       [cHtmlAttr]="item.attributes ?? {}"
+       (click)="linkClicked()"
+    >
+      <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
+      <c-sidebar-nav-link-content [item]="item" />
+      @if (item.badge) {
+        <span [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
+      }
+    </a>
+  }
+  @default {
+    <a [ngClass]="item | cSidebarNavLink"
+       [cHtmlAttr]="item.attributes ?? {}"
+       [target]="item.attributes?.['target']"
+       [queryParams]="item.linkProps?.queryParams ?? null"
+       [fragment]="item.linkProps?.fragment"
+       [queryParamsHandling]="item.linkProps?.queryParamsHandling"
+       [preserveFragment]="item.linkProps?.preserveFragment ?? false"
+       [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
+       [replaceUrl]="item.linkProps?.replaceUrl ?? false"
+       [state]="item.linkProps?.state ?? {}"
+       [routerLink]="item.url"
+       routerLinkActive="active"
+       [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
+       (click)="linkClicked()"
+    >
+      <!--    [class.active]="linkActive"-->
+      <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}" />
+      <c-sidebar-nav-link-content [item]="item" />
+      @if (item.badge) {
+        <span [ngClass]="item | cSidebarNavBadge">{{ item.badge?.text }}</span>
+      }
+    </a>
+  }
+}
 
 <ng-template #iconTemplate let-item>
-  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>
-  <ng-template [ngIf]="item?.iconComponent">
+  @if (item?.icon) {
+    <i [ngClass]="item | cSidebarNavIcon"></i>
+  }
+  @if (item?.iconComponent) {
     <svg
       [cIcon]="item.iconComponent?.content"
       [name]="item.iconComponent?.name"
       [customClasses]="item | cSidebarNavIcon"
     ></svg>
-  </ng-template>
-  <span *ngIf="!item?.icon && !item?.iconComponent" [ngClass]="item | cSidebarNavIcon"></span>
+  }
+  @if (!item?.icon && !item?.iconComponent) {
+    <span [ngClass]="item | cSidebarNavIcon"></span>
+  }
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
index 4bacab78..149c3f7e 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { CommonModule, NgIf } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -16,13 +16,12 @@ import { IconDirective } from '@coreui/icons-angular';
 @Component({
   selector: 'c-sidebar-nav-link-content',
   template: `
-    <ng-container *ngIf="true">
-      <ng-container>{{item?.name ?? ''}}</ng-container>
-    </ng-container>
+    @if (true) {
+      <ng-container>{{ item?.name ?? '' }}</ng-container>
+    }
   `,
   providers: [SidebarNavHelper],
-  standalone: true,
-  imports: [NgIf]
+  standalone: true
 })
 export class SidebarNavLinkContentComponent {
   @Input() item?: INavData;
@@ -38,10 +37,11 @@ export class SidebarNavLinkContentComponent {
   providers: [SidebarNavHelper],
   standalone: true,
   imports: [
-    CommonModule,
     RouterModule,
     HtmlAttributesDirective,
     IconDirective,
+    NgClass,
+    NgTemplateOutlet,
     SidebarNavLinkContentComponent,
     SidebarNavLinkPipe,
     SidebarNavBadgePipe,
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
index 7295438c..1f282c13 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
@@ -1,42 +1,45 @@
-<ng-container *ngFor="let item of navItemsArray">
-  <ng-container [ngSwitch]="helper.itemType(item)">
-    <c-sidebar-nav-group
-      #rla="routerLinkActive"
-      *ngSwitchCase="'group'"
-      [dropdownMode]="dropdownMode"
-      [item]="item"
-      [ngClass]="item | cSidebarNavItemClass"
-      [routerLinkActiveOptions]="{exact: true}"
-      routerLinkActive="show"
-    >
-    </c-sidebar-nav-group>
-    <c-sidebar-nav-divider
-      *ngSwitchCase="'divider'"
-      [cHtmlAttr]="item.attributes ?? {}"
-      [item]="item"
-      [ngClass]="item | cSidebarNavItemClass">
-    </c-sidebar-nav-divider>
-    <c-sidebar-nav-title
-      *ngSwitchCase="'title'"
-      [cHtmlAttr]="item.attributes ?? {}"
-      [item]="item"
-      [ngClass]="item | cSidebarNavItemClass">
-    </c-sidebar-nav-title>
-    <c-sidebar-nav-label
-      *ngSwitchCase="'label'"
-      [item]="item"
-      [ngClass]="item | cSidebarNavItemClass">
-    </c-sidebar-nav-label>
-    <ng-container
-      *ngSwitchCase="'empty'">
-    </ng-container>
-    <c-sidebar-nav-link
-      (linkClick)="hideMobile()"
-      *ngSwitchDefault
-      [item]="item"
-      [ngClass]="item | cSidebarNavItemClass"
-    >
-    </c-sidebar-nav-link>
-  </ng-container>
-</ng-container>
-<ng-content></ng-content>
+@for (item of navItemsArray; track item) {
+  @switch (helper.itemType(item)) {
+    @case ('group') {
+      <c-sidebar-nav-group
+        #rla="routerLinkActive"
+        [dropdownMode]="dropdownMode"
+        [item]="item"
+        [ngClass]="item | cSidebarNavItemClass"
+        [routerLinkActiveOptions]="{exact: true}"
+        routerLinkActive="show"
+      />
+    }
+    @case ('divider') {
+      <c-sidebar-nav-divider
+        [cHtmlAttr]="item.attributes ?? {}"
+        [item]="item"
+        [ngClass]="item | cSidebarNavItemClass"
+      />
+    }
+    @case ('title') {
+      <c-sidebar-nav-title
+        [cHtmlAttr]="item.attributes ?? {}"
+        [item]="item"
+        [ngClass]="item | cSidebarNavItemClass"
+      />
+    }
+    @case ('label') {
+      <c-sidebar-nav-label
+        [item]="item"
+        [ngClass]="item | cSidebarNavItemClass"
+      />
+    }
+    @case ('empty') {
+      <ng-container />
+    }
+    @default {
+      <c-sidebar-nav-link
+        (linkClick)="hideMobile()"
+        [item]="item"
+        [ngClass]="item | cSidebarNavItemClass"
+      />
+    }
+  }
+}
+<ng-content />
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
index 28fabd22..d5b14c28 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
@@ -1,14 +1,5 @@
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import {
-  NgClass,
-  NgForOf,
-  NgIf,
-  NgStyle,
-  NgSwitch,
-  NgSwitchCase,
-  NgSwitchDefault,
-  NgTemplateOutlet
-} from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -52,7 +43,6 @@ import { IconDirective } from '@coreui/icons-angular';
     HtmlAttributesDirective,
     IconDirective,
     NgTemplateOutlet,
-    NgIf,
     NgClass,
     SidebarNavIconPipe,
     SidebarNavBadgePipe,
@@ -190,11 +180,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
   templateUrl: './sidebar-nav.component.html',
   standalone: true,
   imports: [
-    NgForOf,
     NgClass,
-    NgSwitch,
-    NgSwitchCase,
-    NgSwitchDefault,
     HtmlAttributesDirective,
     SidebarNavLinkComponent,
     SidebarNavLabelComponent,
diff --git a/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html b/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html
index c49175ee..1537b670 100644
--- a/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html
+++ b/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html
@@ -1,4 +1,6 @@
 <ng-container>
-  <ng-content></ng-content>
-  <button *ngIf="closeButton" [cToastClose]="toast" [style]="{outline: 0}" aria-label="close" cButtonClose class="ms-auto"></button>
+  <ng-content />
+  @if (closeButton) {
+    <button [cToastClose]="toast" [style]="{outline: 0}" aria-label="close" cButtonClose class="ms-auto"></button>
+  }
 </ng-container>
diff --git a/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.scss b/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.ts b/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.ts
index fe2ee271..9c57b599 100644
--- a/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.ts
+++ b/projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.ts
@@ -1,5 +1,4 @@
 import { Component, HostBinding, Input, Optional } from '@angular/core';
-import { NgIf } from '@angular/common';
 
 import { ButtonCloseDirective } from '../../button';
 import { ToastComponent } from '../toast/toast.component';
@@ -10,7 +9,7 @@ import { ToastCloseDirective } from '../toast-close.directive';
   templateUrl: './toast-header.component.html',
   exportAs: 'cToastHeader',
   standalone: true,
-  imports: [ToastCloseDirective, ButtonCloseDirective, NgIf]
+  imports: [ToastCloseDirective, ButtonCloseDirective]
 })
 export class ToastHeaderComponent {
 
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html
index 59a24c20..8b6964c3 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html
@@ -1,30 +1,34 @@
 <ng-container>
   <c-card-body [ngClass]="bodyClasses">
     <div>
-      <div *ngIf="!!value || templates?.widgetValueTemplate" class="fs-4 fw-semibold">
-        <ng-container *ngTemplateOutlet="templates?.widgetValueTemplate || defaultWidgetValueTemplate"></ng-container>
-      </div>
-      <div *ngIf="!!title || templates?.widgetTitleTemplate">
-        <ng-container *ngTemplateOutlet="templates?.widgetTitleTemplate || defaultWidgetTitleTemplate"></ng-container>
-      </div>
+      @if (!!value || templates?.widgetValueTemplate) {
+        <div class="fs-4 fw-semibold">
+          <ng-container *ngTemplateOutlet="templates?.widgetValueTemplate || defaultWidgetValueTemplate" />
+        </div>
+      }
+      @if (!!title || templates?.widgetTitleTemplate) {
+        <div>
+          <ng-container *ngTemplateOutlet="templates?.widgetTitleTemplate || defaultWidgetTitleTemplate" />
+        </div>
+      }
     </div>
-    <ng-container *ngTemplateOutlet="templates?.widgetActionTemplate || defaultWidgetActionTemplate"></ng-container>
+    <ng-container *ngTemplateOutlet="templates?.widgetActionTemplate || defaultWidgetActionTemplate" />
   </c-card-body>
-  <ng-container *ngTemplateOutlet="templates?.widgetChartTemplate || defaultWidgetChartTemplate"></ng-container>
+  <ng-container *ngTemplateOutlet="templates?.widgetChartTemplate || defaultWidgetChartTemplate" />
 </ng-container>
 
 <ng-template #defaultWidgetTitleTemplate>
-  {{title}}
+  {{ title }}
 </ng-template>
 
 <ng-template #defaultWidgetValueTemplate>
-  {{value}}
+  {{ value }}
 </ng-template>
 
 <ng-template #defaultWidgetChartTemplate>
-  <ng-content select=".chart-wrapper"></ng-content>
+  <ng-content select=".chart-wrapper" />
 </ng-template>
 
 <ng-template #defaultWidgetActionTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts
index 7a260678..4db927f2 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts
@@ -3,13 +3,13 @@ import { AfterContentInit, Component, ContentChildren, HostBinding, Input, Query
 import { Colors } from '../../coreui.types';
 import { TemplateIdDirective } from '../../shared';
 import { CardBodyComponent } from '../../card';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'c-widget-stat-a',
   templateUrl: './widget-stat-a.component.html',
   exportAs: 'cWidgetStatA',
-  imports: [CardBodyComponent, NgClass, NgIf, NgTemplateOutlet],
+  imports: [CardBodyComponent, NgClass, NgTemplateOutlet],
   standalone: true
 })
 export class WidgetStatAComponent implements AfterContentInit {
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html
index 21a4821c..3ade50ab 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html
@@ -1,8 +1,14 @@
 <c-card-body>
-  <div *ngIf="!!value" class="fs-4 fw-semibold">{{value}}</div>
-  <div *ngIf="!!title">{{title}}</div>
-  <ng-content></ng-content>
-  <small *ngIf="text" [ngClass]="inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'">
-    {{text}}
-  </small>
+  @if (!!value) {
+    <div class="fs-4 fw-semibold">{{ value }}</div>
+  }
+  @if (!!title) {
+    <div>{{ title }}</div>
+  }
+  <ng-content />
+  @if (text) {
+    <small [ngClass]="inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'">
+      {{ text }}
+    </small>
+  }
 </c-card-body>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts
index 2a503212..aa3bd9ab 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts
@@ -1,5 +1,5 @@
 import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 import { Colors } from '../../coreui.types';
 import { CardBodyComponent, CardComponent } from '../../card';
@@ -9,7 +9,7 @@ import { CardBodyComponent, CardComponent } from '../../card';
   templateUrl: './widget-stat-b.component.html',
   exportAs: 'cWidgetStatB',
   standalone: true,
-  imports: [CardBodyComponent, NgIf, NgClass]
+  imports: [CardBodyComponent, NgClass]
 })
 export class WidgetStatBComponent extends CardComponent {
 
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html
index 1a78f351..167db16a 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html
@@ -1,22 +1,28 @@
 <c-card-body>
-  <div *ngIf="icon || templates?.widgetIconTemplate" [ngClass]="iconClasses">
-    <ng-container *ngTemplateOutlet="templates?.widgetIconTemplate || defaultWidgetIconTemplate"></ng-container>
-  </div>
-  <div *ngIf="!!value" [ngClass]="valueClasses">
-    {{value}}
-  </div>
-  <div *ngIf="!!title" [ngClass]="titleClasses">
-    {{title}}
-  </div>
-  <ng-container *ngIf="templates?.widgetProgressTemplate">
-    <ng-container *ngTemplateOutlet="templates?.widgetProgressTemplate || defaultWidgetProgressTemplate"></ng-container>
-  </ng-container>
+  @if (icon || templates?.widgetIconTemplate) {
+    <div [ngClass]="iconClasses">
+      <ng-container *ngTemplateOutlet="templates?.widgetIconTemplate || defaultWidgetIconTemplate" />
+    </div>
+  }
+  @if (!!value) {
+    <div [ngClass]="valueClasses">
+      {{ value }}
+    </div>
+  }
+  @if (!!title) {
+    <div [ngClass]="titleClasses">
+      {{ title }}
+    </div>
+  }
+  @if (templates?.widgetProgressTemplate) {
+    <ng-container *ngTemplateOutlet="templates?.widgetProgressTemplate || defaultWidgetProgressTemplate" />
+  }
 </c-card-body>
 
 <ng-template #defaultWidgetIconTemplate>
-  {{icon}}
+  {{ icon }}
 </ng-template>
 
 <ng-template #defaultWidgetProgressTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts
index 149e03f0..664101d7 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.ts
@@ -10,14 +10,14 @@ import {
 
 import { CardBodyComponent, CardComponent } from '../../card';
 import { TemplateIdDirective } from '../../shared';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'c-widget-stat-c',
   templateUrl: './widget-stat-c.component.html',
   exportAs: 'cWidgetStatC',
   standalone: true,
-  imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet]
+  imports: [CardBodyComponent, NgClass, NgTemplateOutlet]
 })
 export class WidgetStatCComponent extends CardComponent implements AfterContentInit {
 
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html
index 810aad75..0d3f3275 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html
@@ -1,12 +1,14 @@
 <c-card-header [ngClass]="headerClasses">
-  <ng-content></ng-content>
+  <ng-content />
 </c-card-header>
 <c-card-body cRow class="text-center">
-  <ng-template [ngForOf]="values" let-i="index" let-item ngFor>
-    <div *ngIf="i % 2 !== 0" class="vr"></div>
+  @for (item of values; track item; let i = $index) {
+    @if (i % 2 !== 0) {
+      <div class="vr"></div>
+    }
     <c-col>
-      <div class="fs-5 fw-semibold">{{item.value}}</div>
-      <div class="text-uppercase text-medium-emphasis small">{{item.title}}</div>
+      <div class="fs-5 fw-semibold">{{ item.value }}</div>
+      <div class="text-uppercase text-medium-emphasis small">{{ item.title }}</div>
     </c-col>
-  </ng-template>
+  }
 </c-card-body>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts
index 2100b6a4..d24178b7 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.ts
@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 import { Colors } from '../../coreui.types';
 import { CardBodyComponent, CardHeaderComponent } from '../../card';
 import { ColComponent, RowDirective } from '../../grid';
-import { NgClass, NgForOf, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 
 export type WidgetStatDValue = {
   title?: string,
@@ -14,7 +14,7 @@ export type WidgetStatDValue = {
   templateUrl: './widget-stat-d.component.html',
   exportAs: 'cWidgetStatD',
   standalone: true,
-  imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass, NgForOf, NgIf]
+  imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass]
 })
 export class WidgetStatDComponent {
   constructor() { }
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html
index debefc45..1f13621c 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html
@@ -1,5 +1,9 @@
 <c-card-body class="text-center">
-  <div *ngIf="!!title" [ngClass]="titleClasses">{{title}}</div>
-  <div *ngIf="!!value" class="fs-6 fw-semibold py-3">{{value}}</div>
-  <ng-content></ng-content>
+  @if (!!title) {
+    <div [ngClass]="titleClasses">{{ title }}</div>
+  }
+  @if (!!value) {
+    <div class="fs-6 fw-semibold py-3">{{ value }}</div>
+  }
+  <ng-content />
 </c-card-body>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts
index b601c48d..50672677 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { CardBodyComponent, CardComponent } from '../../card';
 
 @Component({
@@ -7,7 +7,7 @@ import { CardBodyComponent, CardComponent } from '../../card';
   templateUrl: './widget-stat-e.component.html',
   exportAs: 'cWidgetStatE',
   standalone: true,
-  imports: [CardBodyComponent, NgIf, NgClass]
+  imports: [CardBodyComponent, NgClass]
 })
 export class WidgetStatEComponent extends CardComponent {
 
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html
index 35ee8d07..9f34b276 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html
@@ -1,22 +1,24 @@
 <ng-container>
   <c-card-body [ngClass]="cardBodyClasses">
     <div [ngClass]="iconClasses">
-      <ng-container *ngTemplateOutlet="templates?.widgetIconTemplate || defaultWidgetIconTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="templates?.widgetIconTemplate || defaultWidgetIconTemplate" />
     </div>
     <div>
-      <div [ngClass]="valueClasses">{{value}}</div>
-      <div [ngClass]="titleClasses">{{title}}</div>
+      <div [ngClass]="valueClasses">{{ value }}</div>
+      <div [ngClass]="titleClasses">{{ title }}</div>
     </div>
   </c-card-body>
-  <c-card-footer *ngIf="footer || templates?.widgetFooterTemplate">
-    <ng-container *ngTemplateOutlet="templates?.widgetFooterTemplate || defaultFooterIconTemplate"></ng-container>
-  </c-card-footer>
+  @if (footer || templates?.widgetFooterTemplate) {
+    <c-card-footer>
+      <ng-container *ngTemplateOutlet="templates?.widgetFooterTemplate || defaultFooterIconTemplate" />
+    </c-card-footer>
+  }
 </ng-container>
 
 <ng-template #defaultWidgetIconTemplate>
-  <span>{{icon}}</span>
+  <span>{{ icon }}</span>
 </ng-template>
 
 <ng-template #defaultFooterIconTemplate>
-  <span>{{footer}}</span>
+  <span>{{ footer }}</span>
 </ng-template>
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts
index 4bc48fe0..77990ae5 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.ts
@@ -7,7 +7,7 @@ import {
   Input,
   QueryList
 } from '@angular/core';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 import { Colors } from '../../coreui.types';
 import { TemplateIdDirective } from '../../shared';
@@ -18,7 +18,7 @@ import { CardBodyComponent, CardFooterComponent } from '../../card';
   templateUrl: './widget-stat-f.component.html',
   exportAs: 'cWidgetStatB',
   standalone: true,
-  imports: [CardBodyComponent, CardFooterComponent, NgClass, NgTemplateOutlet, NgIf]
+  imports: [CardBodyComponent, CardFooterComponent, NgClass, NgTemplateOutlet]
 })
 export class WidgetStatFComponent implements AfterContentInit {
 

From bd9c0e1c51940c3306f99a6e64867ae3c00aef2e Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:57:40 +0100
Subject: [PATCH 3/3] chore: ship v4.7.13

---
 CHANGELOG.md                                 | 7 +++++++
 package-lock.json                            | 4 ++--
 package.json                                 | 2 +-
 projects/coreui-angular-chartjs/package.json | 2 +-
 projects/coreui-angular/package.json         | 2 +-
 projects/coreui-icons-angular/package.json   | 2 +-
 6 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4285d02b..37f3415d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ---
 
+#### `4.7.13`
+
+- refactor(@coreui/angular): use control flow
+- fix(chartjs): canvas already in use, refactor
+
+---
+
 #### `4.7.12`
 
 - chore(dependencies): update
diff --git a/package-lock.json b/package-lock.json
index aa84545e..8b43615e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coreui-angular-dev",
-  "version": "4.7.12",
+  "version": "4.7.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coreui-angular-dev",
-      "version": "4.7.12",
+      "version": "4.7.13",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^17.1.2",
diff --git a/package.json b/package.json
index 186fd274..5708ce25 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coreui-angular-dev",
-  "version": "4.7.12",
+  "version": "4.7.13",
   "description": "CoreUI Components Library for Angular",
   "copyright": "Copyright 2023 creativeLabs Łukasz Holeczek",
   "license": "MIT",
diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json
index d49b7378..eb51aabf 100644
--- a/projects/coreui-angular-chartjs/package.json
+++ b/projects/coreui-angular-chartjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-chartjs",
-  "version": "4.7.12",
+  "version": "4.7.13",
   "description": "Angular wrapper component for Chart.js",
   "copyright": "Copyright 2023 creativeLabs Łukasz Holeczek",
   "license": "MIT",
diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json
index e1ade20e..34c18af3 100644
--- a/projects/coreui-angular/package.json
+++ b/projects/coreui-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular",
-  "version": "4.7.12",
+  "version": "4.7.13",
   "description": "CoreUI for Angular UI components library",
   "copyright": "Copyright 2023 creativeLabs Łukasz Holeczek",
   "license": "MIT",
diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json
index 9c73226a..fc36ebe8 100644
--- a/projects/coreui-icons-angular/package.json
+++ b/projects/coreui-icons-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/icons-angular",
-  "version": "4.7.12",
+  "version": "4.7.13",
   "description": "CoreUI Icons Angular component and service",
   "copyright": "Copyright 2023 creativeLabs Łukasz Holeczek",
   "license": "MIT",