+
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
index 67d67820..9bde6560 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -1,10 +1,22 @@
-import { AfterContentInit, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import {
+ AfterContentInit,
+ afterRender,
+ Component,
+ computed,
+ contentChild,
+ ElementRef,
+ inject,
+ input,
+ OnDestroy,
+ signal
+} from '@angular/core';
+import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
import { BreakpointObserver } from '@angular/cdk/layout';
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
@@ -15,79 +27,106 @@ import { ThemeDirective } from '../shared';
standalone: true,
imports: [NgClass, NgTemplateOutlet],
hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
- host: { class: 'navbar' }
+ host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
})
-export class NavbarComponent implements AfterContentInit {
+export class NavbarComponent implements AfterContentInit, OnDestroy {
+ readonly #breakpointObserver = inject(BreakpointObserver);
+ readonly #document = inject(DOCUMENT);
+ readonly #hostElement = inject(ElementRef);
+
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
* @type Colors
*/
- @Input() color?: Colors;
+ readonly color = input();
+
/**
* Defines optional container wrapping children elements.
*/
- @Input() container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
+ readonly container = input();
+
/**
* Defines the responsive breakpoint to determine when content collapses.
*/
- @Input() expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ readonly expand = input();
+
/**
* Place component in non-static positions.
*/
- @Input() placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top';
+ readonly placement = input<'fixed-top' | 'fixed-bottom' | 'sticky-top'>();
- @ContentChild(CollapseDirective) collapse!: CollapseDirective;
+ readonly role = input('navigation');
- @HostBinding('attr.role')
- @Input()
- role = 'navigation';
+ readonly collapse = contentChild(CollapseDirective);
- constructor(
- private hostElement: ElementRef,
- private breakpointObserver: BreakpointObserver
- ) {}
-
- @HostBinding('class')
- get hostClasses(): any {
- const expandClassSuffix: string = this.expand === true ? '' : `-${this.expand}`;
+ readonly hostClasses = computed(() => {
+ const color = this.color();
+ const expand = this.expand();
+ const expandClassSuffix: string = expand === true ? '' : `-${expand}`;
+ const placement = this.placement();
return {
navbar: true,
- [`navbar-expand${expandClassSuffix}`]: !!this.expand,
- [`bg-${this.color}`]: !!this.color,
- [`${this.placement}`]: !!this.placement
- };
- }
+ [`navbar-expand${expandClassSuffix}`]: !!expand,
+ [`bg-${color}`]: !!color,
+ [`${placement}`]: !!placement
+ } as Record;
+ });
- get containerClass(): string {
- return `container${this.container !== true ? '-' + this.container : ''}`;
- }
+ readonly containerClass = computed(() => {
+ const container = this.container();
+ return `container${container !== true ? '-' + container : ''}`;
+ });
- get breakpoint(): string | boolean {
- if (typeof this.expand === 'string') {
- return (
- getComputedStyle(this.hostElement.nativeElement)?.getPropertyValue(`--cui-breakpoint-${this.expand}`) ?? false
- );
+ readonly computedStyle = signal('');
+
+ readonly afterNextRenderFn = afterRender({
+ read: () => {
+ const expand = this.expand();
+ if (typeof expand === 'string') {
+ const computedStyle =
+ this.#document.defaultView
+ ?.getComputedStyle(this.#hostElement.nativeElement)
+ ?.getPropertyValue(`--cui-breakpoint-${expand}`) ?? false;
+ computedStyle && this.computedStyle.set(computedStyle);
+ }
+ }
+ });
+
+ readonly breakpoint = computed(() => {
+ const expand = this.expand();
+ if (typeof expand === 'string') {
+ return this.computedStyle();
}
return false;
- }
+ });
+
+ #observer!: Subscription;
ngAfterContentInit(): void {
- if (this.breakpoint) {
- const onBreakpoint = `(min-width: ${this.breakpoint})`;
- this.breakpointObserver.observe([onBreakpoint]).subscribe((result) => {
- if (this.collapse) {
- const animate = this.collapse.animate;
- // todo: collapse animate input signal setter
- this.collapse.animate = false;
- this.collapse.toggle(false);
- setTimeout(() => {
- this.collapse.toggle(result.matches);
+ const breakpoint = this.breakpoint();
+ if (breakpoint) {
+ const onBreakpoint = `(min-width: ${breakpoint})`;
+ this.#observer = this.#breakpointObserver
+ .observe([onBreakpoint])
+ .pipe()
+ .subscribe((result) => {
+ const collapse = this.collapse();
+ if (collapse) {
+ const animate = collapse.animate();
+ collapse.animate.set(false);
+ collapse.toggle(false);
setTimeout(() => {
- this.collapse.animate = animate;
+ collapse.toggle(result.matches);
+ setTimeout(() => {
+ collapse.animate.set(animate);
+ });
});
- });
- }
- });
+ }
+ });
}
}
+
+ ngOnDestroy(): void {
+ this.#observer?.unsubscribe();
+ }
}
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 6fe67d1d..a83ce571 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
@@ -193,7 +193,9 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
const element: Element = this.document.documentElement;
const responsiveBreakpoint = this.responsive;
const breakpointValue =
- getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) ?? false;
+ this.document.defaultView
+ ?.getComputedStyle(element)
+ ?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) ?? false;
return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
}
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 b55d1ecb..527cb7ff 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
@@ -85,7 +85,7 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
this.url =
typeof this.item.url === 'string'
? this.item.url
- : this.router.serializeUrl(this.router.createUrlTree(this.item.url as any[]));
+ : this.router.serializeUrl(this.router.createUrlTree((this.item.url as any[]) ?? ['']));
this.linkType = this.getLinkType();
this.href = this.isDisabled() ? '' : this.item.href || this.url;
this.linkActive = this.router.url.split(/[?#(;]/)[0] === this.href.split(/[?#(;]/)[0];
@@ -110,7 +110,7 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
public isExternalLink(): boolean {
const linkPath = Array.isArray(this.item.url) ? this.item.url[0] : this.item.url;
- return !!this.item.href || linkPath.substring(0, 4) === 'http';
+ return !!this.item.href || linkPath?.substring(0, 4) === 'http';
}
linkClicked(): void {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
index bb45b62b..521650c6 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
@@ -160,22 +160,26 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
onAnimationStart($event: AnimationEvent) {
this.display = { display: 'block' };
- if ($event.toState === 'open') {
- const host = this.sidebarNav.nativeElement;
- this.renderer.setStyle(host, 'height', `${host['scrollHeight']}px`);
- }
+ setTimeout(() => {
+ const host = this.sidebarNav?.nativeElement;
+ if ($event.toState === 'open' && host) {
+ this.renderer.setStyle(host, 'height', `${host['scrollHeight']}px`);
+ }
+ });
}
onAnimationDone($event: AnimationEvent) {
- if ($event.toState === 'open') {
- const host = this.sidebarNav.nativeElement;
- this.renderer.setStyle(host, 'height', 'auto');
- }
- if ($event.toState === 'closed') {
- setTimeout(() => {
- this.display = null;
- });
- }
+ setTimeout(() => {
+ const host = this.sidebarNav?.nativeElement;
+ if ($event.toState === 'open' && host) {
+ this.renderer.setStyle(host, 'height', 'auto');
+ }
+ if ($event.toState === 'closed') {
+ setTimeout(() => {
+ this.display = null;
+ });
+ }
+ });
}
}
diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json
index 3088b19e..e96bc18f 100644
--- a/projects/coreui-icons-angular/package.json
+++ b/projects/coreui-icons-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/icons-angular",
- "version": "5.2.21",
+ "version": "5.2.22",
"description": "CoreUI Icons Angular component and service",
"copyright": "Copyright 2024 creativeLabs Łukasz Holeczek",
"license": "MIT",
diff --git a/projects/coreui-icons-angular/src/lib/icon/icon.directive.ts b/projects/coreui-icons-angular/src/lib/icon/icon.directive.ts
index ff4c7e5c..42f710e7 100644
--- a/projects/coreui-icons-angular/src/lib/icon/icon.directive.ts
+++ b/projects/coreui-icons-angular/src/lib/icon/icon.directive.ts
@@ -8,7 +8,8 @@ import { transformName } from './icon.utils';
@Directive({
exportAs: 'cIcon',
selector: 'svg[cIcon]',
- standalone: true
+ standalone: true,
+ host: { ngSkipHydration: 'true', '[innerHtml]': 'innerHtml()' }
})
export class IconDirective implements IIcon {
readonly #elementRef = inject(ElementRef);
@@ -78,13 +79,8 @@ export class IconDirective implements IIcon {
return this.computedClasses;
}
- @HostBinding('innerHtml')
- get bindInnerHtml() {
- return this.innerHtml();
- }
-
readonly innerHtml = computed(() => {
- const code = Array.isArray(this.code()) ? this.code()[1] ?? this.code()[0] ?? '' : this.code() || '';
+ const code = Array.isArray(this.code()) ? (this.code()[1] ?? this.code()[0] ?? '') : this.code() || '';
// todo proper sanitize
// const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
return this.#sanitizer.bypassSecurityTrustHtml(this.titleCode + code || '');
@@ -103,8 +99,7 @@ export class IconDirective implements IIcon {
}
if (this.#name() && !this.#iconSet?.icons[this.#name()]) {
console.warn(
- `c-icon component: icon name '${this.#name()}' does not exist for IconSet service. ` +
- `To use icon by 'name' prop you need to add it to IconSet service. \n`,
+ `cIcon directive: The '${this.#name()}' icon not found. Add it to the IconSet service for use with the 'name' property. \n`,
this.#name()
);
}
@@ -112,7 +107,7 @@ export class IconDirective implements IIcon {
});
readonly scale = computed(() => {
- return Array.isArray(this.code()) && this.code().length > 1 ? `0 0 ${this.code()[0]}` : '0 0 64 64';
+ return Array.isArray(this.code()) && (this.code()?.length ?? 0) > 1 ? `0 0 ${this.code()?.[0]}` : '0 0 64 64';
});
get computedSize(): Exclude | undefined {