diff --git a/.editorconfig b/.editorconfig
index 0a592d43..9641629b 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -11,6 +11,7 @@ trim_trailing_whitespace = true
[*.ts]
quote_type = single
+ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb48e568..f664ad24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,115 @@
### [@coreui/angular](https://coreui.io/angular/) changelog
+---
+
+#### `5.5.2`
+
+- chore(dependencies): update
+
+---
+
+#### `5.5.1`
+
+- fix(progress): TS2540: Cannot assign to `value` because it is a read-only property - conflicting on directive composition with ProgressBarDirective
+- chore(dependencies): update
+
+---
+
+#### `5.5.0`
+
+- chore(dependencies): update to `Angular 20`
+- chore(migration): import `DOCUMENT` from `@angular/core`
+- chore(migration): rename the `afterRender` lifecycle hook to `afterEveryRender`
+- fix(collapse): NG0953: Unexpected emit for destroyed `OutputRef`. The owning directive/component is destroyed.
+- refactor(carousel): carousel.config migrate to inject()
+
+---
+
+#### `5.4.14`
+
+- fix(button): cButton directive loosing tabindex attribute, refactor; close #228 - thanks @bernik1980
+- fix(list-group-item): cListGroupItem directive loosing tabindex attribute, refactor
+- fix(nav-link): cNavLink directive loosing tabindex attribute, refactor
+- refactor(form): minor cleanups
+- chore(dependencies): update
+
+---
+
+#### `5.4.13`
+
+- fix(modal): scrollbar disappears on backdrop=false, closes #224 - thanks @tturbs
+- chore(dependencies): update
+
+---
+
+#### `5.4.12`
+
+- chore(dependencies): update
+
+---
+
+#### `5.4.11`
+
+- chore(dependencies): update
+
+---
+
+#### `5.4.10`
+
+- refactor(tabs-2): host bindings, host listeners, cleanup
+- chore(dependencies): update
+
+---
+
+#### `5.4.9`
+
+- chore(dependencies): update
+
+---
+
+#### `5.4.8`
+
+- fix(form-check-input): checked prop overwrites checked from writeValue in ReactiveForms
+- chore(dependencies): update
+
+---
+
+#### `5.4.7`
+
+- fix(avatar): default size should be '' not `md`
+- chore(dependencies): update
+
+---
+
+#### `5.4.6`
+
+- chore(dependencies): update
+- refactor(dropdown): migrate to contendChild(), constructor-based dependency injection to inject(), cleanup
+- refactor(dropdown-item): add default role prop, cleanup
+- refactor(dropdown-menu): migrate to contendChildren(), cleanup
+
+---
+
+#### `5.4.5`
+
+- chore(dependencies): update
+- refactor(coreui.types): add BooleanInput and NumberInput types
+
+---
+
+#### `5.4.3`
+
+- chore(dependencies): update to `Angular 19.2`
+- refactor(icon.component): cleanup, classList simplify
+- refactor(chartjs.component): signal inputs, host bindings, cleanup
+- fix(table-color): allow undefined type for color input prop
+- fix(align): allow undefined type for align input prop
+
+---
+
+#### `5.4.1`
+
+- chore(dependencies): update
---
diff --git a/CLI.md b/CLI.md
index cd0a31a1..5bc98951 100644
--- a/CLI.md
+++ b/CLI.md
@@ -1,27 +1,59 @@
# @coreui/angular v5
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.2.
## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
## Code scaffolding
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
-## Build
+## Building
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
## Running end-to-end tests
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-## Further help
+## Additional Resources
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/README.md b/README.md
index 3f430044..b557ea69 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-
+
-CoreUI for Angular
+CoreUI Components for Angular
- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.5.
+ Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8
Explore CoreUI for Angular docs » Explore CoreUI for Angular docs and examples »
Report a bug
+ CoreUI Docs
+ ·
+ Report a bug
·
- Request a feature
+ Request a feature
·
- Blog
+ Blog
+
+Featured CoreUI for Angular libraries:
+CoreUI Components for Angular
+CoreUI Angular wrapper for Chart.js v4
+CoreUI Icons for Angular
+
+
-
+
- Explore @coreui/angular-chartjs docs & examples » Explore @coreui/angular-chartjs docs & examples »
Report bug
+ Report bug
·
- Request feature
+ Request feature
·
Blog
+
+Featured CoreUI for Angular libraries:
+CoreUI Components for Angular
+CoreUI Angular wrapper for Chart.js v4
+CoreUI Icons for Angular
+
+
diff --git a/projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts b/projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts
index 075cdb38..9bc21f02 100644
--- a/projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts
+++ b/projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts
@@ -1,10 +1,12 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { ChartjsComponent } from './chartjs.component';
import { Chart, registerables } from 'chart.js';
+import { ComponentRef } from '@angular/core';
describe('ChartjsComponent', () => {
let component: ChartjsComponent;
+ let componentRef: ComponentRef;
let fixture: ComponentFixture;
const colors = {
@@ -38,31 +40,33 @@ describe('ChartjsComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(ChartjsComponent);
component = fixture.componentInstance;
- component.data = undefined;
- component.type = 'line';
- component.wrapper = true;
+ componentRef = fixture.componentRef;
+ componentRef.setInput('type', 'line');
+ componentRef.setInput('wrapper', true);
+ componentRef.setInput('data', undefined);
+ fixture.detectChanges();
});
it('chart should create', fakeAsync(() => {
- fixture.detectChanges();
- tick();
expect(component).toBeTruthy();
expect(component.chart).toBeDefined();
}));
it('chart should receive data', fakeAsync(() => {
- component.data = { ...data };
+ componentRef.setInput('data', { ...data });
fixture.detectChanges();
- tick();
+ // tick();
expect(component.chart?.config.data.labels?.length).toBe(7);
expect(component.chart?.config.data.labels).toEqual(labels);
expect(component.chart?.config.data.datasets[0]?.data.length).toBe(7);
}));
it('chart to Base64Image', fakeAsync(() => {
- component.data = { ...data };
+ componentRef.setInput('height', 100);
+ componentRef.setInput('width', 100);
+ componentRef.setInput('data', { ...data });
fixture.detectChanges();
- tick();
+ // tick();
const image = component.chartToBase64Image();
expect(image).toBeDefined();
expect(typeof image).toBe('string');
@@ -70,18 +74,27 @@ describe('ChartjsComponent', () => {
}));
it('chart should update on data change', fakeAsync(() => {
- component.data = {
+ componentRef.setInput('data', { ...data });
+ fixture.detectChanges();
+ // tick();
+ expect(component.chart?.config.data.labels?.length).toBe(7);
+ expect(component.chart?.config.data.labels).toEqual(labels);
+ expect(component.chart?.config.data.datasets[0]?.data.length).toBe(7);
+
+ const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
+ componentRef.setInput('data', {
...data,
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+ labels: [...months],
datasets: [
{ ...data.datasets[0], data: [42, 88, 42, 66, 77] },
{ ...data.datasets[1], data: [55, 44, 55, 66, 22] }
]
- };
+ });
fixture.detectChanges();
- component.chartUpdate();
- tick();
+ // component.chartUpdate();
+ // tick();
expect(component.chart?.config?.data.labels?.length).toBe(5);
+ expect(component.chart?.config.data.labels).toEqual(months);
expect(component.chart?.config?.data.datasets[1]?.data.length).toBe(5);
}));
diff --git a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
index 62bdeae5..eaf2680b 100644
--- a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
+++ b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts
@@ -1,10 +1,31 @@
-import { afterRender, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, numberAttribute, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, ViewChild, inject } from '@angular/core';
+import {
+ afterRenderEffect,
+ booleanAttribute,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ computed,
+ ElementRef,
+ inject,
+ input,
+ linkedSignal,
+ NgZone,
+ numberAttribute,
+ OnChanges,
+ OnDestroy,
+ output,
+ Renderer2,
+ SimpleChanges,
+ untracked,
+ viewChild
+} from '@angular/core';
import merge from 'lodash-es/merge';
import type { ChartConfiguration, ChartData, ChartOptions, ChartType, InteractionItem, Plugin } from 'chart.js';
import { Chart as ChartJS, registerables } from 'chart.js';
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
+import { BooleanInput } from './chartjs.interface';
ChartJS.register(...registerables);
@@ -15,25 +36,32 @@ let nextId = 0;
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.scss'],
exportAs: 'cChart',
- changeDetection: ChangeDetectionStrategy.OnPush
- // host: { ngSkipHydration: 'true' }
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ '[class]': 'hostClasses()',
+ '[style.height.px]': 'height()',
+ '[style.width.px]': 'width()'
+ }
})
-export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
+export class ChartjsComponent implements OnDestroy, OnChanges {
+ //
+ static ngAcceptInputType_redraw: BooleanInput;
+
private readonly ngZone = inject(NgZone);
private readonly renderer = inject(Renderer2);
private readonly changeDetectorRef = inject(ChangeDetectorRef);
/**
* Enables custom html based tooltips instead of standard tooltips.
- * @type boolean
+ * @return boolean
* @default true
*/
- @Input({ transform: booleanAttribute }) customTooltips: boolean = true;
+ readonly customTooltips = input(true, { transform: booleanAttribute });
/**
* The data object that is passed into the Chart.js chart (more info).
*/
- @Input() data?: ChartData;
+ readonly data = input();
/**
* A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
@@ -42,89 +70,86 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
/**
* Height attribute applied to the rendered canvas.
- * @type number | undefined
- * @default 150
+ * @return number | undefined
+ * @default null
*/
- @HostBinding('style.height.px')
- @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })
- height?: number;
+ readonly height = input(null, { transform: (value) => numberAttribute(value, undefined) });
/**
* ID attribute applied to the rendered canvas.
- * @type string
+ * @return string
*/
- @Input() id: string = `c-chartjs-${nextId++}`;
+ readonly idInput = input(`c-chartjs-${nextId++}`, { alias: 'id' });
+
+ get id() {
+ return this.idInput();
+ }
/**
* The options object that is passed into the Chart.js chart.
*/
- @Input() options?: ChartOptions = {};
+ readonly optionsInput = input({}, { alias: 'options' });
+
+ readonly options = linkedSignal(this.optionsInput);
/**
* The plugins array that is passed into the Chart.js chart
*/
- @Input() plugins: Plugin[] = [];
+ readonly plugins = input([]);
/**
* If true, will tear down and redraw chart on all updates.
- * @type boolean
+ * @return boolean
* @default false
*/
- @Input({ transform: booleanAttribute }) redraw: boolean = false;
+ readonly redraw = input(false, { transform: booleanAttribute });
/**
* Chart.js chart type.
- * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+ * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
*/
- @Input() type: ChartType = 'bar';
+ readonly type = input('bar');
/**
* Width attribute applied to the rendered canvas.
- * @type number | undefined
- * @default 300
+ * @return number | undefined
+ * @default null
*/
- @HostBinding('style.width.px')
- @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })
- width?: number;
+ readonly width = input(null, { transform: (value) => numberAttribute(value, undefined) });
/**
* Put the chart into the wrapper div element.
* @default true
*/
- @Input({ transform: booleanAttribute }) wrapper = true;
+ readonly wrapper = input(true, { transform: booleanAttribute });
- @Output() readonly getDatasetAtEvent = new EventEmitter();
- @Output() readonly getElementAtEvent = new EventEmitter();
- @Output() readonly getElementsAtEvent = new EventEmitter();
+ readonly getDatasetAtEvent = output();
+ readonly getElementAtEvent = output();
+ readonly getElementsAtEvent = output();
- @Output() readonly chartRef = new EventEmitter();
+ readonly chartRef = output();
- @ViewChild('canvasElement') canvasElement!: ElementRef;
+ readonly canvasElement = viewChild.required('canvasElement');
chart!: ChartJS;
ctx!: CanvasRenderingContext2D;
- @HostBinding('class')
- get hostClasses() {
+ readonly hostClasses = computed(() => {
return {
- 'chart-wrapper': this.wrapper
+ 'chart-wrapper': this.wrapper()
};
- }
+ });
constructor() {
- // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
- afterRender({
- write: () => {
- this.ctx = this.canvasElement?.nativeElement?.getContext('2d');
+ afterRenderEffect({
+ read: () => {
+ const canvasElement = this.canvasElement();
+ this.ctx = canvasElement?.nativeElement?.getContext('2d');
this.chartRender();
}
});
}
- ngAfterViewInit(): void {
- this.chartRender();
- }
-
ngOnChanges(changes: SimpleChanges): void {
if (changes['data'] && !changes['data'].firstChange) {
this.chartUpdate();
@@ -171,7 +196,8 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
}
public chartRender() {
- if (!this.canvasElement?.nativeElement || !this.ctx || this.chart) {
+ const canvasElement = this.canvasElement();
+ if (!canvasElement?.nativeElement || !this.ctx || this.chart) {
return;
}
@@ -180,7 +206,7 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
if (config) {
this.chart = new ChartJS(this.ctx, config);
this.ngZone.run(() => {
- this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
+ this.renderer.setStyle(canvasElement.nativeElement, 'display', 'block');
this.changeDetectorRef.markForCheck();
this.chartRef.emit(this.chart);
});
@@ -193,7 +219,7 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
return;
}
- if (this.redraw) {
+ if (this.redraw()) {
this.chartDestroy();
this.chartRender();
return;
@@ -201,7 +227,7 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
const config: ChartConfiguration = this.chartConfig();
- if (this.options) {
+ if (this.options()) {
Object.assign(this.chart.options ?? {}, config.options ?? {});
}
@@ -234,44 +260,47 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
return this.chart?.toBase64Image();
}
- private chartDataConfig(): ChartData {
+ private chartDataConfig = computed(() => {
+ const { labels, datasets } = { ...this.data() };
return {
- labels: this.data?.labels ?? [],
- datasets: this.data?.datasets ?? []
+ labels: labels ?? [],
+ datasets: datasets ?? []
};
- }
+ });
- private chartOptions(): ChartOptions {
- return this.options ?? {};
- }
+ readonly chartOptions = computed(() => this.options() ?? {});
- private chartConfig(): ChartConfiguration {
+ readonly chartConfig = computed(() => {
this.chartCustomTooltips();
return {
data: this.chartDataConfig(),
options: this.chartOptions(),
- plugins: this.plugins,
- type: this.type
+ plugins: this.plugins(),
+ type: this.type()
};
- }
+ });
private chartCustomTooltips() {
- if (this.customTooltips) {
- const options = this.options;
- const plugins = this.options?.plugins;
- const tooltip = this.options?.plugins?.tooltip;
- this.options = merge({
- ...options,
- plugins: {
- ...plugins,
- tooltip: {
- ...tooltip,
- enabled: false,
- mode: 'index',
- position: 'nearest',
- external: cuiCustomTooltips
- }
- }
+ if (this.customTooltips()) {
+ const options = this.options();
+ const plugins = options?.plugins;
+ const tooltip = options?.plugins?.tooltip;
+ untracked(() => {
+ this.options.set(
+ merge({
+ ...options,
+ plugins: {
+ ...plugins,
+ tooltip: {
+ ...tooltip,
+ enabled: false,
+ mode: 'index',
+ position: 'nearest',
+ external: cuiCustomTooltips
+ }
+ }
+ })
+ );
});
}
}
diff --git a/projects/coreui-angular-chartjs/src/lib/chartjs.interface.ts b/projects/coreui-angular-chartjs/src/lib/chartjs.interface.ts
index 0532ba84..6c35ea4a 100644
--- a/projects/coreui-angular-chartjs/src/lib/chartjs.interface.ts
+++ b/projects/coreui-angular-chartjs/src/lib/chartjs.interface.ts
@@ -2,6 +2,8 @@ import { ChartType } from 'chart.js/auto';
import { EventEmitter } from '@angular/core';
import { ChartConfiguration, DefaultDataPoint } from 'chart.js';
+export declare type BooleanInput = string | boolean | null | undefined;
+
export interface IChartjs, TLabel = unknown> {
/**
* Enables custom html based tooltips instead of standard tooltips.
@@ -81,5 +83,4 @@ export interface IChartjs;
-
}
diff --git a/projects/coreui-angular-chartjs/tsconfig.json b/projects/coreui-angular-chartjs/tsconfig.json
index b3e0d01a..56f4fc9e 100644
--- a/projects/coreui-angular-chartjs/tsconfig.json
+++ b/projects/coreui-angular-chartjs/tsconfig.json
@@ -9,6 +9,9 @@
},
{
"path": "./tsconfig.spec.json"
+ },
+ {
+ "path": "./tsconfig.schematics.json"
}
]
}
diff --git a/projects/coreui-angular-chartjs/tsconfig.lib.json b/projects/coreui-angular-chartjs/tsconfig.lib.json
index b77b13c0..3879b4cd 100644
--- a/projects/coreui-angular-chartjs/tsconfig.lib.json
+++ b/projects/coreui-angular-chartjs/tsconfig.lib.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
diff --git a/projects/coreui-angular-chartjs/tsconfig.lib.prod.json b/projects/coreui-angular-chartjs/tsconfig.lib.prod.json
index 06de549e..9215caac 100644
--- a/projects/coreui-angular-chartjs/tsconfig.lib.prod.json
+++ b/projects/coreui-angular-chartjs/tsconfig.lib.prod.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
diff --git a/projects/coreui-angular-chartjs/tsconfig.schematics.json b/projects/coreui-angular-chartjs/tsconfig.schematics.json
index acbc130f..bf6ebfad 100644
--- a/projects/coreui-angular-chartjs/tsconfig.schematics.json
+++ b/projects/coreui-angular-chartjs/tsconfig.schematics.json
@@ -1,3 +1,5 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compilerOptions": {
"baseUrl": ".",
diff --git a/projects/coreui-angular-chartjs/tsconfig.spec.json b/projects/coreui-angular-chartjs/tsconfig.spec.json
index 715dd0a5..0d10fb5a 100644
--- a/projects/coreui-angular-chartjs/tsconfig.spec.json
+++ b/projects/coreui-angular-chartjs/tsconfig.spec.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
diff --git a/projects/coreui-angular/CLI.md b/projects/coreui-angular/CLI.md
index cd0a31a1..5bc98951 100644
--- a/projects/coreui-angular/CLI.md
+++ b/projects/coreui-angular/CLI.md
@@ -1,27 +1,59 @@
# @coreui/angular v5
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.2.
## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
## Code scaffolding
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
-## Build
+## Building
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
## Running end-to-end tests
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-## Further help
+## Additional Resources
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/projects/coreui-angular/README.md b/projects/coreui-angular/README.md
index 3f430044..b557ea69 100644
--- a/projects/coreui-angular/README.md
+++ b/projects/coreui-angular/README.md
@@ -1,5 +1,5 @@
-
+
-CoreUI for Angular
+CoreUI Components for Angular
- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.5.
+ Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8
Explore CoreUI for Angular docs » Explore CoreUI for Angular docs and examples »
Report a bug
+ CoreUI Docs
+ ·
+ Report a bug
·
- Request a feature
+ Request a feature
·
- Blog
+ Blog
+
+Featured CoreUI for Angular libraries:
+CoreUI Components for Angular
+CoreUI Angular wrapper for Chart.js v4
+CoreUI Icons for Angular
+
+> = input>('md');
+ readonly size: InputSignal> = input>('');
/**
* The alt attribute for the img element alternate text.
diff --git a/projects/coreui-angular/src/lib/backdrop/backdrop.service.spec.ts b/projects/coreui-angular/src/lib/backdrop/backdrop.service.spec.ts
index 46243b1f..03138be2 100644
--- a/projects/coreui-angular/src/lib/backdrop/backdrop.service.spec.ts
+++ b/projects/coreui-angular/src/lib/backdrop/backdrop.service.spec.ts
@@ -1,7 +1,7 @@
+import { DOCUMENT } from '@angular/core';
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { BackdropService } from './backdrop.service';
-import { DOCUMENT } from '@angular/common';
describe('BackdropService', () => {
let service: BackdropService;
diff --git a/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts b/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts
index 9cf312e3..5cf73f06 100644
--- a/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts
+++ b/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts
@@ -1,5 +1,5 @@
-import { inject, Injectable, RendererFactory2 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { inject, Injectable, RendererFactory2, DOCUMENT } from '@angular/core';
+
import { Subject } from 'rxjs';
@Injectable({
diff --git a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts
index 944de443..d87c0c4b 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts
+++ b/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts
@@ -1,4 +1,4 @@
-import {INavAttributes, INavLinkProps} from '../../coreui.types';
+import { INavAttributes, INavLinkProps } from '../../coreui.types';
interface IBreadcrumbItem {
label: string;
@@ -9,4 +9,4 @@ interface IBreadcrumbItem {
queryParams?: { [key: string]: any };
}
-export { INavAttributes, INavLinkProps, IBreadcrumbItem };
+export type { INavAttributes, INavLinkProps, IBreadcrumbItem };
diff --git a/projects/coreui-angular/src/lib/breadcrumb/public_api.ts b/projects/coreui-angular/src/lib/breadcrumb/public_api.ts
index f1bc830d..b89fd85e 100644
--- a/projects/coreui-angular/src/lib/breadcrumb/public_api.ts
+++ b/projects/coreui-angular/src/lib/breadcrumb/public_api.ts
@@ -1,4 +1,4 @@
-export { IBreadcrumbItem } from './breadcrumb-item/breadcrumb-item';
+export type { IBreadcrumbItem } from './breadcrumb-item/breadcrumb-item';
export { BreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component';
export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
export { BreadcrumbRouterComponent } from './breadcrumb-router/breadcrumb-router.component';
diff --git a/projects/coreui-angular/src/lib/button/button.directive.ts b/projects/coreui-angular/src/lib/button/button.directive.ts
index 30bae81c..0e1fbddf 100644
--- a/projects/coreui-angular/src/lib/button/button.directive.ts
+++ b/projects/coreui-angular/src/lib/button/button.directive.ts
@@ -1,6 +1,14 @@
-import { booleanAttribute, computed, Directive, input, InputSignal, InputSignalWithTransform } from '@angular/core';
+import {
+ booleanAttribute,
+ computed,
+ Directive,
+ input,
+ InputSignal,
+ InputSignalWithTransform,
+ numberAttribute
+} from '@angular/core';
-import { ButtonType, Colors, Shapes } from '../coreui.types';
+import { BooleanInput, ButtonType, Colors, Shapes } from '../coreui.types';
@Directive({
selector: '[cButton]',
@@ -16,6 +24,9 @@ import { ButtonType, Colors, Shapes } from '../coreui.types';
}
})
export class ButtonDirective {
+ static ngAcceptInputType_active: BooleanInput;
+ static ngAcceptInputType_disabled: BooleanInput;
+
/**
* Toggle the active state for the component. [docs]
* @type InputSignalWithTransform
@@ -46,6 +57,11 @@ export class ButtonDirective {
*/
readonly size: InputSignal<'' | 'sm' | 'lg'> = input<'' | 'sm' | 'lg'>('');
+ /**
+ * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
+ */
+ readonly tabindex = input(undefined, { transform: numberAttribute });
+
/**
* Specifies the type of button. Always specify the type attribute for the `` element.
* Different browsers may use different default types for the `` element.
@@ -84,7 +100,7 @@ export class ButtonDirective {
});
readonly tabIndex = computed(() => {
- return this._disabled() ? '-1' : null;
+ return this._disabled() ? '-1' : (this.tabindex() ?? null);
});
readonly isActive = computed(() => {
diff --git a/projects/coreui-angular/src/lib/carousel/carousel.config.ts b/projects/coreui-angular/src/lib/carousel/carousel.config.ts
index 140d4bb0..fc9d8c55 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel.config.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel.config.ts
@@ -9,5 +9,5 @@ export class CarouselConfig {
/* Default direction of auto changing of slides */
direction: 'next' | 'prev' = 'next';
/* Default interval of auto changing of slides */
- interval = 0;
+ interval?: number;
}
diff --git a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts
index 56623ebc..6605328f 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts
@@ -41,7 +41,7 @@ describe('CarouselComponent', () => {
expect(component.activeIndex()).toBe(0);
expect(component.animate()).toBe(true);
expect(component.direction()).toBe('next');
- expect(component.interval()).toBe(0);
+ expect(component.interval()).toBe(-1);
});
it('should call timer functions', fakeAsync(() => {
diff --git a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts
index e0b9a1c2..288832fd 100644
--- a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts
+++ b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts
@@ -4,10 +4,10 @@ import {
DestroyRef,
effect,
ElementRef,
- Inject,
inject,
input,
linkedSignal,
+ numberAttribute,
OnDestroy,
OnInit,
output
@@ -37,28 +37,30 @@ import { CarouselConfig } from '../carousel.config';
}
})
export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
+ private config = inject(CarouselConfig);
+
readonly #hostElement = inject(ElementRef);
readonly #carouselService = inject(CarouselService);
readonly #carouselState = inject(CarouselState);
readonly #intersectionService = inject(IntersectionService);
readonly #listenersService = inject(ListenersService);
- constructor(@Inject(CarouselConfig) private config: CarouselConfig) {
+ constructor() {
this.loadConfig();
}
loadConfig() {
- this.activeIndex.set(this.config?.activeIndex ?? this.activeIndex());
- this.animate.set(this.config?.animate ?? this.animate());
- this.direction.set(this.config?.direction ?? this.direction());
- this.interval.set(this.config?.interval ?? this.interval());
+ this.activeIndex.update((activeIndex) => this.config?.activeIndex ?? activeIndex);
+ this.animate.update((animate) => this.config?.animate ?? animate);
+ this.direction.update((direction) => this.config?.direction ?? direction);
+ this.interval.update((interval) => this.config?.interval ?? interval);
}
/**
* Index of the active item.
* @return number
*/
- readonly activeIndexInput = input(0, { alias: 'activeIndex' });
+ readonly activeIndexInput = input(0, { alias: 'activeIndex', transform: numberAttribute });
readonly activeIndex = linkedSignal({
source: this.activeIndexInput,
@@ -92,7 +94,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
* @return number
* @default 0
*/
- readonly intervalInput = input(0, { alias: 'interval' });
+ readonly intervalInput = input(-1, { alias: 'interval', transform: numberAttribute });
readonly interval = linkedSignal({
source: this.intervalInput,
@@ -213,7 +215,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
private carouselStateSubscribe(): void {
this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextItem) => {
if ('active' in nextItem && typeof nextItem.active === 'number') {
- this.itemChange.emit(nextItem.active);
+ this.itemChange?.emit(nextItem.active);
}
this.activeItemInterval =
typeof nextItem.interval === 'number' && nextItem.interval > -1 ? nextItem.interval : this.interval();
diff --git a/projects/coreui-angular/src/lib/collapse/collapse.directive.ts b/projects/coreui-angular/src/lib/collapse/collapse.directive.ts
index 8ee5d9bd..e055b0d1 100644
--- a/projects/coreui-angular/src/lib/collapse/collapse.directive.ts
+++ b/projects/coreui-angular/src/lib/collapse/collapse.directive.ts
@@ -29,9 +29,9 @@ import {
host: { '[class]': 'hostClasses()', '[style]': '{ display: "none" }' }
})
export class CollapseDirective implements OnDestroy {
+ readonly #animationBuilder = inject(AnimationBuilder);
readonly #hostElement = inject(ElementRef);
readonly #renderer = inject(Renderer2);
- readonly #animationBuilder = inject(AnimationBuilder);
#player: AnimationPlayer | undefined = undefined;
constructor() {
@@ -158,7 +158,9 @@ export class CollapseDirective implements OnDestroy {
this.#renderer.addClass(host, 'collapsing');
this.#renderer.removeClass(host, 'show');
this.#renderer.setStyle(host, dimension, visible ? `${(host as any)[scrollSize]}px` : '');
- this.collapseChange?.emit(visible ? 'opening' : 'collapsing');
+ if (this.#player) {
+ this.collapseChange?.emit(visible ? 'opening' : 'collapsing');
+ }
});
this.#player.onDone(() => {
@@ -170,9 +172,11 @@ export class CollapseDirective implements OnDestroy {
} else {
this.#renderer.removeClass(host, 'show');
}
- this.collapseChange?.emit(visible ? 'open' : 'collapsed');
+ if (this.#player) {
+ this.collapseChange?.emit(visible ? 'open' : 'collapsed');
+ this.visibleChange?.emit(visible);
+ }
this.destroyPlayer();
- this.visibleChange.emit(visible);
});
this.#player?.play();
diff --git a/projects/coreui-angular/src/lib/coreui.types.ts b/projects/coreui-angular/src/lib/coreui.types.ts
index 7c4e7bd7..1dd95bdc 100644
--- a/projects/coreui-angular/src/lib/coreui.types.ts
+++ b/projects/coreui-angular/src/lib/coreui.types.ts
@@ -1,5 +1,8 @@
import { IsActiveMatchOptions } from '@angular/router';
+export declare type BooleanInput = string | boolean | null | undefined;
+export declare type NumberInput = string | number | null | undefined;
+
export type NgCssClass = string | string[] | Set | { [klass: string]: any };
export enum BreakpointInfix {
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 961f5a94..b5722f2e 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,12 +1,11 @@
-import { Component, DebugElement, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { DropdownItemDirective } from './dropdown-item.directive';
import { DropdownService } from '../dropdown.service';
import { DropdownComponent } from '../dropdown/dropdown.component';
import { DropdownMenuDirective } from '../dropdown-menu/dropdown-menu.directive';
-import { By } from '@angular/platform-browser';
-import { DOCUMENT } from '@angular/common';
class MockElementRef extends ElementRef {}
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.ts
index 431f1f94..ffb44026 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.ts
@@ -1,5 +1,5 @@
-import { booleanAttribute, computed, Directive, ElementRef, inject, input, linkedSignal } from '@angular/core';
import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
+import { booleanAttribute, computed, Directive, ElementRef, inject, input, linkedSignal } from '@angular/core';
import { DropdownService } from '../dropdown.service';
import { DropdownComponent } from '../dropdown/dropdown.component';
@@ -12,6 +12,7 @@ import { DropdownComponent } from '../dropdown/dropdown.component';
'[attr.tabindex]': 'tabIndex()',
'[attr.aria-current]': 'ariaCurrent()',
'[attr.aria-disabled]': 'disabled || null',
+ '[attr.role]': 'role()',
'(click)': 'onClick($event)',
'(keyup)': 'onKeyUp($event)'
}
@@ -42,19 +43,28 @@ export class DropdownItemDirective implements FocusableOption {
*/
readonly disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
- readonly disabledEffect = linkedSignal({
+ readonly #disabled = linkedSignal({
source: this.disabledInput,
computation: (value) => value
});
set disabled(value) {
- this.disabledEffect.set(value);
+ this.#disabled.set(value);
}
get disabled() {
- return this.disabledEffect();
+ return this.#disabled();
}
+ readonly role = input('list-item');
+
+ readonly tabIndexInput = input('0', { alias: 'tabIndex' });
+
+ readonly tabIndex = linkedSignal({
+ source: this.tabIndexInput,
+ computation: (value) => (this.disabled ? '-1' : value)
+ });
+
focus(origin?: FocusOrigin | undefined): void {
this.#elementRef?.nativeElement?.focus();
}
@@ -75,13 +85,6 @@ export class DropdownItemDirective implements FocusableOption {
} as Record;
});
- readonly tabIndexInput = input(null, { alias: 'tabIndex' });
-
- readonly tabIndex = linkedSignal({
- source: this.tabIndexInput,
- computation: (value) => (this.disabled ? '-1' : value)
- });
-
onClick($event: MouseEvent): void {
this.handleInteraction();
}
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 0204f322..4f2c1c5f 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,10 +1,9 @@
-import { Component, DebugElement, ElementRef, Renderer2, viewChild } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { DropdownService } from '../dropdown.service';
import { DropdownMenuDirective } from './dropdown-menu.directive';
import { DropdownComponent, DropdownToggleDirective } from '../dropdown/dropdown.component';
-import { DOCUMENT } from '@angular/common';
-import { By } from '@angular/platform-browser';
import { DropdownItemDirective } from '../dropdown-item/dropdown-item.directive';
import { ButtonDirective } from '../../button';
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts
index cbfc8185..d80248b0 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts
@@ -1,8 +1,9 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
import {
AfterContentInit,
booleanAttribute,
computed,
- ContentChildren,
+ contentChildren,
DestroyRef,
Directive,
ElementRef,
@@ -10,11 +11,9 @@ import {
inject,
input,
linkedSignal,
- OnInit,
- QueryList
+ OnInit
} from '@angular/core';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';
import { ThemeDirective } from '../../shared/theme.directive';
@@ -98,13 +97,17 @@ export class DropdownMenuDirective implements OnInit, AfterContentInit {
}
}
- @ContentChildren(forwardRef(() => DropdownItemDirective), { descendants: true })
- dropdownItemsContent!: QueryList;
+ readonly dropdownItemsContent = contentChildren(
+ forwardRef(() => DropdownItemDirective),
+ { descendants: true }
+ );
+
+ readonly items$ = toObservable(this.dropdownItemsContent);
ngAfterContentInit(): void {
this.focusKeyManagerInit();
- this.dropdownItemsContent.changes
+ this.items$
.pipe(
tap((change) => {
this.focusKeyManagerInit();
@@ -131,7 +134,7 @@ export class DropdownMenuDirective implements OnInit, AfterContentInit {
}
private focusKeyManagerInit(): void {
- this.#focusKeyManager = new FocusKeyManager(this.dropdownItemsContent)
+ this.#focusKeyManager = new FocusKeyManager(this.dropdownItemsContent())
.withHomeAndEnd()
.withPageUpDown()
.withWrap()
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 6c32a2dd..fdedf013 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,10 +1,9 @@
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { DropdownComponent, DropdownToggleDirective } from './dropdown.component';
-import { Component, DebugElement, ElementRef } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef } from '@angular/core';
import { DropdownService } from '../dropdown.service';
import { By } from '@angular/platform-browser';
-import { DOCUMENT } from '@angular/common';
import { DropdownMenuDirective } from '../dropdown-menu/dropdown-menu.directive';
import { DropdownItemDirective } from '../dropdown-item/dropdown-item.directive';
diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.ts b/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.ts
index 13761a66..232ce723 100644
--- a/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.ts
+++ b/projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.ts
@@ -1,18 +1,16 @@
-import { DOCUMENT } from '@angular/common';
import {
- AfterContentInit,
AfterViewInit,
booleanAttribute,
ChangeDetectorRef,
Component,
computed,
- ContentChild,
+ contentChild,
DestroyRef,
Directive,
+ DOCUMENT,
effect,
ElementRef,
forwardRef,
- Inject,
inject,
input,
linkedSignal,
@@ -24,7 +22,7 @@ import {
signal,
untracked
} from '@angular/core';
-import { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter } from 'rxjs/operators';
import { createPopper, Instance, Options, Placement } from '@popperjs/core';
@@ -128,15 +126,16 @@ export class DropdownToggleDirective implements AfterViewInit {
'(click)': 'onHostClick($event)'
}
})
-export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private elementRef: ElementRef,
- private renderer: Renderer2,
- private ngZone: NgZone,
- private changeDetectorRef: ChangeDetectorRef,
- public dropdownService: DropdownService
- ) {
+export class DropdownComponent implements OnDestroy, OnInit {
+ readonly #destroyRef = inject(DestroyRef);
+ readonly #document = inject(DOCUMENT);
+ readonly #elementRef = inject(ElementRef);
+ readonly #renderer = inject(Renderer2);
+ readonly #ngZone = inject(NgZone);
+ readonly #changeDetectorRef = inject(ChangeDetectorRef);
+ readonly dropdownService = inject(DropdownService);
+
+ constructor() {
this.dropdownStateSubscribe();
}
@@ -177,7 +176,7 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
*/
readonly popperOptionsInput = input>({}, { alias: 'popperOptions' });
- readonly popperOptionsEffect = effect(() => {
+ readonly #popperOptionsEffect = effect(() => {
this.popperOptions = { ...untracked(this.#popperOptions), ...this.popperOptionsInput() };
});
@@ -239,24 +238,23 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
computation: (value) => value
});
- readonly visibleEffect = effect(() => {
+ readonly #visibleEffect = effect(() => {
const visible = this.visible();
this.activeTrap = visible;
visible ? this.createPopperInstance() : this.destroyPopperInstance();
this.setVisibleState(visible);
- this.visibleChange.emit(visible);
+ this.visibleChange?.emit(visible);
});
readonly visibleChange = output();
dropdownContext = { $implicit: this.visible() };
- @ContentChild(DropdownToggleDirective) _toggler!: DropdownToggleDirective;
- @ContentChild(DropdownMenuDirective) _menu!: DropdownMenuDirective;
- @ContentChild(DropdownMenuDirective, { read: ElementRef }) _menuElementRef!: ElementRef;
+ readonly _toggler = contentChild(DropdownToggleDirective);
+ readonly _menu = contentChild(DropdownMenuDirective);
+ readonly _menuElementRef = contentChild(DropdownMenuDirective, { read: ElementRef });
public activeTrap = false;
- private dropdownStateSubscription!: Subscription;
private popperInstance!: Instance | undefined;
private listeners: (() => void)[] = [];
@@ -283,22 +281,19 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
this.clickedTarget = $event.target as HTMLElement;
}
- dropdownStateSubscribe(subscribe: boolean = true): void {
- if (subscribe) {
- this.dropdownStateSubscription = this.dropdownService.dropdownState$
- .pipe(
- filter((state) => {
- return this === state.dropdown;
- })
- )
- .subscribe((state) => {
- if ('visible' in state) {
- state?.visible === 'toggle' ? this.toggleDropdown() : this.visible.set(state.visible);
- }
- });
- } else {
- this.dropdownStateSubscription?.unsubscribe();
- }
+ dropdownStateSubscribe(): void {
+ this.dropdownService.dropdownState$
+ .pipe(
+ filter((state) => {
+ return this === state.dropdown;
+ }),
+ takeUntilDestroyed(this.#destroyRef)
+ )
+ .subscribe((state) => {
+ if ('visible' in state) {
+ state?.visible === 'toggle' ? this.toggleDropdown() : this.visible.set(state.visible);
+ }
+ });
}
toggleDropdown(): void {
@@ -306,16 +301,18 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
}
onClick(event: any): void {
- if (!this._toggler?.elementRef.nativeElement.contains(event.target?.closest('[cDropdownToggle]'))) {
+ if (!this._toggler()?.elementRef.nativeElement.contains(event.target?.closest('[cDropdownToggle]'))) {
this.toggleDropdown();
}
}
- ngAfterContentInit(): void {
- if (this.variant() === 'nav-item') {
- this.renderer.addClass(this._toggler.elementRef.nativeElement, 'nav-link');
+ readonly #togglerEffect = effect(() => {
+ const variant = this.variant();
+ const _toggler = this._toggler();
+ if (variant === 'nav-item' && _toggler) {
+ this.#renderer.addClass(_toggler.elementRef.nativeElement, 'nav-link');
}
- }
+ });
ngOnInit(): void {
this.setVisibleState(this.visible());
@@ -323,7 +320,6 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
ngOnDestroy(): void {
this.clearListeners();
- this.dropdownStateSubscribe(false);
this.destroyPopperInstance();
}
@@ -333,22 +329,22 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
// todo: turn off popper in navbar-nav
createPopperInstance(): void {
- if (this._toggler && this._menu) {
- this.ngZone.runOutsideAngular(() => {
+ const _toggler = this._toggler();
+ const _menu = this._menu();
+ if (_toggler && _menu) {
+ this.#ngZone.runOutsideAngular(() => {
// workaround for popper position calculate (see also: dropdown-menu.component)
- this._menu.elementRef.nativeElement.style.visibility = 'hidden';
- this._menu.elementRef.nativeElement.style.display = 'block';
+ _menu.elementRef.nativeElement.style.visibility = 'hidden';
+ _menu.elementRef.nativeElement.style.display = 'block';
if (this.popper()) {
- this.popperInstance = createPopper(
- this._toggler.elementRef.nativeElement,
- this._menu.elementRef.nativeElement,
- { ...this.popperOptions }
- );
+ this.popperInstance = createPopper(_toggler.elementRef.nativeElement, _menu.elementRef.nativeElement, {
+ ...this.popperOptions
+ });
}
- this.ngZone.run(() => {
+ this.#ngZone.run(() => {
this.setListeners();
- this.changeDetectorRef.markForCheck();
- this.changeDetectorRef.detectChanges();
+ this.#changeDetectorRef.markForCheck();
+ this.#changeDetectorRef.detectChanges();
});
});
}
@@ -358,17 +354,17 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
this.clearListeners();
this.popperInstance?.destroy();
this.popperInstance = undefined;
- this.changeDetectorRef.markForCheck();
+ this.#changeDetectorRef.markForCheck();
}
private setListeners(): void {
this.listeners.push(
- this.renderer.listen(this.document, 'click', (event) => {
+ this.#renderer.listen(this.#document, 'click', (event) => {
const target = event.target as HTMLElement;
- if (this._menuElementRef?.nativeElement.contains(event.target)) {
+ if (this._menuElementRef()?.nativeElement.contains(event.target)) {
this.clickedTarget = target;
}
- if (this._toggler?.elementRef.nativeElement.contains(event.target)) {
+ if (this._toggler()?.elementRef.nativeElement.contains(event.target)) {
return;
}
const autoClose = this.autoClose();
@@ -387,7 +383,7 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
})
);
this.listeners.push(
- this.renderer.listen(this.elementRef.nativeElement, 'keyup', (event) => {
+ this.#renderer.listen(this.#elementRef.nativeElement, 'keyup', (event) => {
if (event.key === 'Escape' && this.autoClose() !== false) {
event.stopPropagation();
this.setVisibleState(false);
@@ -396,11 +392,11 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
})
);
this.listeners.push(
- this.renderer.listen(this.document, 'keyup', (event) => {
+ this.#renderer.listen(this.#document, 'keyup', (event) => {
if (
event.key === 'Tab' &&
this.autoClose() !== false &&
- !this.elementRef.nativeElement.contains(event.target)
+ !this.#elementRef.nativeElement.contains(event.target)
) {
this.setVisibleState(false);
return;
diff --git a/projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts b/projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts
index f7bf9395..76aceb30 100644
--- a/projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts
+++ b/projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts
@@ -6,10 +6,10 @@ import {
ElementRef,
inject,
input,
- Renderer2,
- signal,
- untracked
+ linkedSignal,
+ Renderer2
} from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
@Directive({
selector: 'input[cFormCheckInput]',
@@ -20,6 +20,8 @@ import {
}
})
export class FormCheckInputDirective {
+ static ngAcceptInputType_indeterminate: BooleanInput;
+
readonly #renderer = inject(Renderer2);
readonly #hostElement = inject(ElementRef);
@@ -35,15 +37,16 @@ export class FormCheckInputDirective {
*/
readonly indeterminateInput = input(false, { transform: booleanAttribute, alias: 'indeterminate' });
+ readonly #indeterminate = linkedSignal(this.indeterminateInput);
+
readonly #indeterminateEffect = effect(() => {
- const indeterminate = this.indeterminateInput();
- if (untracked(this.#indeterminate) !== indeterminate) {
+ if (this.type() === 'checkbox') {
+ const indeterminate = this.#indeterminate();
const htmlInputElement = this.#hostElement.nativeElement as HTMLInputElement;
if (indeterminate) {
this.#renderer.setProperty(htmlInputElement, 'checked', false);
}
this.#renderer.setProperty(htmlInputElement, 'indeterminate', indeterminate);
- this.#indeterminate.set(indeterminate);
}
});
@@ -51,8 +54,6 @@ export class FormCheckInputDirective {
return this.#indeterminate();
}
- readonly #indeterminate = signal(false);
-
/**
* Set component validation state to valid.
* @default undefined
@@ -68,20 +69,6 @@ export class FormCheckInputDirective {
} as Record;
});
- /**
- * Set component checked state.
- * @default false
- */
- readonly checkedInput = input(false, { transform: booleanAttribute, alias: 'checked' });
-
- readonly #checkedEffect = effect(() => {
- const checked = this.checkedInput();
- const htmlInputElement = this.#hostElement?.nativeElement as HTMLInputElement;
- if (htmlInputElement) {
- this.#renderer.setProperty(htmlInputElement, 'checked', checked);
- }
- });
-
get checked(): boolean {
return this.#hostElement?.nativeElement?.checked;
}
diff --git a/projects/coreui-angular/src/lib/form/form-check/form-check.component.ts b/projects/coreui-angular/src/lib/form/form-check/form-check.component.ts
index 667ca0d4..005b0a73 100644
--- a/projects/coreui-angular/src/lib/form/form-check/form-check.component.ts
+++ b/projects/coreui-angular/src/lib/form/form-check/form-check.component.ts
@@ -1,5 +1,5 @@
+import { BooleanInput } from '@angular/cdk/coercion';
import { booleanAttribute, Component, computed, contentChild, input } from '@angular/core';
-
import { FormCheckLabelDirective } from './form-check-label.directive';
@Component({
@@ -9,6 +9,10 @@ import { FormCheckLabelDirective } from './form-check-label.directive';
host: { '[class]': 'hostClasses()' }
})
export class FormCheckComponent {
+ static ngAcceptInputType_inline: BooleanInput;
+ static ngAcceptInputType_reverse: BooleanInput;
+ static ngAcceptInputType_switch: BooleanInput;
+
/**
* Group checkboxes or radios on the same horizontal row.
* @default false
@@ -30,15 +34,13 @@ export class FormCheckComponent {
/**
* Render a toggle switch on for checkbox.
- * @type boolean
+ * @returns boolean
* @default false
*/
readonly switch = input(false, { transform: booleanAttribute });
readonly formCheckLabel = contentChild(FormCheckLabelDirective);
- readonly formCheckClass = computed(() => !!this.formCheckLabel());
-
readonly hostClasses = computed(() => {
const sizing = this.sizing();
const isSwitch = this.switch();
diff --git a/projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts b/projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts
index 79d276ba..8512cc00 100644
--- a/projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts
+++ b/projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts
@@ -7,7 +7,7 @@ import { booleanAttribute, Directive, input } from '@angular/core';
export class FormFloatingDirective {
/**
* Enable floating labels
- * @type boolean
+ * @dafault boolean
*/
readonly floating = input(true, { transform: booleanAttribute, alias: 'cFormFloating' });
}
diff --git a/projects/coreui-angular/src/lib/form/form.module.ts b/projects/coreui-angular/src/lib/form/form.module.ts
index 1ab71add..3a245bd2 100644
--- a/projects/coreui-angular/src/lib/form/form.module.ts
+++ b/projects/coreui-angular/src/lib/form/form.module.ts
@@ -1,16 +1,16 @@
import { NgModule } from '@angular/core';
import { FormDirective } from './form/form.directive';
+import { FormControlDirective } from './form-control/form-control.directive';
+import { FormCheckComponent } from './form-check/form-check.component';
+import { FormCheckLabelDirective } from './form-check/form-check-label.directive';
+import { FormCheckInputDirective } from './form-check/form-check-input.directive';
import { FormFeedbackComponent } from './form-feedback/form-feedback.component';
-import { InputGroupComponent } from './input-group/input-group.component';
-import { FormSelectDirective } from './form-select/form-select.directive';
+import { FormFloatingDirective } from './form-floating/form-floating.directive';
import { FormLabelDirective } from './form-label/form-label.directive';
-import { FormCheckComponent } from './form-check/form-check.component';
-import { FormControlDirective } from './form-control/form-control.directive';
+import { FormSelectDirective } from './form-select/form-select.directive';
import { FormTextDirective } from './form-text/form-text.directive';
-import { FormFloatingDirective } from './form-floating/form-floating.directive';
+import { InputGroupComponent } from './input-group/input-group.component';
import { InputGroupTextDirective } from './input-group-text/input-group-text.directive';
-import { FormCheckLabelDirective } from './form-check/form-check-label.directive';
-import { FormCheckInputDirective } from './form-check/form-check-input.directive';
@NgModule({
imports: [
diff --git a/projects/coreui-angular/src/lib/form/public_api.ts b/projects/coreui-angular/src/lib/form/public_api.ts
index a37a06cd..7fc1a947 100644
--- a/projects/coreui-angular/src/lib/form/public_api.ts
+++ b/projects/coreui-angular/src/lib/form/public_api.ts
@@ -1,13 +1,13 @@
export { FormDirective } from './form/form.directive';
-export { FormFeedbackComponent } from './form-feedback/form-feedback.component';
-export { InputGroupComponent } from './input-group/input-group.component';
-export { FormSelectDirective } from './form-select/form-select.directive';
-export { FormLabelDirective } from './form-label/form-label.directive';
export { FormCheckComponent } from './form-check/form-check.component';
+export { FormControlDirective } from './form-control/form-control.directive';
export { FormCheckInputDirective } from './form-check/form-check-input.directive';
export { FormCheckLabelDirective } from './form-check/form-check-label.directive';
-export { FormControlDirective } from './form-control/form-control.directive';
-export { FormTextDirective } from './form-text/form-text.directive';
+export { FormFeedbackComponent } from './form-feedback/form-feedback.component';
export { FormFloatingDirective } from './form-floating/form-floating.directive';
+export { FormLabelDirective } from './form-label/form-label.directive';
+export { FormSelectDirective } from './form-select/form-select.directive';
+export { FormTextDirective } from './form-text/form-text.directive';
+export { InputGroupComponent } from './input-group/input-group.component';
export { InputGroupTextDirective } from './input-group-text/input-group-text.directive';
export { FormModule } from './form.module';
diff --git a/projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts b/projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts
index 3cdafc6e..8c178499 100644
--- a/projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts
+++ b/projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts
@@ -6,9 +6,10 @@ import {
inject,
input,
InputSignal,
- InputSignalWithTransform
+ InputSignalWithTransform,
+ numberAttribute
} from '@angular/core';
-import { Colors } from '../coreui.types';
+import { BooleanInput, Colors } from '../coreui.types';
@Directive({
selector: '[cListGroupItem], c-list-group-item',
@@ -22,13 +23,16 @@ import { Colors } from '../coreui.types';
}
})
export class ListGroupItemDirective {
+ static ngAcceptInputType_active: BooleanInput;
+ static ngAcceptInputType_disabled: BooleanInput;
+
readonly hostElement = inject(ElementRef);
/**
* Toggle the active state for the component.
- * @type InputSignal
+ * @type InputSignalWithTransform
*/
- readonly active: InputSignal = input();
+ readonly active: InputSignalWithTransform = input(false, { transform: booleanAttribute });
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
@@ -42,12 +46,17 @@ export class ListGroupItemDirective {
*/
readonly disabled: InputSignalWithTransform = input(false, { transform: booleanAttribute });
+ /**
+ * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
+ */
+ readonly tabindex = input(undefined, { transform: numberAttribute });
+
readonly hostClasses = computed(() => {
const host: HTMLElement = this.hostElement.nativeElement;
return {
'list-group-item': true,
'list-group-item-action': host.nodeName === 'A' || host.nodeName === 'BUTTON',
- active: !!this.active(),
+ active: this.active(),
disabled: this._disabled(),
[`list-group-item-${this.color()}`]: !!this.color()
} as Record;
@@ -64,10 +73,10 @@ export class ListGroupItemDirective {
});
readonly tabIndex = computed(() => {
- return this._disabled() ? '-1' : null;
+ return this._disabled() ? '-1' : (this.tabindex() ?? null);
});
readonly ariaCurrent = computed(() => {
- return this.active() || null;
+ return this.active() || null;
});
}
diff --git a/projects/coreui-angular/src/lib/list-group/list-group.directive.ts b/projects/coreui-angular/src/lib/list-group/list-group.directive.ts
index 827f96d4..cfe93e5f 100644
--- a/projects/coreui-angular/src/lib/list-group/list-group.directive.ts
+++ b/projects/coreui-angular/src/lib/list-group/list-group.directive.ts
@@ -1,5 +1,5 @@
import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
-import { Sizes } from '../coreui.types';
+import { BooleanInput, Sizes } from '../coreui.types';
@Directive({
selector: '[cListGroup]',
@@ -9,6 +9,8 @@ import { Sizes } from '../coreui.types';
}
})
export class ListGroupDirective {
+ static ngAcceptInputType_flush: BooleanInput;
+
/**
* Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``).
* @type boolean
diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
index 6a6811eb..279c9b7f 100644
--- a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
+++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
@@ -1,11 +1,12 @@
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { DOCUMENT } from '@angular/common';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import {
AfterViewInit,
booleanAttribute,
Component,
computed,
DestroyRef,
+ DOCUMENT,
effect,
ElementRef,
inject,
@@ -20,7 +21,6 @@ import {
WritableSignal
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { ModalService } from '../modal.service';
import { BackdropService } from '../../backdrop/backdrop.service';
@@ -165,7 +165,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
this.#visible.set(value);
this.setBodyStyles(value);
this.setBackdrop(this.backdrop() !== false && value);
- this.visibleChange.emit(value);
+ this.visibleChange?.emit(value);
}
}
@@ -261,6 +261,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
setTimeout(() => {
if (event.toState === 'hidden') {
this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'none');
+ this.#backdropService.resetScrollbar();
}
});
this.show = this.visible;
diff --git a/projects/coreui-angular/src/lib/nav/nav-link.directive.ts b/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
index e32e7d00..3d83d3fd 100644
--- a/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
@@ -1,4 +1,5 @@
-import { booleanAttribute, computed, Directive, effect, input } from '@angular/core';
+import { booleanAttribute, computed, Directive, effect, input, numberAttribute } from '@angular/core';
+import { BooleanInput } from '../coreui.types';
@Directive({
selector: '[cNavLink]',
@@ -12,6 +13,8 @@ import { booleanAttribute, computed, Directive, effect, input } from '@angular/c
}
})
export class NavLinkDirective {
+ static ngAcceptInputType_disabled: BooleanInput;
+
/**
* Sets .nav-link class to the host. [docs]
* @default true
@@ -30,20 +33,25 @@ export class NavLinkDirective {
*/
readonly disabled = input(false, { transform: booleanAttribute });
+ /**
+ * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
+ */
+ readonly tabindex = input(undefined, { transform: numberAttribute });
+
readonly ariaCurrent = computed(() => {
return this.active() ? 'page' : null;
});
ariaDisabled: boolean | null = null;
attrDisabled: boolean | string | null = null;
- attrTabindex: '-1' | null = null;
+ attrTabindex: number | null = null;
styleCursor: 'pointer' | null = null;
readonly #disabledEffect = effect(() => {
const disabled = this.disabled();
this.ariaDisabled = disabled || null;
this.attrDisabled = disabled ? '' : null;
- this.attrTabindex = disabled ? '-1' : null;
+ this.attrTabindex = disabled ? -1 : (this.tabindex() ?? null);
this.styleCursor = disabled ? null : 'pointer';
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
index 55899436..4ed6e32c 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
@@ -11,7 +11,7 @@ class MockElementRef extends ElementRef {}
imports: [NavbarTogglerDirective, CollapseDirective],
template: `
+ test
`
})
class TestComponent {}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
index 11c037e8..c2af15db 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -1,32 +1,33 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
import {
AfterContentInit,
- afterRender,
+ afterEveryRender,
Component,
computed,
contentChild,
+ DOCUMENT,
ElementRef,
inject,
input,
OnDestroy,
signal
} from '@angular/core';
-import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
-import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Subscription } from 'rxjs';
import { CollapseDirective } from '../collapse';
import { Colors } from '../coreui.types';
import { ThemeDirective } from '../shared';
-import { Subscription } from 'rxjs';
// todo: fix container prop issue not rendering children
// todo: workaround - use component directly in template
@Component({
- selector: 'c-navbar',
- templateUrl: './navbar.component.html',
- imports: [NgClass, NgTemplateOutlet],
- hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
- host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
+ selector: 'c-navbar',
+ templateUrl: './navbar.component.html',
+ imports: [NgClass, NgTemplateOutlet],
+ hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
+ host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
})
export class NavbarComponent implements AfterContentInit, OnDestroy {
readonly #breakpointObserver = inject(BreakpointObserver);
@@ -78,7 +79,7 @@ export class NavbarComponent implements AfterContentInit, OnDestroy {
readonly computedStyle = signal('');
- readonly afterNextRenderFn = afterRender({
+ readonly #afterEveryRenderFn = afterEveryRender({
read: () => {
const expand = this.expand();
if (typeof expand === 'string') {
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
index 1a142315..d568c256 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
@@ -1,9 +1,8 @@
+import { ComponentRef, DOCUMENT } from '@angular/core';
import { ComponentFixture, fakeAsync, flushMicrotasks, TestBed, tick } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OffcanvasComponent } from './offcanvas.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ComponentRef } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
describe('OffcanvasComponent', () => {
let component: OffcanvasComponent;
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
index cb437177..2c410796 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
@@ -1,10 +1,13 @@
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { A11yModule } from '@angular/cdk/a11y';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { isPlatformBrowser } from '@angular/common';
import {
booleanAttribute,
Component,
computed,
DestroyRef,
+ DOCUMENT,
effect,
ElementRef,
inject,
@@ -17,8 +20,6 @@ import {
Renderer2
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { A11yModule } from '@angular/cdk/a11y';
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
@@ -152,7 +153,7 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
this.setBackdrop(false);
}
this.layoutChangeSubscribe(visible);
- this.visibleChange.emit(visible);
+ this.visibleChange?.emit(visible);
});
/**
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 74857979..745a071b 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
@@ -1,9 +1,9 @@
-import { DOCUMENT } from '@angular/common';
import {
ChangeDetectorRef,
Component,
ComponentRef,
DebugElement,
+ DOCUMENT,
ElementRef,
Renderer2,
ViewContainerRef
diff --git a/projects/coreui-angular/src/lib/popover/popover.directive.ts b/projects/coreui-angular/src/lib/popover/popover.directive.ts
index a0370f4e..ec26169d 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.ts
@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common';
import {
AfterViewInit,
ChangeDetectorRef,
@@ -6,6 +5,7 @@ import {
computed,
DestroyRef,
Directive,
+ DOCUMENT,
effect,
ElementRef,
inject,
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.html b/projects/coreui-angular/src/lib/progress/progress.component.html
index f1f7d393..6c718035 100644
--- a/projects/coreui-angular/src/lib/progress/progress.component.html
+++ b/projects/coreui-angular/src/lib/progress/progress.component.html
@@ -2,7 +2,7 @@
+
}
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.ts b/projects/coreui-angular/src/lib/progress/progress.component.ts
index b38324f6..9f4c0811 100644
--- a/projects/coreui-angular/src/lib/progress/progress.component.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.component.ts
@@ -47,7 +47,7 @@ export class ProgressComponent {
readonly stacked = this.#progressService.stacked;
readonly percent = this.#progressService.percent;
- readonly value = this.#progressService.value;
+ readonly barValue = this.#progressService.value;
readonly contentProgressBars = contentChildren(ProgressBarComponent);
diff --git a/projects/coreui-angular/src/lib/progress/public_api.ts b/projects/coreui-angular/src/lib/progress/public_api.ts
index 3f4473bf..51639ddc 100644
--- a/projects/coreui-angular/src/lib/progress/public_api.ts
+++ b/projects/coreui-angular/src/lib/progress/public_api.ts
@@ -1,4 +1,4 @@
-export { IProgress, IProgressBar, IProgressBarStacked } from './progress.type';
+export type { IProgress, IProgressBar, IProgressBarStacked } from './progress.type';
export { ProgressComponent } from './progress.component';
export { ProgressStackedComponent } from './progress-stacked.component';
export { ProgressBarComponent } from './progress-bar.component';
diff --git a/projects/coreui-angular/src/lib/services/class-toggle.service.ts b/projects/coreui-angular/src/lib/services/class-toggle.service.ts
index 9fe206a1..0b6635bd 100644
--- a/projects/coreui-angular/src/lib/services/class-toggle.service.ts
+++ b/projects/coreui-angular/src/lib/services/class-toggle.service.ts
@@ -1,5 +1,4 @@
-import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
@Injectable({
providedIn: 'root'
diff --git a/projects/coreui-angular/src/lib/services/color-mode.service.ts b/projects/coreui-angular/src/lib/services/color-mode.service.ts
index a3148a95..c681ed84 100644
--- a/projects/coreui-angular/src/lib/services/color-mode.service.ts
+++ b/projects/coreui-angular/src/lib/services/color-mode.service.ts
@@ -1,5 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { afterNextRender, DestroyRef, effect, inject, Injectable, signal, WritableSignal } from '@angular/core';
+import {
+ afterNextRender,
+ DestroyRef,
+ DOCUMENT,
+ effect,
+ inject,
+ Injectable,
+ signal,
+ WritableSignal
+} from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';
import { LocalStorageService } from './local-storage.service';
diff --git a/projects/coreui-angular/src/lib/services/local-storage.service.ts b/projects/coreui-angular/src/lib/services/local-storage.service.ts
index a29ef3c3..75531a95 100644
--- a/projects/coreui-angular/src/lib/services/local-storage.service.ts
+++ b/projects/coreui-angular/src/lib/services/local-storage.service.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, inject, Injectable, PLATFORM_ID } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { InMemoryStorageService } from './in-memory-storage.service';
diff --git a/projects/coreui-angular/src/lib/services/public_api.ts b/projects/coreui-angular/src/lib/services/public_api.ts
index 4910fed4..3d3a0ac3 100644
--- a/projects/coreui-angular/src/lib/services/public_api.ts
+++ b/projects/coreui-angular/src/lib/services/public_api.ts
@@ -1,8 +1,8 @@
-export { IntersectionService, IIntersectionObserverInit } from './intersection.service';
-export { ListenersService, IListenersConfig } from './listeners.service';
+export { IntersectionService, type IIntersectionObserverInit } from './intersection.service';
+export { ListenersService, type IListenersConfig } from './listeners.service';
export { ClassToggleService } from './class-toggle.service';
export { LocalStorageService } from './local-storage.service';
export { InMemoryStorageService } from './in-memory-storage.service';
-export { ColorModeService, ColorMode } from './color-mode.service';
+export { ColorModeService, type ColorMode } from './color-mode.service';
export { UIDService } from './uid.service';
export { RtlService } from './rtl.service';
diff --git a/projects/coreui-angular/src/lib/services/rtl.service.ts b/projects/coreui-angular/src/lib/services/rtl.service.ts
index 2752333f..4863d55e 100644
--- a/projects/coreui-angular/src/lib/services/rtl.service.ts
+++ b/projects/coreui-angular/src/lib/services/rtl.service.ts
@@ -1,5 +1,4 @@
-import { inject, Injectable } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, inject, Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
diff --git a/projects/coreui-angular/src/lib/services/script-injector.service.ts b/projects/coreui-angular/src/lib/services/script-injector.service.ts
index e200fdfe..cd6e431e 100644
--- a/projects/coreui-angular/src/lib/services/script-injector.service.ts
+++ b/projects/coreui-angular/src/lib/services/script-injector.service.ts
@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, Renderer2 } from '@angular/core';
+import { DOCUMENT, inject, Injectable, Renderer2 } from '@angular/core';
export type ReferrerPolicy =
| ''
diff --git a/projects/coreui-angular/src/lib/services/uid.service.ts b/projects/coreui-angular/src/lib/services/uid.service.ts
index 16003de7..d168430d 100644
--- a/projects/coreui-angular/src/lib/services/uid.service.ts
+++ b/projects/coreui-angular/src/lib/services/uid.service.ts
@@ -1,5 +1,4 @@
-import { inject, Injectable } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, inject, Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
diff --git a/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts b/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
index 8915f2f9..34b71231 100644
--- a/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
@@ -1,8 +1,8 @@
+import { NgTemplateOutlet } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TemplateIdDirective } from './template-id.directive';
import { Component, computed, DebugElement, TemplateRef, viewChild } from '@angular/core';
import { By } from '@angular/platform-browser';
-import { NgTemplateOutlet } from '@angular/common';
+import { TemplateIdDirective } from './template-id.directive';
@Component({
imports: [TemplateIdDirective, NgTemplateOutlet],
@@ -16,7 +16,7 @@ import { NgTemplateOutlet } from '@angular/common';
class TestComponent {
readonly templateId = viewChild(TemplateIdDirective);
- readonly id = computed(() => this.templateId()?.templateRef);
+ readonly id = computed(() => this.templateId()?.templateRef ?? null);
}
describe('TemplateIdDirective', () => {
@@ -26,8 +26,7 @@ describe('TemplateIdDirective', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [TestComponent],
- providers: [TemplateRef]
+ imports: [TestComponent]
}).compileComponents();
fixture = TestBed.createComponent(TestComponent);
@@ -36,19 +35,25 @@ describe('TemplateIdDirective', () => {
fixture.detectChanges();
});
- it('should create an instance', () => {
- TestBed.runInInjectionContext(() => {
- const directive = new TemplateIdDirective();
- expect(directive).toBeTruthy();
- });
- });
it('should create a template with innerText', () => {
expect(debugElement.nativeElement.innerText).toBe('Inner Text');
});
- it('should get the template id', () => {
+ it('should return the correct id when cTemplateId is set', () => {
+ expect(component.templateId()?.id).toBe('test');
+ });
+
+ it('should correctly bind the templateRef to the directive', () => {
+ expect(component.templateId()?.templateRef).toBeInstanceOf(TemplateRef);
+ });
+
+ it('should handle multiple instances of the directive with unique ids', () => {
+ const secondFixture = TestBed.createComponent(TestComponent);
+ const secondComponent = secondFixture.componentInstance;
+ secondFixture.detectChanges();
+
expect(component.templateId()?.id).toBe('test');
- expect(component.templateId()?.templateRef).toEqual(jasmine.any(TemplateRef));
+ expect(secondComponent.templateId()?.id).toBe('test');
});
});
diff --git a/projects/coreui-angular/src/lib/sidebar/public_api.ts b/projects/coreui-angular/src/lib/sidebar/public_api.ts
index 8dd56985..597aacc0 100644
--- a/projects/coreui-angular/src/lib/sidebar/public_api.ts
+++ b/projects/coreui-angular/src/lib/sidebar/public_api.ts
@@ -6,6 +6,6 @@ export { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.direc
export { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
export { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
-export { SidebarNavComponent, INavData, SidebarNavHelper } from './sidebar-nav';
+export { SidebarNavComponent, type INavData, SidebarNavHelper } from './sidebar-nav';
export { SidebarModule } from './sidebar.module';
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-backdrop/sidebar-backdrop.service.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-backdrop/sidebar-backdrop.service.ts
index f47fb468..5173f0f0 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-backdrop/sidebar-backdrop.service.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-backdrop/sidebar-backdrop.service.ts
@@ -1,5 +1,4 @@
-import { inject, Injectable, Renderer2 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, inject, Injectable, Renderer2 } from '@angular/core';
import { SidebarService } from '../sidebar.service';
import { SidebarComponent } from '../sidebar/sidebar.component';
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/public_api.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/public_api.ts
index fe0b25fd..2cb183c9 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/public_api.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/public_api.ts
@@ -11,6 +11,4 @@ export { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
export { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
export { SidebarNavItemClassPipe } from './sidebar-nav-item-class.pipe';
export { SidebarNavLinkPipe } from './sidebar-nav-link.pipe';
-export { INavData } from './sidebar-nav';
-
-
+export type { INavData } from './sidebar-nav';
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 561a65aa..3caeeec0 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
@@ -111,7 +111,7 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
}
linkClicked(): void {
- this.linkClick.emit();
+ this.linkClick?.emit();
}
// public hideMobile() {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts
index 7c73d812..7edb74ec 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts
@@ -2,6 +2,7 @@ import {
booleanAttribute,
Component,
computed,
+ DOCUMENT,
effect,
inject,
input,
@@ -14,7 +15,6 @@ import {
signal,
SimpleChanges
} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
@@ -129,7 +129,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
readonly #visible = linkedSignal(this.visibleInput);
readonly #visibleEffect = effect(() => {
- this.visibleChange.emit(this.#visible());
+ this.visibleChange?.emit(this.#visible());
});
set visible(value: boolean) {
diff --git a/projects/coreui-angular/src/lib/table/table-color.directive.ts b/projects/coreui-angular/src/lib/table/table-color.directive.ts
index cbe26c01..6223252a 100644
--- a/projects/coreui-angular/src/lib/table/table-color.directive.ts
+++ b/projects/coreui-angular/src/lib/table/table-color.directive.ts
@@ -13,11 +13,12 @@ export class TableColorDirective {
* Use contextual color for tables, table rows or individual cells.
* @return Colors
*/
- readonly color = input(undefined, { alias: 'cTableColor' });
+ readonly color = input(undefined, { alias: 'cTableColor' });
readonly hostClasses = computed(() => {
+ const color = this.color();
return {
- [`table-${this.color()}`]: !!this.color()
+ [`table-${color}`]: !!color
} as Record;
});
}
diff --git a/projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts b/projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts
index a3826cff..570ea75b 100644
--- a/projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts
+++ b/projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts
@@ -2,8 +2,6 @@ import { animate, animateChild, AnimationEvent, query, state, style, transition,
import {
Component,
computed,
- HostBinding,
- HostListener,
inject,
input,
InputSignal,
@@ -24,10 +22,13 @@ type VisibleChangeEvent = { itemKey: string | number; visible: boolean };
template: ' = input.required();
+ /**
+ * Element role.
+ * @type string
+ * @default 'tabpanel'
+ */
+ readonly role: InputSignal = input('tabpanel');
+
/**
* tabindex attribute.
* @type number
@@ -88,7 +96,7 @@ export class TabPanelComponent {
readonly visible = computed(() => {
const visible = this.tabsService.activeItemKey() === this.itemKey() && !this.tabsService.activeItem()?.disabled;
- this.visibleChange.emit({ itemKey: this.itemKey(), visible });
+ this.visibleChange?.emit({ itemKey: this.itemKey(), visible });
return visible;
});
@@ -98,25 +106,17 @@ export class TabPanelComponent {
() => this.ariaLabelledBy() ?? `${this.tabsService.id()}-tab-${this.itemKey()}`
);
- readonly hostClasses = computed(() => ({
- 'tab-pane': true,
- active: this.show(),
- fade: this.transition(),
- show: this.show(),
- invisible: this.tabsService.activeItem()?.disabled
- }) as Record);
-
- @HostBinding('@.disabled')
- get animationDisabled(): boolean {
- return !this.transition();
- }
-
- @HostBinding('@fadeInOut')
- get animateType(): AnimateType {
- return this.visible() ? 'show' : 'hide';
- }
+ readonly hostClasses = computed(
+ () =>
+ ({
+ 'tab-pane': true,
+ active: this.show(),
+ fade: this.transition(),
+ show: this.show(),
+ invisible: this.tabsService.activeItem()?.disabled
+ }) as Record
+ );
- @HostListener('@fadeInOut.done', ['$event'])
onAnimationDone($event: AnimationEvent): void {
this.show.set(this.visible());
}
diff --git a/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts b/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
index f0d47731..a91b4317 100644
--- a/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
+++ b/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
@@ -5,7 +5,6 @@ import {
contentChildren,
DestroyRef,
effect,
- HostListener,
inject,
input,
InputSignal,
@@ -19,11 +18,11 @@ import { TabsService } from '../tabs.service';
@Component({
exportAs: 'cTabsList',
selector: 'c-tabs-list',
- imports: [],
template: ');
+ readonly hostClasses = computed(
+ () =>
+ ({
+ nav: true,
+ [`nav-${this.layout()}`]: this.layout(),
+ [`nav-${this.variant()}`]: this.variant()
+ }) as Record
+ );
readonly tabs = contentChildren(TabDirective);
#focusKeyManager!: FocusKeyManager;
@@ -98,8 +100,7 @@ export class TabsListComponent {
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
});
- @HostListener('keydown', ['$event'])
- onKeydown($event: any) {
+ onKeyDown($event: any) {
if (['ArrowLeft', 'ArrowRight'].includes($event.key)) {
this.#focusKeyManager.onKeydown($event);
return;
diff --git a/projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts b/projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts
index 0f4b6df9..7aab3fcc 100644
--- a/projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts
+++ b/projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts
@@ -5,13 +5,12 @@ import {
ChangeDetectorRef,
Component,
ContentChildren,
- EventEmitter,
inject,
Input,
numberAttribute,
OnChanges,
OnDestroy,
- Output,
+ output,
QueryList,
SimpleChanges
} from '@angular/core';
@@ -41,7 +40,7 @@ export class TabContentComponent implements AfterContentChecked, AfterContentIni
const newValue = value;
if (this.#activeTabPaneIdx != newValue) {
this.#activeTabPaneIdx = newValue;
- this.activeTabPaneIdxChange.emit(newValue);
+ this.activeTabPaneIdxChange?.emit(newValue);
this.#changeDetectorRef.markForCheck();
this.#changeDetectorRef.detectChanges();
}
@@ -56,7 +55,7 @@ export class TabContentComponent implements AfterContentChecked, AfterContentIni
/**
* Event emitted on the active tab pane index change.
*/
- @Output() activeTabPaneIdxChange: EventEmitter = new EventEmitter();
+ readonly activeTabPaneIdxChange = output();
@ContentChildren(TabPaneComponent) public panes!: QueryList;
#tabServiceSubscription!: Subscription;
diff --git a/projects/coreui-angular/src/lib/toast/public_api.ts b/projects/coreui-angular/src/lib/toast/public_api.ts
index 6f166129..05241244 100644
--- a/projects/coreui-angular/src/lib/toast/public_api.ts
+++ b/projects/coreui-angular/src/lib/toast/public_api.ts
@@ -1,7 +1,7 @@
export { ToastComponent } from './toast/toast.component';
export { ToastBodyComponent } from './toast-body/toast-body.component';
export { ToastHeaderComponent } from './toast-header/toast-header.component';
-export { ToasterComponent, TToasterPlacement, ToasterPlacement } from './toaster/toaster.component';
+export { ToasterComponent, type TToasterPlacement, ToasterPlacement } from './toaster/toaster.component';
export { ToasterService } from './toaster/toaster.service';
export { ToasterHostDirective } from './toaster/toaster-host.directive';
export { ToastCloseDirective } from './toast-close.directive';
diff --git a/projects/coreui-angular/src/lib/toast/toast/toast.component.ts b/projects/coreui-angular/src/lib/toast/toast/toast.component.ts
index 5d99dbd9..2377174c 100644
--- a/projects/coreui-angular/src/lib/toast/toast/toast.component.ts
+++ b/projects/coreui-angular/src/lib/toast/toast/toast.component.ts
@@ -107,7 +107,7 @@ export class ToastComponent implements OnInit, OnDestroy {
if (this.#visible !== newValue) {
this.#visible = newValue;
newValue ? this.setTimer() : this.clearTimer();
- this.visibleChange.emit(newValue);
+ this.visibleChange?.emit(newValue);
this.changeDetectorRef.markForCheck();
}
}
@@ -147,7 +147,7 @@ export class ToastComponent implements OnInit, OnDestroy {
set clock(value) {
this._clock = value;
- this.timer.emit(this._clock);
+ this.timer?.emit(this._clock);
this.changeDetectorRef.markForCheck();
}
diff --git a/projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts b/projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts
index 5b902bed..1822c702 100644
--- a/projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts
+++ b/projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts
@@ -127,7 +127,7 @@ export class ToasterComponent implements OnInit {
componentRef.setInput('dynamic', true);
componentRef.setInput('index', index);
componentRef.setInput('visible', true);
- componentRef.instance['visibleChange'].emit(true);
+ componentRef.instance['visibleChange']?.emit(true);
componentRef.changeDetectorRef?.detectChanges();
return componentRef;
}
diff --git a/projects/coreui-angular/src/lib/tooltip/tooltip.directive.spec.ts b/projects/coreui-angular/src/lib/tooltip/tooltip.directive.spec.ts
index 4a826ac1..cc59962f 100644
--- a/projects/coreui-angular/src/lib/tooltip/tooltip.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/tooltip/tooltip.directive.spec.ts
@@ -1,9 +1,9 @@
-import { DOCUMENT } from '@angular/common';
import {
ChangeDetectorRef,
Component,
ComponentRef,
DebugElement,
+ DOCUMENT,
ElementRef,
Renderer2,
ViewContainerRef
diff --git a/projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts b/projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts
index baa4672d..bd22e514 100644
--- a/projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts
+++ b/projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts
@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common';
import {
AfterViewInit,
ChangeDetectorRef,
@@ -6,6 +5,7 @@ import {
computed,
DestroyRef,
Directive,
+ DOCUMENT,
effect,
ElementRef,
inject,
diff --git a/projects/coreui-angular/src/lib/utilities/align.directive.ts b/projects/coreui-angular/src/lib/utilities/align.directive.ts
index f7184c40..936f5434 100644
--- a/projects/coreui-angular/src/lib/utilities/align.directive.ts
+++ b/projects/coreui-angular/src/lib/utilities/align.directive.ts
@@ -11,7 +11,7 @@ export class AlignDirective {
* Set vertical alignment of inline, inline-block, inline-table, and table cell elements
* @return Alignment
*/
- readonly align = input(undefined, { alias: 'cAlign' });
+ readonly align = input(undefined, { alias: 'cAlign' });
readonly hostClasses = computed(() => {
const align = this.align();
diff --git a/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts b/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts
index f3f73879..6026c1d5 100644
--- a/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts
@@ -1,12 +1,11 @@
-import { Component, DebugElement, ElementRef } from '@angular/core';
+import { Component, DebugElement, DOCUMENT, ElementRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ShadowOnScrollDirective } from './shadow-on-scroll.directive';
import { By } from '@angular/platform-browser';
-import { DOCUMENT } from '@angular/common';
@Component({
imports: [ShadowOnScrollDirective],
- template: '
'
+ template: '
'
})
class TestComponent {}
diff --git a/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.ts b/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.ts
index fc865753..4a3088aa 100644
--- a/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.ts
+++ b/projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.ts
@@ -1,5 +1,15 @@
-import { DOCUMENT } from '@angular/common';
-import { DestroyRef, Directive, effect, ElementRef, inject, input, signal, untracked, WritableSignal } from '@angular/core';
+import {
+ DestroyRef,
+ Directive,
+ DOCUMENT,
+ effect,
+ ElementRef,
+ inject,
+ input,
+ signal,
+ untracked,
+ WritableSignal
+} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent, Subscription } from 'rxjs';
diff --git a/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts b/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts
index 68ac1dec..3d90ebe9 100644
--- a/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/utilities/visible.directive.spec.ts
@@ -1,5 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Component, DebugElement, signal } from '@angular/core';
import { By } from '@angular/platform-browser';
import { VisibleDirective } from './visible.directive';
@@ -8,7 +8,7 @@ import { VisibleDirective } from './visible.directive';
template: 'Test Node '
})
class TestComponent {
- readonly visible = input(true);
+ readonly visible = signal(true);
}
describe('VisibleDirective', () => {
@@ -18,8 +18,7 @@ describe('VisibleDirective', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [TestComponent],
- providers: [TemplateRef, ViewContainerRef]
+ imports: [TestComponent]
}).compileComponents();
fixture = TestBed.createComponent(TestComponent);
@@ -28,10 +27,37 @@ describe('VisibleDirective', () => {
fixture.detectChanges();
});
- it('should create an instance', () => {
- TestBed.runInInjectionContext(() => {
- const directive = new VisibleDirective();
- expect(directive).toBeTruthy();
- });
+ it('should display the content when cVisible is true', () => {
+ component.visible.set(true);
+ fixture.detectChanges();
+ const content = fixture.nativeElement.textContent.trim();
+ expect(content).toBe('Test Node');
+ });
+
+ it('should not display the content when cVisible is false', () => {
+ component.visible.set(false);
+ fixture.detectChanges();
+ const content = fixture.nativeElement.textContent.trim();
+ expect(content).toBe('');
+ });
+
+ it('should toggle visibility when cVisible changes from true to false', () => {
+ component.visible.set(true);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.textContent.trim()).toBe('Test Node');
+
+ component.visible.set(false);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.textContent.trim()).toBe('');
+ });
+
+ it('should toggle visibility when cVisible changes from false to true', () => {
+ component.visible.set(false);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.textContent.trim()).toBe('');
+
+ component.visible.set(true);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.textContent.trim()).toBe('Test Node');
});
});
diff --git a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts
index 4f48d014..67beac29 100644
--- a/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts
+++ b/projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts
@@ -10,9 +10,7 @@ describe('WidgetStatBComponent', () => {
await TestBed.configureTestingModule({
imports: [WidgetStatBComponent]
}).compileComponents();
- });
- beforeEach(() => {
fixture = TestBed.createComponent(WidgetStatBComponent);
component = fixture.componentInstance;
fixture.detectChanges();
diff --git a/projects/coreui-angular/src/test.ts b/projects/coreui-angular/src/test.ts
index 16a90bfc..72463202 100644
--- a/projects/coreui-angular/src/test.ts
+++ b/projects/coreui-angular/src/test.ts
@@ -3,7 +3,7 @@
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';
// make the warning to fail
// console.warn = (message) => {
@@ -11,6 +11,6 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
// };
// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
teardown: { destroyAfterEach: true }
});
diff --git a/projects/coreui-angular/tsconfig.lib.json b/projects/coreui-angular/tsconfig.lib.json
index 31e1e6a1..3879b4cd 100644
--- a/projects/coreui-angular/tsconfig.lib.json
+++ b/projects/coreui-angular/tsconfig.lib.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
@@ -11,8 +12,5 @@
"exclude": [
"src/test.ts",
"**/*.spec.ts"
- ],
- "angularCompilerOptions": {
- "compilationMode": "partial"
- }
+ ]
}
diff --git a/projects/coreui-angular/tsconfig.lib.prod.json b/projects/coreui-angular/tsconfig.lib.prod.json
index 06de549e..9215caac 100644
--- a/projects/coreui-angular/tsconfig.lib.prod.json
+++ b/projects/coreui-angular/tsconfig.lib.prod.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
diff --git a/projects/coreui-angular/tsconfig.schematics.json b/projects/coreui-angular/tsconfig.schematics.json
index 513e9c46..200c9648 100644
--- a/projects/coreui-angular/tsconfig.schematics.json
+++ b/projects/coreui-angular/tsconfig.schematics.json
@@ -1,3 +1,5 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compilerOptions": {
"baseUrl": ".",
diff --git a/projects/coreui-angular/tsconfig.spec.json b/projects/coreui-angular/tsconfig.spec.json
index 715dd0a5..0d10fb5a 100644
--- a/projects/coreui-angular/tsconfig.spec.json
+++ b/projects/coreui-angular/tsconfig.spec.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
diff --git a/projects/coreui-icons-angular/README.md b/projects/coreui-icons-angular/README.md
index 441225a0..ac8b033c 100644
--- a/projects/coreui-icons-angular/README.md
+++ b/projects/coreui-icons-angular/README.md
@@ -24,22 +24,34 @@
·
Blog
+
+Featured CoreUI for Angular libraries:
+CoreUI Components for Angular
+CoreUI Angular wrapper for Chart.js v4
+CoreUI Icons for Angular
+
+ | undefined>(undefined);
-
- constructor() {
- afterNextRender(() => {
- this.#hostElement.set(this.#elementRef);
- });
- }
readonly content = input();
@@ -53,12 +35,12 @@ export class IconComponent implements IIcon {
readonly svgElementRef = viewChild('svgElement');
- readonly svgElementEffect = effect(() => {
+ readonly #svgElementEffect = effect(() => {
const svgElementRef = this.svgElementRef();
- const hostElement = this.#hostElement()?.nativeElement;
+ const hostElement: Element = this.#elementRef.nativeElement;
if (svgElementRef && hostElement) {
const svgElement = svgElementRef.nativeElement;
- hostElement.classList?.values()?.forEach((item: string) => {
+ hostElement.classList?.forEach((item: string) => {
this.#renderer.addClass(svgElement, item);
});
const parentElement = this.#renderer.parentNode(hostElement);
diff --git a/projects/coreui-icons-angular/src/public-api.ts b/projects/coreui-icons-angular/src/public-api.ts
index e5b4cbfa..cd197290 100644
--- a/projects/coreui-icons-angular/src/public-api.ts
+++ b/projects/coreui-icons-angular/src/public-api.ts
@@ -4,5 +4,5 @@
export { IconDirective } from './lib/icon/icon.directive';
export { IconComponent } from './lib/icon/icon.component';
export { IconModule } from './lib/icon/icon.module';
-export { IconSetService, IIconSet } from './lib/icon-set/icon-set.service';
+export { IconSetService, type IIconSet } from './lib/icon-set/icon-set.service';
export { IconSetModule } from './lib/icon-set/icon-set.module';
diff --git a/projects/coreui-icons-angular/tsconfig.json b/projects/coreui-icons-angular/tsconfig.json
index 7c7247fa..f32c6659 100644
--- a/projects/coreui-icons-angular/tsconfig.json
+++ b/projects/coreui-icons-angular/tsconfig.json
@@ -10,6 +10,9 @@
},
{
"path": "./tsconfig.spec.json"
+ },
+ {
+ "path": "./tsconfig.schematics.json"
}
]
}
diff --git a/projects/coreui-icons-angular/tsconfig.lib.json b/projects/coreui-icons-angular/tsconfig.lib.json
index b77b13c0..3879b4cd 100644
--- a/projects/coreui-icons-angular/tsconfig.lib.json
+++ b/projects/coreui-icons-angular/tsconfig.lib.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
diff --git a/projects/coreui-icons-angular/tsconfig.lib.prod.json b/projects/coreui-icons-angular/tsconfig.lib.prod.json
index 599e1bdf..478e15bd 100644
--- a/projects/coreui-icons-angular/tsconfig.lib.prod.json
+++ b/projects/coreui-icons-angular/tsconfig.lib.prod.json
@@ -1,8 +1,9 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
- "declarationMap": false,
+ "declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
diff --git a/projects/coreui-icons-angular/tsconfig.schematics.json b/projects/coreui-icons-angular/tsconfig.schematics.json
index 13131e4f..027f35d2 100644
--- a/projects/coreui-icons-angular/tsconfig.schematics.json
+++ b/projects/coreui-icons-angular/tsconfig.schematics.json
@@ -1,3 +1,5 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compilerOptions": {
"baseUrl": ".",
diff --git a/projects/coreui-icons-angular/tsconfig.spec.json b/projects/coreui-icons-angular/tsconfig.spec.json
index 65020c8b..56ad847a 100644
--- a/projects/coreui-icons-angular/tsconfig.spec.json
+++ b/projects/coreui-icons-angular/tsconfig.spec.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
diff --git a/tsconfig.json b/tsconfig.json
index 5bebe447..1baa4cea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
@@ -22,6 +23,7 @@
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
+ "isolatedModules": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
@@ -30,8 +32,7 @@
"resolveJsonModule": true,
"importHelpers": true,
"target": "ES2022",
- "module": "ES2022",
- "useDefineForClassFields": false,
+ "module": "preserve",
"typeRoots": [
"node_modules/@types"
],
@@ -44,6 +45,7 @@
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
+ "typeCheckHostBindings": true,
"strictTemplates": true
}
}
