diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 00000000..34c3b360
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,56 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+ - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
diff --git a/.gitignore b/.gitignore
index 5e916bd9..e909c25e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,6 +33,7 @@ speed-measure-plugin*.json
.history/*
# Miscellaneous
+.npmrc
/.angular/cache
.sass-cache/
/connect.lock
diff --git a/.prettierrc.js b/.prettierrc.js
index 3e85ffa2..1c04f8eb 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -3,5 +3,13 @@ module.exports = {
trailingComma: 'none',
singleQuote: true,
printWidth: 120,
- tabWidth: 2
+ tabWidth: 2,
+ overrides: [
+ {
+ files: '*.html',
+ options: {
+ parser: 'angular'
+ }
+ }
+ ]
};
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..34c3b360
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,56 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+ - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ca55e32..e5ab4b8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,42 @@
---
+#### `5.6.0`
+
+- chore(dependencies): update to `Angular 21`
+ - `@angular-devkit/schematics` @ "21.0.2" (was "20.3.12")
+ - `@angular/build` @ "21.0.2" (was "20.3.12")
+ - `@angular/cli` @ "21.0.2" (was "20.3.12")
+ - `@angular/compiler-cli` @ "21.0.3" (was "20.3.14")
+ - `@angular/language-service` @ "21.0.3" (was "20.3.14")
+ - `@angular/animations` @ "21.0.3" (was "20.3.14")
+ - `@angular/cdk` @ "21.0.2" (was "20.2.14")
+ - `@angular/common` @ "21.0.3" (was "20.3.14")
+ - `@angular/compiler` @ "21.0.3" (was "20.3.14")
+ - `@angular/core` @ "21.0.3" (was "20.3.14")
+ - `@angular/forms` @ "21.0.3" (was "20.3.14")
+ - `@angular/localize` @ "21.0.3" (was "20.3.14")
+ - `@angular/platform-browser` @ "21.0.3" (was "20.3.14")
+ - `@angular/router` @ "21.0.3" (was "20.3.14")
+ - `ng-packagr` @ "21.0.0" (was "20.3.2")
+ - `zone.js` @ "0.16.0" (was "0.15.1")
+ - `@types/node` @ "24.10.2" (was "22.19.1")
+ - `angular-eslint` @ "21.1.0" (was "20.7.0")
+ - `jasmine-core` @ "5.13.0" (was "5.12.1")
+ - `prettier` @ "3.7.4" (was "3.6.2")
+ - `typescript-eslint` @ "8.49.0" (was "8.48.0")
+ - remove `@angular/platform-browser-dynamic`
+ - test: updates, cleanups and fixes
+ - refactor(sidebar.service): cleanup
+ - refactor(dropdown.service): cleanup
+ - refactor(sidebar-nav): signal inputs, test
+ - refactor(sidebar-nav.service): SidebarNavHelper providedIn: root
+ - refactor: migration from NgClass to class bindings
+ - refactor: migration from NgStyle to style bindings
+ - test: RouterTestingModule migration
+
+---
+
#### `5.5.25`
- fix(backdrop): modal backdrop not removed on zoneless - close #240 - thanks @anyplin
diff --git a/CLI.md b/CLI.md
index 5bc98951..88ad3213 100644
--- a/CLI.md
+++ b/CLI.md
@@ -1,6 +1,6 @@
-# @coreui/angular v5
+# @coreui/angular v5.6
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.2.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
## Development server
diff --git a/README.md b/README.md
index 7a0f6028..f82c2680 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
CoreUI Components for Angular
- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8
+ Angular Components Library built on top of Bootstrap 5.x and TypeScript 5.9
Explore CoreUI for Angular docs and examples »
-CoreUI Angular wrapper for Chart.js v4
+CoreUI Angular wrapper for Chart.js v4.5
Explore @coreui/angular-chartjs docs & examples »
@@ -35,18 +35,18 @@ Featured CoreUI for Angular libraries:
### Status
![angular][angular-badge]
-[![npm package][npm-badge-v5-ng20]][npm]
+[![npm package][npm-badge-v5-ng21]][npm]
[![npm package][npm-badge-latest]][npm]
[![npm package][npm-badge-next]][npm]
[![NPM downloads][npm-download]][npm]
[](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml)
-[npm-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng20?style=flat-square&color=brightgreen
+[npm-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng21?style=flat-square&color=brightgreen
[npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen
[npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red
[npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
[npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
-[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular
+[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular
##### install:
@@ -57,9 +57,9 @@ ng add @coreui/angular-chartjs
- or npm
```bash
-npm install chart.js@4
+npm install chart.js@4.5
npm install @coreui/chartjs@~4.1
-npm install @coreui/angular-chartjs@~5.5
+npm install @coreui/angular-chartjs@~5.6
````
##### import:
diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json
index 3f9d1570..151f8239 100644
--- a/projects/coreui-angular-chartjs/package.json
+++ b/projects/coreui-angular-chartjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/angular-chartjs",
- "version": "5.5.25",
+ "version": "5.6.0",
"description": "Angular wrapper component for Chart.js",
"copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
"license": "MIT",
@@ -25,7 +25,7 @@
"url": "https://github.com/coreui/coreui-angular/issues"
},
"peerDependencies": {
- "@angular/core": "^20.3.14",
+ "@angular/core": "^21.0.0",
"@coreui/chartjs": "^4.1.0",
"chart.js": "^4.5.0"
},
diff --git a/projects/coreui-angular-chartjs/src/test.ts b/projects/coreui-angular-chartjs/src/test.ts
index f17fa2d1..0f93ecb4 100644
--- a/projects/coreui-angular-chartjs/src/test.ts
+++ b/projects/coreui-angular-chartjs/src/test.ts
@@ -3,14 +3,9 @@
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(),
- { teardown: { destroyAfterEach: true }},
-);
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+ teardown: { destroyAfterEach: true }
+});
diff --git a/projects/coreui-angular/README.md b/projects/coreui-angular/README.md
index 7a0f6028..f82c2680 100644
--- a/projects/coreui-angular/README.md
+++ b/projects/coreui-angular/README.md
@@ -11,7 +11,7 @@
CoreUI Components for Angular
- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8
+ Angular Components Library built on top of Bootstrap 5.x and TypeScript 5.9
Explore CoreUI for Angular docs and examples »
`
+ template: `
`
})
export class TestComponent {
- orientation: 'top' | 'bottom' | 'start' | 'end' | undefined = undefined;
+ readonly orientation = input<'top' | 'bottom' | 'start' | 'end' | undefined>(undefined);
}
describe('CardImgDirective', () => {
@@ -34,16 +34,16 @@ describe('CardImgDirective', () => {
});
it('should have css classes', () => {
- component.orientation = 'start';
+ fixture.componentRef.setInput('orientation', 'start');
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('rounded-start');
- component.orientation = 'end';
+ fixture.componentRef.setInput('orientation', 'end');
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('rounded-end');
- component.orientation = 'top';
+ fixture.componentRef.setInput('orientation', 'top');
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('card-img-top');
- component.orientation = 'bottom';
+ fixture.componentRef.setInput('orientation', 'bottom');
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('card-img-bottom');
});
diff --git a/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts b/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts
index 5212c6fa..4977a7c8 100644
--- a/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts
@@ -1,5 +1,5 @@
import { CollapseDirective } from './collapse.directive';
-import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, signal } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
@@ -7,12 +7,12 @@ import { By } from '@angular/platform-browser';
class MockElementRef extends ElementRef {}
@Component({
- template: 'Test
',
+ template: 'Test
',
imports: [CollapseDirective]
})
class TestComponent {
- horizontal = false;
- visible = false;
+ readonly horizontal = signal(false);
+ readonly visible = signal(false);
}
describe('CollapseDirective', () => {
@@ -29,7 +29,7 @@ describe('CollapseDirective', () => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
elementRef = fixture.debugElement.query(By.directive(CollapseDirective));
- component.visible = false;
+ component.visible.set(false);
fixture.detectChanges(); // initial binding
});
@@ -43,13 +43,13 @@ describe('CollapseDirective', () => {
it('should have css classes', fakeAsync(() => {
expect(elementRef.nativeElement.style.display).toContain('none');
expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
- component.horizontal = true;
- component.visible = true;
+ component.horizontal.set(true);
+ component.visible.set(true);
fixture.detectChanges();
expect(elementRef.nativeElement).toHaveClass('collapse-horizontal');
expect(elementRef.nativeElement.style.display).toBe('');
- component.horizontal = false;
- component.visible = false;
+ component.horizontal.set(false);
+ component.visible.set(false);
fixture.detectChanges();
expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
}));
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts
index ebe72672..baa4124e 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DropdownService } from '../dropdown.service';
@@ -13,14 +13,20 @@ class MockElementRef extends ElementRef {}
template: `
-
`,
imports: [ButtonCloseDirective, DropdownComponent, DropdownMenuDirective, DropdownCloseDirective]
})
class TestComponent {
- disabled = false;
+ readonly disabled = signal(false);
readonly dropdown = viewChild(DropdownComponent);
}
@@ -38,7 +44,7 @@ describe('DropdownCloseDirective', () => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
elementRef = fixture.debugElement.query(By.directive(DropdownCloseDirective));
- component.disabled = false;
+ component.disabled.set(false);
fixture.detectChanges(); // initial binding
});
@@ -53,7 +59,7 @@ describe('DropdownCloseDirective', () => {
expect(elementRef.nativeElement).not.toHaveClass('disabled');
expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBeNull();
expect(elementRef.nativeElement.getAttribute('tabindex')).toBe('0');
- component.disabled = true;
+ component.disabled.set(true);
fixture.detectChanges();
expect(elementRef.nativeElement).toHaveClass('disabled');
expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBe('true');
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts
index b5722f2e..5f260e1f 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
@@ -14,7 +14,7 @@ class MockElementRef extends ElementRef {}
-
+
Action
@@ -24,8 +24,8 @@ class MockElementRef extends ElementRef {}
imports: [DropdownComponent, DropdownMenuDirective, DropdownItemDirective]
})
class TestComponent {
- disabled = false;
- active = false;
+ readonly disabled = signal(false);
+ readonly active = signal(false);
readonly dropdown = viewChild(DropdownComponent);
readonly item = viewChild(DropdownItemDirective);
}
@@ -46,7 +46,7 @@ describe('DropdownItemDirective', () => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
elementRef = fixture.debugElement.query(By.directive(DropdownItemDirective));
- component.disabled = false;
+ component.disabled.set(false);
fixture.detectChanges(); // initial binding
});
@@ -62,8 +62,8 @@ describe('DropdownItemDirective', () => {
expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBeNull();
expect(elementRef.nativeElement.getAttribute('aria-current')).toBeNull();
expect(elementRef.nativeElement.getAttribute('tabindex')).toBe('0');
- component.disabled = true;
- component.active = true;
+ component.disabled.set(true);
+ component.active.set(true);
fixture.detectChanges();
expect(elementRef.nativeElement).toHaveClass('disabled');
expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBe('true');
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts
index 4f2c1c5f..2e742153 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, signal, viewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DropdownService } from '../dropdown.service';
@@ -13,7 +13,7 @@ class MockElementRef extends ElementRef {}
template: `
Dropdown button
-
+
Action
@@ -23,8 +23,8 @@ class MockElementRef extends ElementRef {}
imports: [DropdownComponent, DropdownMenuDirective, DropdownItemDirective, ButtonDirective, DropdownToggleDirective]
})
class TestComponent {
- visible = true;
- alignment?: string;
+ readonly visible = signal(true);
+ readonly alignment = signal('');
readonly dropdown = viewChild(DropdownComponent);
readonly menu = viewChild(DropdownMenuDirective);
readonly item = viewChild(DropdownItemDirective);
@@ -49,7 +49,7 @@ describe('DropdownMenuDirective', () => {
dropdownRef = fixture.debugElement.query(By.directive(DropdownComponent));
elementRef = fixture.debugElement.query(By.directive(DropdownMenuDirective));
itemRef = fixture.debugElement.query(By.directive(DropdownItemDirective));
- component.visible = true;
+ component.visible.set(true);
fixture.detectChanges(); // initial binding
});
@@ -61,25 +61,25 @@ describe('DropdownMenuDirective', () => {
});
it('should have css classes', fakeAsync(() => {
- component.visible = false;
+ component.visible.set(false);
fixture.detectChanges();
expect(dropdownRef.nativeElement).not.toHaveClass('show');
expect(elementRef.nativeElement).toHaveClass('dropdown-menu');
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
expect(elementRef.nativeElement).not.toHaveClass('show');
- component.visible = true;
- component.alignment = 'end';
+ component.visible.set(true);
+ component.alignment.set('end');
fixture.detectChanges();
expect(dropdownRef.nativeElement).toHaveClass('show');
expect(elementRef.nativeElement).toHaveClass('dropdown-menu-end');
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
expect(elementRef.nativeElement).toHaveClass('show');
- component.alignment = 'start';
+ component.alignment.set('start');
fixture.detectChanges();
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
expect(elementRef.nativeElement).toHaveClass('dropdown-menu-start');
- component.alignment = undefined;
+ component.alignment.set('');
fixture.detectChanges();
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-end');
expect(elementRef.nativeElement).not.toHaveClass('dropdown-menu-start');
@@ -89,7 +89,7 @@ describe('DropdownMenuDirective', () => {
expect(document.activeElement).not.toEqual(elementRef.nativeElement);
elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
- component.visible = true;
+ component.visible.set(true);
fixture.detectChanges();
elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
elementRef.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown.service.ts b/projects/coreui-angular/src/lib/dropdown/dropdown.service.ts
index 3378607a..2f1df5ac 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown.service.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown.service.ts
@@ -6,13 +6,14 @@ export interface IDropdownState {
dropdown?: any;
}
-@Injectable()
+@Injectable({
+ providedIn: 'root'
+})
export class DropdownService {
-
- private dropdownState = new BehaviorSubject({});
- dropdownState$ = this.dropdownState.asObservable();
+ readonly #dropdownState = new BehaviorSubject({});
+ readonly dropdownState$ = this.#dropdownState.asObservable();
toggle(state: IDropdownState): void {
- this.dropdownState.next(state);
+ this.#dropdownState.next(state);
}
}
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.spec.ts
index fdedf013..c74a2b47 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.spec.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.spec.ts
@@ -1,7 +1,7 @@
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { DropdownComponent, DropdownToggleDirective } from './dropdown.component';
-import { Component, DebugElement, DOCUMENT, ElementRef } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, signal } from '@angular/core';
import { DropdownService } from '../dropdown.service';
import { By } from '@angular/platform-browser';
import { DropdownMenuDirective } from '../dropdown-menu/dropdown-menu.directive';
@@ -36,7 +36,7 @@ class MockElementRef extends ElementRef {}
@Component({
template: `
-
+
Action
+
Label
@@ -15,9 +15,9 @@ import { By } from '@angular/platform-browser';
imports: [FormCheckInputDirective, FormCheckComponent, FormCheckLabelDirective]
})
class TestComponent {
- inline = true;
- reverse = true;
- switch = false;
+ readonly inline = signal(true);
+ readonly reverse = signal(true);
+ readonly switch = signal(false);
}
describe('FormCheckComponent', () => {
@@ -65,9 +65,9 @@ describe('FormCheckComponent Test', () => {
expect(debugElement.nativeElement).not.toHaveClass('form-switch-xl');
expect(debugElement.nativeElement).toHaveClass('form-check-inline');
expect(debugElement.nativeElement).toHaveClass('form-check-reverse');
- testFixture.componentInstance.switch = true;
- testFixture.componentInstance.inline = false;
- testFixture.componentInstance.reverse = false;
+ testFixture.componentInstance.switch.set(true);
+ testFixture.componentInstance.inline.set(false);
+ testFixture.componentInstance.reverse.set(false);
testFixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('form-switch');
expect(debugElement.nativeElement).toHaveClass('form-switch-xl');
diff --git a/projects/coreui-angular/src/lib/grid/gutter.directive.spec.ts b/projects/coreui-angular/src/lib/grid/gutter.directive.spec.ts
index 144458fe..02ca964f 100644
--- a/projects/coreui-angular/src/lib/grid/gutter.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/grid/gutter.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, signal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { GutterDirective } from './gutter.directive';
@@ -6,10 +6,10 @@ import { GutterBreakpoints, Gutters, IGutterObject } from './gutter.type';
@Component({
imports: [GutterDirective],
- template: '
'
+ template: '
'
})
export class TestComponent {
- gutter: IGutterObject | GutterBreakpoints | Gutters = 5;
+ readonly gutter = signal(5);
}
describe('GutterDirective', () => {
@@ -34,11 +34,11 @@ describe('GutterDirective', () => {
it('should have css class', () => {
expect(debugElement.nativeElement).toHaveClass('g-5');
- fixture.componentInstance.gutter = { gx: 2, gy: 1 };
+ fixture.componentInstance.gutter.set({ gx: 2, gy: 1 });
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('gx-2');
expect(debugElement.nativeElement).toHaveClass('gy-1');
- fixture.componentInstance.gutter = { md: { g: 3 } };
+ fixture.componentInstance.gutter.set({ md: { g: 3 } });
fixture.detectChanges();
expect(debugElement.nativeElement).toHaveClass('g-md-3');
});
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 4d4c6216..8b522fcf 100644
--- a/projects/coreui-angular/src/lib/header/header/header.component.html
+++ b/projects/coreui-angular/src/lib/header/header/header.component.html
@@ -1,5 +1,5 @@
@if (!!container()) {
-
+
} @else {
diff --git a/projects/coreui-angular/src/lib/header/header/header.component.spec.ts b/projects/coreui-angular/src/lib/header/header/header.component.spec.ts
index b8713b3b..b388177b 100644
--- a/projects/coreui-angular/src/lib/header/header/header.component.spec.ts
+++ b/projects/coreui-angular/src/lib/header/header/header.component.spec.ts
@@ -1,6 +1,5 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
import { HeaderComponent } from './header.component';
@@ -11,10 +10,7 @@ describe('HeaderComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [
- RouterTestingModule.withRoutes([]),
- HeaderComponent
- ]
+ imports: [HeaderComponent, RouterModule.forRoot([])]
}).compileComponents();
}));
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 097b56c0..0693ba49 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,4 @@
import { Component, computed, input, InputSignal } from '@angular/core';
-import { NgClass } from '@angular/common';
import { Positions } from '../../coreui.types';
@@ -8,7 +7,6 @@ type Container = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
@Component({
selector: 'c-header, [c-header]',
templateUrl: './header.component.html',
- imports: [NgClass],
exportAs: 'cHeader',
host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
})
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.html b/projects/coreui-angular/src/lib/navbar/navbar.component.html
index 86c946dd..65f69925 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.html
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.html
@@ -1,7 +1,7 @@
-
+
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
index c2af15db..397d186b 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -12,7 +12,7 @@ import {
OnDestroy,
signal
} from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
import { Subscription } from 'rxjs';
import { CollapseDirective } from '../collapse';
@@ -25,7 +25,7 @@ import { ThemeDirective } from '../shared';
@Component({
selector: 'c-navbar',
templateUrl: './navbar.component.html',
- imports: [NgClass, NgTemplateOutlet],
+ imports: [NgTemplateOutlet],
hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
})
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
index fe5b272c..4e7cae4e 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
+++ b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
@@ -1,3 +1,3 @@
-
+
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
index f470d881..277d6d54 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
+++ b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
@@ -1,10 +1,8 @@
import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
@Component({
selector: 'c-pagination',
templateUrl: './pagination.component.html',
- imports: [NgClass],
host: {
'[attr.role]': 'role()'
}
diff --git a/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts b/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
index 745a071b..b1a73464 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
@@ -5,7 +5,9 @@ import {
DebugElement,
DOCUMENT,
ElementRef,
+ input,
Renderer2,
+ signal,
ViewContainerRef
} from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
@@ -15,13 +17,14 @@ import { PopoverDirective } from './popover.directive';
import { Triggers } from '../coreui.types';
@Component({
- template: 'Test ',
+ template:
+ '{{content}} ',
imports: [PopoverDirective]
})
export class TestComponent {
- content = 'Test';
- visible = false;
- trigger: Triggers[] = ['hover', 'click'];
+ readonly content = input('Test');
+ readonly visible = signal(false);
+ readonly trigger: Triggers[] = ['hover', 'click'];
}
class MockElementRef extends ElementRef {}
@@ -61,11 +64,11 @@ describe('PopoverDirective', () => {
it('should have css classes', fakeAsync(() => {
expect(document.querySelector('.popover.show')).toBeNull();
- component.visible = true;
+ fixture.componentInstance.visible.set(true);
fixture.detectChanges();
tick(500);
expect(document.querySelector('.popover.show')).toBeTruthy();
- component.visible = false;
+ fixture.componentInstance.visible.set(false);
fixture.detectChanges();
tick(500);
expect(document.querySelector('.popover.show')).toBeNull();
@@ -73,7 +76,7 @@ describe('PopoverDirective', () => {
it('should set popover on and off', fakeAsync(() => {
fixture.autoDetectChanges();
- component.visible = false;
+ fixture.componentInstance.visible.set(false);
expect(document.querySelector('.popover.show')).toBeNull();
debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
tick(500);
@@ -85,7 +88,7 @@ describe('PopoverDirective', () => {
it('should toggle popover', fakeAsync(() => {
fixture.autoDetectChanges();
- component.visible = false;
+ fixture.componentInstance.visible.set(false);
expect(document.querySelector('.popover.show')).toBeNull();
debugElement.nativeElement.dispatchEvent(new Event('click'));
tick(500);
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.html b/projects/coreui-angular/src/lib/popover/popover/popover.component.html
index afa937fe..2443a99a 100644
--- a/projects/coreui-angular/src/lib/popover/popover/popover.component.html
+++ b/projects/coreui-angular/src/lib/popover/popover/popover.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.ts b/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
index 70175099..ffd4b3c8 100644
--- a/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
+++ b/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
@@ -11,12 +11,11 @@ import {
viewChild,
ViewContainerRef
} from '@angular/core';
-import { NgClass } from '@angular/common';
+
@Component({
selector: 'c-popover',
templateUrl: './popover.component.html',
- imports: [NgClass],
host: {
class: 'popover fade bs-popover-auto',
'[class]': 'hostClasses()',
diff --git a/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts b/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts
index 41a8f1e0..eb422ebc 100644
--- a/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts
@@ -1,14 +1,14 @@
-import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement, ElementRef, input, Renderer2 } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ThemeDirective } from './theme.directive';
import { By } from '@angular/platform-browser';
@Component({
imports: [ThemeDirective],
- template: '
'
+ template: '
'
})
export class TestComponent {
- theme!: 'dark' | 'light' | undefined;
+ readonly theme = input<'dark' | 'light' | undefined>();
}
class MockElementRef extends ElementRef {}
@@ -36,13 +36,13 @@ describe('ThemeDirective', () => {
it('should set data-coreui-theme attribute', () => {
fixture.detectChanges();
expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
- fixture.componentInstance.theme = 'dark';
+ fixture.componentRef.setInput('theme', 'dark');
fixture.detectChanges();
expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('dark');
- fixture.componentInstance.theme = 'light';
+ fixture.componentRef.setInput('theme', 'light');
fixture.detectChanges();
expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('light');
- fixture.componentInstance.theme = undefined;
+ fixture.componentRef.setInput('theme', undefined);
fixture.detectChanges();
expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
});
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 0a0b9008..059a018b 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,10 +1,10 @@
@if (brandImg()) {
@if (brandFull()) {
-
} @else {
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 2d6b061b..cc30dbf9 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,4 @@
import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
import { RouterLink, type UrlTree } from '@angular/router';
import { HtmlAttributesDirective } from '../../shared';
@@ -7,7 +6,7 @@ import { HtmlAttributesDirective } from '../../shared';
@Component({
selector: 'c-sidebar-brand',
templateUrl: './sidebar-brand.component.html',
- imports: [RouterLink, HtmlAttributesDirective, NgClass],
+ imports: [RouterLink, HtmlAttributesDirective],
host: { class: 'sidebar-brand' }
})
export class SidebarBrandComponent {
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 1967df91..5e66445a 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
@@ -1,29 +1,30 @@
+@let grpItem = item();
- {{ item.name }}
- @if (helper.hasBadge(item)) {
- {{ item.badge.text }}
+ {{ grpItem?.name }}
+ @if (grpItem?.badge) {
+ {{ grpItem?.badge?.text }}
}
-
+
@if (item?.icon) {
-
}
@if (item?.iconComponent) {
@@ -34,6 +35,6 @@
/>
}
@if (!item?.icon && !item?.iconComponent) {
-
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
index b6be615f..b0507707 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
@@ -11,13 +11,9 @@ describe('SidebarNavGroupComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [
- NoopAnimationsModule,
- SidebarNavGroupComponent
- ],
+ imports: [NoopAnimationsModule, SidebarNavGroupComponent],
providers: [provideRouter([])]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -46,7 +42,7 @@ describe('SidebarNavGroupComponent', () => {
}
]
};
- component.item = item;
+ fixture.componentRef.setInput('item', item);
fixture.detectChanges();
});
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 6cd272be..1bc6eb93 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,12 +1,12 @@
@let labelItem = item();
@if (helper.hasIcon(labelItem)) {
- {{ labelItem.name }}
@if (helper.hasBadge(labelItem)) {
- {{ labelItem.badge?.text ?? '' }}
+ {{ labelItem.badge?.text ?? '' }}
}
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 17f4b9a1..57d816a4 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,4 @@
import { Component, computed, inject, input } from '@angular/core';
-import { NgClass } from '@angular/common';
import { HtmlAttributesDirective } from '../../shared';
import { SidebarNavHelper } from './sidebar-nav.service';
@@ -9,7 +8,7 @@ import { INavData } from './sidebar-nav';
@Component({
selector: 'c-sidebar-nav-label',
templateUrl: './sidebar-nav-label.component.html',
- imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
+ imports: [HtmlAttributesDirective, SidebarNavBadgePipe]
})
export class SidebarNavLabelComponent {
readonly helper = inject(SidebarNavHelper);
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 1b864573..d6b7f25b 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
@@ -2,20 +2,20 @@
@switch (linkType) {
@case ('disabled') {
-
+
{{ linkItem.badge?.text }}
+ {{ linkItem.badge?.text }}
}
}
@case ('external') {
-
+
{{ linkItem.badge?.text }}
+ {{ linkItem.badge?.text }}
}
}
@@ -23,7 +23,7 @@
{{ linkItem.badge?.text }}
+ {{ linkItem.badge?.text }}
}
}
}
-
+
@if (item?.icon) {
-
}
@if (item?.iconComponent) {
@@ -59,6 +59,6 @@
>
}
@if (!item?.icon && !item?.iconComponent) {
-
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 afd96df8..03355bc0 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,4 +1,4 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
import { Component, inject, input, OnDestroy, OnInit, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
@@ -42,8 +42,7 @@ export class SidebarNavLinkContentComponent {
SidebarNavLinkPipe,
SidebarNavBadgePipe,
SidebarNavIconPipe,
- NgTemplateOutlet,
- NgClass
+ NgTemplateOutlet
]
})
export class SidebarNavLinkComponent implements OnInit, OnDestroy {
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 c3976dc0..010558fe 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,34 +1,34 @@
-@for (item of navItemsArray; track item) {
- @switch (helper.itemType(item)) {
+@for (nItem of navItemsArray(); track nItem) {
+ @switch (helper.itemType(nItem)) {
@case ('group') {
;
}
- @Input() item: any;
- @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
- @Input() show?: boolean;
- @Input({ transform: booleanAttribute }) compact?: boolean;
+ readonly item = input();
+ readonly dropdownMode = input<'path' | 'none' | 'close'>('path');
+ readonly show = input();
+ readonly compact = input(undefined, { transform: booleanAttribute });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
'nav-group': true,
- show: this.open
+ show: this.open()
};
- }
+ });
- @ViewChild(forwardRef(() => SidebarNavComponent), { read: ElementRef }) sidebarNav!: ElementRef;
+ readonly sidebarNav = viewChild.required(
+ forwardRef(() => SidebarNavComponent),
+ { read: ElementRef }
+ );
navigationEndObservable: Observable;
navSubscription!: Subscription;
navGroupSubscription!: Subscription;
- public open!: boolean;
- public navItems: INavData[] = [];
- public display: any = { display: 'block' };
+ readonly open = signal(undefined);
+ readonly navItems = signal([]);
+ readonly display = signal({ display: 'block' });
ngOnInit(): void {
- this.navItems = [...this.item.children];
+ this.navItems.set([...(this.item()?.children ?? [])]);
this.navSubscription = this.navigationEndObservable.subscribe((event: NavigationEnd) => {
- if (this.dropdownMode !== 'none') {
+ if (this.dropdownMode() !== 'none') {
const samePath = this.samePath(event.url);
this.openGroup(samePath);
}
@@ -120,8 +124,12 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
}
this.navGroupSubscription = this.#sidebarNavGroupService.sidebarNavGroupState$.subscribe((next) => {
- if (this.dropdownMode === 'close' && next.sidebarNavGroup && next.sidebarNavGroup !== this) {
- if (next.sidebarNavGroup.item.url.startsWith(this.item.url)) {
+ if (this.dropdownMode() === 'close' && next.sidebarNavGroup && next.sidebarNavGroup !== this) {
+ const url = next.sidebarNavGroup.item()?.url ?? [];
+ const normUrl = Array.isArray(url) ? this.#router.createUrlTree(url).toString() : url;
+ const itemUrl = this.item()?.url ?? [];
+ const normItemUrl = Array.isArray(normUrl) ? this.#router.createUrlTree(normUrl).toString() : normUrl;
+ if (normUrl.startsWith(normItemUrl)) {
return;
}
if (this.samePath(this.#router.routerState.snapshot.url)) {
@@ -135,7 +143,8 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
samePath(url: string): boolean {
// console.log('item:', this.item.name, this.item.url, 'url:', url);
- const itemArray = this.item.url?.split('/');
+ const itemUrl = this.item()?.url ?? [];
+ const itemArray = Array.isArray(itemUrl) ? itemUrl : itemUrl.split('/');
const urlArray = url.split('/');
return itemArray?.every((value: string, index: number) => {
// console.log(value === urlArray[index], 'value:', value, 'index:', index, urlArray[index], url);
@@ -144,14 +153,14 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
}
openGroup(open: boolean): void {
- this.open = open;
+ this.open.set(open);
}
toggleGroup($event: any): void {
$event.preventDefault();
- this.openGroup(!this.open);
- if (this.open) {
- this.#sidebarNavGroupService.toggle({ open: this.open, sidebarNavGroup: this });
+ this.openGroup(!this.open());
+ if (this.open()) {
+ this.#sidebarNavGroupService.toggle({ open: this.open(), sidebarNavGroup: this });
}
}
@@ -160,9 +169,9 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
}
onAnimationStart($event: AnimationEvent) {
- this.display = { display: 'block' };
+ this.display.set({ display: 'block' });
setTimeout(() => {
- const host = this.sidebarNav?.nativeElement;
+ const host = this.sidebarNav()?.nativeElement;
if ($event.toState === 'open' && host) {
this.#renderer.setStyle(host, 'height', `${host['scrollHeight']}px`);
}
@@ -171,13 +180,13 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
onAnimationDone($event: AnimationEvent) {
setTimeout(() => {
- const host = this.sidebarNav?.nativeElement;
+ const host = this.sidebarNav()?.nativeElement;
if ($event.toState === 'open' && host) {
this.#renderer.setStyle(host, 'height', 'auto');
}
if ($event.toState === 'closed') {
setTimeout(() => {
- this.display = null;
+ this.display.set(null);
});
}
});
@@ -188,7 +197,6 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
selector: 'c-sidebar-nav',
templateUrl: './sidebar-nav.component.html',
imports: [
- NgClass,
HtmlAttributesDirective,
SidebarNavLinkComponent,
SidebarNavLabelComponent,
@@ -197,7 +205,11 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
forwardRef(() => SidebarNavGroupComponent),
SidebarNavItemClassPipe,
RouterModule
- ]
+ ],
+ host: {
+ '[class]': 'hostClasses()',
+ '[attr.role]': 'role()'
+ }
})
export class SidebarNavComponent implements OnChanges {
readonly sidebar = inject(SidebarComponent, { optional: true });
@@ -207,33 +219,31 @@ export class SidebarNavComponent implements OnChanges {
readonly #hostElement = inject(ElementRef);
readonly #sidebarService = inject(SidebarService);
- @Input() navItems?: INavData[] = [];
- @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
- @Input({ transform: booleanAttribute }) groupItems?: boolean;
- @Input({ transform: booleanAttribute }) compact?: boolean;
+ readonly navItems = input([]);
+ readonly dropdownMode = input<'path' | 'none' | 'close'>('path');
+ readonly groupItems = input(undefined, { transform: booleanAttribute });
+ readonly compact = input(undefined, { transform: booleanAttribute });
+ readonly role = input('navigation');
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const groupItems = this.groupItems();
return {
- 'sidebar-nav': !this.groupItems,
- 'nav-group-items': this.groupItems,
- compact: this.groupItems && this.compact
+ 'sidebar-nav': !groupItems,
+ 'nav-group-items': groupItems,
+ compact: groupItems && this.compact()
};
- }
+ });
// @HostBinding('class.nav-group-items')
// get sidebarNavGroupItemsClass(): boolean {
// return !!this.groupItems;
// }
- @HostBinding('attr.role')
- @Input()
- role = 'navigation';
-
- public navItemsArray: INavData[] = [];
+ readonly navItemsArray = signal([]);
public ngOnChanges(changes: SimpleChanges): void {
- this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
+ const navItems = this.navItems();
+ this.navItemsArray.set(Array.isArray(navItems) ? navItems.slice() : []);
}
public hideMobile(): void {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
index f0f2f887..28946536 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
@@ -1,12 +1,11 @@
import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router, Routes } from '@angular/router';
+import { Router, RouterModule, Routes } from '@angular/router';
import { SidebarNavHelper } from './sidebar-nav.service';
describe('SidebarNavHelper', () => {
let service: SidebarNavHelper;
- let router: RouterTestingModule;
+ let router: RouterModule;
const routes: Routes = [
{ path: 'dashboard', redirectTo: 'home', pathMatch: 'full' },
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }
@@ -14,7 +13,7 @@ describe('SidebarNavHelper', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [RouterTestingModule.withRoutes(routes)],
+ imports: [RouterModule.forRoot(routes)],
providers: [SidebarNavHelper]
});
@@ -28,21 +27,26 @@ describe('SidebarNavHelper', () => {
it('should return itemType', () => {
expect(service.itemType({ divider: true })).toEqual('divider');
expect(service.itemType({ title: true })).toEqual('title');
- expect(service.itemType({
- children: [{
- name: 'Dropdown',
- url: '/dashboard'
- }]
- })).toEqual('group');
+ expect(
+ service.itemType({
+ children: [
+ {
+ name: 'Dropdown',
+ url: '/dashboard'
+ }
+ ]
+ })
+ ).toEqual('group');
expect(service.itemType({ label: { variant: 'info' } })).toEqual('label');
expect(service.itemType({})).toEqual('empty');
- expect(service.itemType({
+ expect(
+ service.itemType({
name: 'Disabled',
url: '/dashboard',
icon: 'icon-ban',
attributes: { disabled: true }
- }
- )).toEqual('link');
+ })
+ ).toEqual('link');
});
it('should be active', () => {
@@ -60,10 +64,12 @@ describe('SidebarNavHelper', () => {
});
it('should return icon class object', () => {
- expect(service.getIconClass({ icon: 'icon-ban' })).toEqual(jasmine.objectContaining({
- 'nav-icon': true,
- 'icon-ban': true
- }));
+ expect(service.getIconClass({ icon: 'icon-ban' })).toEqual(
+ jasmine.objectContaining({
+ 'nav-icon': true,
+ 'icon-ban': true
+ })
+ );
expect(service.getIconClass({ icon: 'icon-ban' })).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
expect(service.getIconClass({ icon: '' })).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.ts
index 73467347..d1531a52 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.ts
@@ -10,15 +10,16 @@ export abstract class SidebarNavService {
abstract getSidebarNavItemsConfig(): INavData[];
}
-@Injectable()
+@Injectable({
+ providedIn: 'root'
+})
export class SidebarNavHelper {
-
itemType(item: INavData): string {
if (item.divider) {
return 'divider';
} else if (item.title) {
return 'title';
- } else if (item.children && item.children.length > 0 ) {
+ } else if (item.children && item.children.length > 0) {
return 'group';
} else if (item.label) {
return 'label';
@@ -33,9 +34,9 @@ export class SidebarNavHelper {
return router.isActive(item.url, false);
}
- public hasBadge = (item: INavData) => Boolean(item.badge);
- public hasIcon = (item: INavData) => Boolean(item.icon) || item.icon === '';
- public hasIconComponent = (item: INavData) => Boolean(item.iconComponent);
+ public hasBadge = (item: INavData) => Boolean(item?.badge);
+ public hasIcon = (item: INavData) => Boolean(item?.icon) || item?.icon === '';
+ public hasIconComponent = (item: INavData) => Boolean(item?.iconComponent);
public getIconClass(item: INavData): any {
const classes = {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts b/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
index c0b41019..5c6e65d5 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
@@ -17,10 +17,10 @@ export interface ISidebarAction {
providedIn: 'root'
})
export class SidebarService {
- private sidebarState = new BehaviorSubject({});
- sidebarState$ = this.sidebarState.asObservable();
+ readonly #sidebarState = new BehaviorSubject({});
+ readonly sidebarState$ = this.#sidebarState.asObservable();
toggle(action: ISidebarAction): void {
- this.sidebarState.next(action);
+ this.#sidebarState.next(action);
}
}
diff --git a/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts b/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
index 0dc9649f..697e48a0 100644
--- a/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
@@ -1,14 +1,14 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, input } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { TableActiveDirective } from './table-active.directive';
@Component({
imports: [TableActiveDirective],
- template: ` Test ',
+ template:
+ '{{content()}} ',
imports: [TooltipDirective]
})
export class TestComponent {
- content = 'Test';
- visible = false;
- trigger: Triggers[] = ['hover', 'click'];
+ readonly content = signal('Test');
+ readonly visible = signal(false);
+ readonly trigger: Triggers[] = ['hover', 'click'];
}
class MockElementRef extends ElementRef {}
@@ -61,11 +63,11 @@ describe('TooltipDirective', () => {
it('should have css classes', fakeAsync(() => {
expect(document.querySelector('.tooltip.show')).toBeNull();
- component.visible = true;
+ component.visible.set(true);
fixture.detectChanges();
tick(500);
expect(document.querySelector('.tooltip.show')).toBeTruthy();
- component.visible = false;
+ component.visible.set(false);
fixture.detectChanges();
tick(500);
expect(document.querySelector('.tooltip.show')).toBeNull();
@@ -73,7 +75,7 @@ describe('TooltipDirective', () => {
it('should set popover on and off', fakeAsync(() => {
fixture.autoDetectChanges();
- component.visible = false;
+ component.visible.set(false);
expect(document.querySelector('.tooltip.show')).toBeNull();
debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
tick(500);
@@ -85,7 +87,7 @@ describe('TooltipDirective', () => {
it('should toggle popover', fakeAsync(() => {
fixture.autoDetectChanges();
- component.visible = false;
+ component.visible.set(false);
expect(document.querySelector('.tooltip.show')).toBeNull();
debugElement.nativeElement.dispatchEvent(new Event('click'));
tick(500);
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 67defeaf..5d4a6f90 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,5 +1,5 @@
-
+
@if (!!value() || templates?.['widgetValueTemplate']) {
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 184684bb..2ee1d9c0 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 { Component, computed, contentChildren, effect, input, InputSignal, Templ
import { Colors } from '../../coreui.types';
import { TemplateIdDirective } from '../../shared';
import { CardBodyComponent, CardComponent } from '../../card';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
@Component({
selector: 'c-widget-stat-a',
templateUrl: './widget-stat-a.component.html',
exportAs: 'cWidgetStatA',
- imports: [CardBodyComponent, NgClass, NgTemplateOutlet],
+ imports: [CardBodyComponent, NgTemplateOutlet],
host: { class: 'card', '[class]': 'hostClasses()' }
})
export class WidgetStatAComponent extends CardComponent {
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 452b6d4e..fe026d51 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
@@ -7,7 +7,7 @@
}
@if (text()) {
-
+
{{ text() }}
}
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 c40bc948..4fc67467 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,14 +1,13 @@
import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
-import { NgClass } from '@angular/common';
import { CardBodyComponent, CardComponent } from '../../card';
@Component({
- selector: 'c-widget-stat-b',
- templateUrl: './widget-stat-b.component.html',
- exportAs: 'cWidgetStatB',
- imports: [CardBodyComponent, NgClass],
- host: { class: 'card', '[class]': 'hostClasses()' }
+ selector: 'c-widget-stat-b',
+ templateUrl: './widget-stat-b.component.html',
+ exportAs: 'cWidgetStatB',
+ imports: [CardBodyComponent],
+ host: { class: 'card', '[class]': 'hostClasses()' }
})
export class WidgetStatBComponent extends CardComponent {
constructor() {
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 da7e055d..8f09ea10 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,16 +1,16 @@
@if (icon() || templates?.['widgetIconTemplate']) {
-
+
}
@if (!!value()) {
-
+
{{ value() }}
}
@if (!!title()) {
-
+
{{ title() }}
}
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 8c1b3592..8d96668f 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
@@ -2,13 +2,13 @@ import { booleanAttribute, Component, computed, contentChildren, effect, input,
import { CardBodyComponent, CardComponent } from '../../card';
import { TemplateIdDirective } from '../../shared';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
@Component({
selector: 'c-widget-stat-c',
templateUrl: './widget-stat-c.component.html',
exportAs: 'cWidgetStatC',
- imports: [CardBodyComponent, NgClass, NgTemplateOutlet],
+ imports: [CardBodyComponent, NgTemplateOutlet],
host: { '[class]': 'hostExtendedClass()' }
})
export class WidgetStatCComponent extends CardComponent {
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 0b9d8223..fc020d9c 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,4 +1,4 @@
-
+
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 c9491e48..8e1ea78c 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,6 @@ import { Component, computed, input } from '@angular/core';
import { Colors } from '../../coreui.types';
import { CardBodyComponent, CardComponent, CardHeaderComponent } from '../../card';
import { ColComponent, RowDirective } from '../../grid';
-import { NgClass } from '@angular/common';
export type WidgetStatDValue = {
title?: string;
@@ -10,11 +9,11 @@ export type WidgetStatDValue = {
};
@Component({
- selector: 'c-widget-stat-d',
- templateUrl: './widget-stat-d.component.html',
- exportAs: 'cWidgetStatD',
- imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass],
- host: { class: 'card' }
+ selector: 'c-widget-stat-d',
+ templateUrl: './widget-stat-d.component.html',
+ exportAs: 'cWidgetStatD',
+ imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective],
+ host: { class: 'card' }
})
export class WidgetStatDComponent extends CardComponent {
/**
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 dc90c734..074e6c23 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,6 +1,6 @@
@if (!!title()) {
- {{ title() }}
+ {{ title() }}
}
@if (!!value()) {
{{ value() }}
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 0dc1b458..ebaa8ae8 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,12 +1,11 @@
import { Component, computed, input } from '@angular/core';
-import { NgClass } from '@angular/common';
import { CardBodyComponent, CardComponent } from '../../card';
@Component({
- selector: 'c-widget-stat-e',
- templateUrl: './widget-stat-e.component.html',
- exportAs: 'cWidgetStatE',
- imports: [CardBodyComponent, NgClass]
+ selector: 'c-widget-stat-e',
+ templateUrl: './widget-stat-e.component.html',
+ exportAs: 'cWidgetStatE',
+ imports: [CardBodyComponent]
})
export class WidgetStatEComponent extends CardComponent {
constructor() {
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 66791959..affec292 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,11 +1,11 @@
-
-
+
+
-
{{ value() }}
-
{{ title() }}
+
{{ value() }}
+
{{ title() }}
@if (footer() || templates?.['widgetFooterTemplate']) {
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 cdf2bb31..381cd95b 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
@@ -1,5 +1,5 @@
import { booleanAttribute, Component, computed, contentChildren, effect, input, TemplateRef } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
import { Colors } from '../../coreui.types';
import { TemplateIdDirective } from '../../shared';
@@ -9,7 +9,7 @@ import { CardBodyComponent, CardComponent, CardFooterComponent } from '../../car
selector: 'c-widget-stat-f',
templateUrl: './widget-stat-f.component.html',
exportAs: 'cWidgetStatB',
- imports: [CardBodyComponent, CardFooterComponent, NgClass, NgTemplateOutlet],
+ imports: [CardBodyComponent, CardFooterComponent, NgTemplateOutlet],
host: { class: 'card', '[class]': 'hostClasses()' }
})
export class WidgetStatFComponent extends CardComponent {
diff --git a/projects/coreui-icons-angular/README.md b/projects/coreui-icons-angular/README.md
index 1717e1df..1aadc67f 100644
--- a/projects/coreui-icons-angular/README.md
+++ b/projects/coreui-icons-angular/README.md
@@ -39,7 +39,7 @@ Featured CoreUI for Angular libraries:
# CoreUI Icons Angular
![angular][angular-badge]
-[![npm-coreui-angular-v5-ng20][npm-coreui-icons-angular-v5-ng20]][coreui-angular-icons-npm]
+[![npm-coreui-angular-v5-ng21][npm-coreui-icons-angular-v5-ng21]][coreui-angular-icons-npm]
[![npm-coreui-angular-latest][npm-coreui-icons-angular-latest]][coreui-angular-icons-npm]
[![npm-coreui-angular-next][npm-coreui-icons-angular-next]][coreui-angular-icons-npm]
[][coreui]
@@ -48,10 +48,10 @@ Featured CoreUI for Angular libraries:
[coreui]: https://coreui.io/icons
[coreui-angular-icons-npm]: https://www.npmjs.com/package/@coreui/icons-angular
-[npm-coreui-icons-angular-v5-ng20]: https://img.shields.io/npm/v/@coreui/icons-angular/v5-ng20?style=flat-square&color=brightgreen
+[npm-coreui-icons-angular-v5-ng21]: https://img.shields.io/npm/v/@coreui/icons-angular/v5-ng21?style=flat-square&color=brightgreen
[npm-coreui-icons-angular-latest]: https://img.shields.io/npm/v/@coreui/icons-angular/latest?style=flat-square&color=brightgreen
[npm-coreui-icons-angular-next]: https://img.shields.io/npm/v/@coreui/icons-angular/next?style=flat-square&color=red
-[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular
+[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular
## `cIcon` directive
@@ -72,7 +72,7 @@ For directive description visit [https://coreui.io/angular/docs/](https://coreui
```shell
npm install @coreui/icons@3
-npm install @coreui/icons-angular@~5.5
+npm install @coreui/icons-angular@~5.6
```
### Usage
diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json
index 0a7cecd2..45585d16 100644
--- a/projects/coreui-icons-angular/package.json
+++ b/projects/coreui-icons-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/icons-angular",
- "version": "5.5.25",
+ "version": "5.6.0",
"description": "CoreUI Icons Angular component and service",
"copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
"license": "MIT",
@@ -25,9 +25,9 @@
"url": "https://github.com/coreui/coreui-angular/issues"
},
"peerDependencies": {
- "@angular/common": "^20.3.14",
- "@angular/core": "^20.3.14",
- "@angular/platform-browser": "^20.3.14"
+ "@angular/common": "^21.0.0",
+ "@angular/core": "^21.0.0",
+ "@angular/platform-browser": "^21.0.0"
},
"dependencies": {
"tslib": "^2.3.0"
diff --git a/projects/coreui-icons-angular/src/lib/icon/icon.component.svg b/projects/coreui-icons-angular/src/lib/icon/icon.component.svg
index 55c742cd..47e79758 100644
--- a/projects/coreui-icons-angular/src/lib/icon/icon.component.svg
+++ b/projects/coreui-icons-angular/src/lib/icon/icon.component.svg
@@ -5,7 +5,7 @@
[attr.height]="height() || width()"
[attr.viewBox]="viewBox() ?? scale()"
[innerHtml]="innerHtml()"
- [ngClass]="computedClasses()"
+ [class]="computedClasses()"
[cHtmlAttr]="attributes()"
aria-hidden="true"
pointer-events="none"
@@ -18,7 +18,7 @@
xmlns="http://www.w3.org/2000/svg"
[attr.width]="width()"
[attr.height]="height() || width()"
- [ngClass]="computedClasses()"
+ [class]="computedClasses()"
[cHtmlAttr]="attributes()"
aria-hidden="true"
pointer-events="none"
diff --git a/projects/coreui-icons-angular/src/lib/icon/icon.component.ts b/projects/coreui-icons-angular/src/lib/icon/icon.component.ts
index f0ad100d..5de19a98 100644
--- a/projects/coreui-icons-angular/src/lib/icon/icon.component.ts
+++ b/projects/coreui-icons-angular/src/lib/icon/icon.component.ts
@@ -1,4 +1,3 @@
-import { NgClass } from '@angular/common';
import { Component, computed, effect, ElementRef, inject, input, Renderer2, viewChild } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@@ -9,7 +8,7 @@ import { transformName } from './icon.utils';
@Component({
exportAs: 'cIconComponent',
- imports: [NgClass, HtmlAttributesDirective],
+ imports: [HtmlAttributesDirective],
selector: 'c-icon',
styleUrls: ['./icon.component.scss'],
templateUrl: './icon.component.svg',
diff --git a/projects/coreui-icons-angular/src/test.ts b/projects/coreui-icons-angular/src/test.ts
index f17fa2d1..b52dba56 100644
--- a/projects/coreui-icons-angular/src/test.ts
+++ b/projects/coreui-icons-angular/src/test.ts
@@ -1,16 +1,11 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js';
-import 'zone.js/testing';
+// import 'zone.js';
+// import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(),
- { teardown: { destroyAfterEach: true }},
-);
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+ teardown: { destroyAfterEach: true }
+});
diff --git a/tsconfig.json b/tsconfig.json
index 1baa4cea..0ac09015 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,10 +35,6 @@
"module": "preserve",
"typeRoots": [
"node_modules/@types"
- ],
- "lib": [
- "ES2022",
- "dom"
]
},
"angularCompilerOptions": {