-
+
+
diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal/modal.component.spec.ts
index a98d893b..b49afc6e 100644
--- a/projects/coreui-angular/src/lib/modal/modal/modal.component.spec.ts
+++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.spec.ts
@@ -22,4 +22,19 @@ describe('ModalComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('modal');
+ expect(fixture.nativeElement).toHaveClass('fade');
+ });
+
+ // it('should be visible', fakeAsync(() => {
+ // fixture.componentRef.setInput('visible', true);
+ // fixture.detectChanges();
+ // expect(fixture.nativeElement).toHaveClass('show');
+ // }));
+
+ // it('should call event handling functions', fakeAsync(() => {
+ //
+ // }));
});
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 e574a112..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,22 +1,26 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import {
+ AfterViewInit,
+ booleanAttribute,
Component,
+ computed,
+ DestroyRef,
+ DOCUMENT,
+ effect,
ElementRef,
- EventEmitter,
- HostBinding,
- HostListener,
- Inject,
- Input,
+ inject,
+ input,
OnDestroy,
OnInit,
- Output,
+ output,
Renderer2,
- ViewChild
+ signal,
+ untracked,
+ viewChild,
+ WritableSignal
} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { A11yModule } from '@angular/cdk/a11y';
-import { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ModalService } from '../modal.service';
import { BackdropService } from '../../backdrop/backdrop.service';
@@ -39,215 +43,260 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component';
// display: 'none'
})
),
- transition('visible <=> *', [animate('300ms')])
+ transition('visible <=> *', [animate('150ms')])
])
],
templateUrl: './modal.component.html',
exportAs: 'cModal',
- standalone: true,
- imports: [ModalDialogComponent, ModalContentComponent, A11yModule]
+ imports: [ModalDialogComponent, ModalContentComponent, A11yModule],
+ host: {
+ class: 'modal',
+ '[class]': 'hostClasses()',
+ '[attr.role]': 'role()',
+ '[attr.inert]': 'ariaHidden',
+ '[attr.id]': 'id',
+ '[attr.aria-modal]': 'ariaModal()',
+ '[attr.tabindex]': '-1',
+ '[@showHide]': 'animateTrigger()',
+ '(@showHide.start)': 'animateStart($event)',
+ '(@showHide.done)': 'animateDone($event)',
+ '(mousedown)': 'onMouseDownHandler($event)',
+ '(click)': 'onClickHandler($event)',
+ '(document:keyup)': 'onKeyUpHandler($event)'
+ }
})
-export class ModalComponent implements OnInit, OnDestroy {
-
- static ngAcceptInputType_scrollable: BooleanInput;
- static ngAcceptInputType_visible: BooleanInput;
+export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
+ readonly #document = inject
(DOCUMENT);
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #modalService = inject(ModalService);
+ readonly #backdropService = inject(BackdropService);
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private modalService: ModalService,
- private backdropService: BackdropService
- ) { }
+ readonly #destroyRef = inject(DestroyRef);
+ readonly #focusMonitor = inject(FocusMonitor);
/**
* Align the modal in the center or top of the screen.
- * @type {'top' | 'center'}
+ * @return {'top' | 'center'}
* @default 'top'
*/
- @Input() alignment?: 'top' | 'center' = 'top';
+ readonly alignment = input<'top' | 'center'>('top');
+
/**
* Apply a backdrop on body while modal is open.
- * @type boolean | 'static'
+ * @return boolean | 'static'
* @default true
*/
- @Input() backdrop: boolean | 'static' = true;
+ readonly backdrop = input(true);
+
/**
* Set modal to cover the entire user viewport.
- * @type {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
+ * @return {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
* @default undefined
*/
- @Input() fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ readonly fullscreen = input();
+
/**
* Closes the modal when escape key is pressed.
- * @type boolean
+ * @return boolean
* @default true
*/
- @Input() keyboard = true;
- @Input() id?: string;
+ readonly keyboard = input(true, { transform: booleanAttribute });
+
+ readonly attrId = input(undefined, { alias: 'id' });
+
+ get id() {
+ return this.attrId();
+ }
+
/**
* Size the component small, large, or extra large.
+ * @return {'sm' | 'lg' | 'xl'}
+ * @default undefined
*/
- @Input() size?: 'sm' | 'lg' | 'xl';
+ readonly size = input<'sm' | 'lg' | 'xl'>();
+
/**
* Remove animation to create modal that simply appear rather than fade in to view.
*/
- @Input() transition = true;
+ readonly transition = input(true, { transform: booleanAttribute });
+
/**
- * Default role for modal. [docs]
- * @type string
+ * Default role for modal
+ * @return string
* @default 'dialog'
*/
- @Input() @HostBinding('attr.role') role = 'dialog';
+ readonly role = input('dialog');
+
/**
- * Set aria-modal html attr for modal. [docs]
+ * Set aria-modal html attr for modal
* @type boolean
- * @default true
+ * @default null
*/
- @Input() @HostBinding('attr.aria-modal') ariaModal = true;
+ readonly ariaModalInput = input(false, { transform: booleanAttribute, alias: 'ariaModal' });
+
+ readonly ariaModal = computed(() => {
+ return this.visible || this.ariaModalInput() ? true : null;
+ });
/**
* Create a scrollable modal that allows scrolling the modal body.
- * @type boolean
+ * @return boolean
+ * @default false
*/
- @Input()
- set scrollable(value: boolean) {
- this._scrollable = coerceBooleanProperty(value);
- }
-
- get scrollable(): boolean {
- return this._scrollable;
- }
-
- private _scrollable = false;
+ readonly scrollable = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of modal component.
- * @type boolean
+ * @return boolean
+ * @default false
*/
- @Input()
+ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+
+ readonly #visibleInputEffect = effect(() => {
+ const visible = this.visibleInput();
+ untracked(() => {
+ this.visible = visible;
+ });
+ });
+
set visible(value: boolean) {
- const newValue = coerceBooleanProperty(value);
- if (this._visible !== newValue) {
- this._visible = newValue;
- this.setBackdrop(this.backdrop !== false && newValue);
- this.setBodyStyles(newValue);
- this.visibleChange.emit(newValue);
+ if (this.#visible() !== value) {
+ this.#visible.set(value);
+ this.setBodyStyles(value);
+ this.setBackdrop(this.backdrop() !== false && value);
+ this.visibleChange?.emit(value);
}
}
get visible(): boolean {
- return this._visible;
+ return this.#visible();
}
- private _visible!: boolean;
+ readonly #visible: WritableSignal = signal(false);
+
+ readonly #activeElement = signal(null);
+
+ readonly #visibleEffect = effect(() => {
+ const visible = this.#visible();
+ const afterViewInit = this.#afterViewInit();
+ untracked(() => {
+ if (visible && afterViewInit) {
+ this.#activeElement.set(this.#document.activeElement as HTMLElement);
+ // this.#activeElement()?.blur();
+ setTimeout(() => {
+ const focusable = this.modalContentRef()?.nativeElement.querySelectorAll(
+ '[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+ );
+ if (focusable?.length) {
+ this.#focusMonitor.focusVia(focusable[0], 'keyboard');
+ }
+ });
+ } else {
+ const activeElement = this.#activeElement();
+ if (activeElement && this.#document.contains(activeElement)) {
+ this.#focusMonitor.focusVia(activeElement, 'keyboard');
+ setTimeout(() => {
+ // this.#activeElement()?.focus();
+ this.#activeElement.set(null);
+ });
+ }
+ }
+ });
+ });
/**
* Event triggered on modal dismiss.
+ * @return boolean
*/
- @Output() visibleChange = new EventEmitter();
+ readonly visibleChange = output();
- @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
- private activeBackdrop!: any;
- private stateToggleSubscription!: Subscription;
+ // @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
+ // @ViewChild('modalContentRef', { read: ElementRef }) modalContentRef!: ElementRef;
+ // readonly modalContentRef = viewChild(ModalContentComponent, { read: ElementRef });
+ readonly modalContentRef = viewChild('modalContentRef', { read: ElementRef });
+
+ #activeBackdrop!: any;
// private inBoundingClientRect!: boolean;
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
modal: true,
- fade: this.transition,
+ fade: this.transition(),
show: this.show
- };
- }
+ } as Record;
+ });
- @HostBinding('attr.aria-hidden')
get ariaHidden(): boolean | null {
return this.visible ? null : true;
- };
-
- @HostBinding('attr.tabindex')
- get tabIndex(): string | null {
- return '-1';
}
- @HostBinding('@showHide')
- get animateTrigger(): string {
+ readonly animateTrigger = computed(() => {
return this.visible ? 'visible' : 'hidden';
- }
+ });
get show(): boolean {
- return this.visible && this._show;
+ return this.visible && this.#show();
}
set show(value: boolean) {
- this._show = value;
+ this.#show.set(value);
}
- private _show = true;
+ readonly #show = signal(true);
- @HostListener('@showHide.start', ['$event'])
animateStart(event: AnimationEvent) {
- const scrollbarWidth = this.backdropService.scrollbarWidth;
if (event.toState === 'visible') {
- this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
- this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
- this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'block');
+ this.#backdropService.hideScrollbar();
+ this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'block');
} else {
- if (!this.transition) {
- this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'none');
+ if (!this.transition()) {
+ this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'none');
}
}
}
- @HostListener('@showHide.done', ['$event'])
animateDone(event: AnimationEvent) {
setTimeout(() => {
if (event.toState === 'hidden') {
- this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'none');
- this.renderer.removeStyle(this.document.body, 'overflow');
- this.renderer.removeStyle(this.document.body, 'padding-right');
+ this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'none');
+ this.#backdropService.resetScrollbar();
}
});
this.show = this.visible;
}
- @HostListener('document:keyup', ['$event'])
- onKeyDownHandler(event: KeyboardEvent): void {
- if (event.key === 'Escape' && this.keyboard && this.visible) {
- if (this.backdrop === 'static') {
+ onKeyUpHandler(event: KeyboardEvent): void {
+ if (event.key === 'Escape' && this.keyboard() && this.visible) {
+ if (this.backdrop() === 'static') {
this.setStaticBackdrop();
} else {
- this.modalService.toggle({ show: false, modal: this });
+ this.#modalService.toggle({ show: false, modal: this });
}
}
}
private mouseDownTarget: EventTarget | null = null;
- @HostListener('mousedown', ['$event'])
public onMouseDownHandler($event: MouseEvent): void {
this.mouseDownTarget = $event.target;
}
- @HostListener('click', ['$event'])
public onClickHandler($event: MouseEvent): void {
-
if (this.mouseDownTarget !== $event.target) {
this.mouseDownTarget = null;
return;
}
const targetElement = $event.target;
- if (targetElement === this.hostElement.nativeElement) {
-
- if (this.backdrop === 'static') {
+ if (targetElement === this.#hostElement.nativeElement) {
+ if (this.backdrop() === 'static') {
this.setStaticBackdrop();
return;
}
- this.modalService.toggle({ show: false, modal: this });
+ this.#modalService.toggle({ show: false, modal: this });
}
}
@@ -255,56 +304,54 @@ export class ModalComponent implements OnInit, OnDestroy {
this.stateToggleSubscribe();
}
+ readonly #afterViewInit = signal(false);
+
+ ngAfterViewInit(): void {
+ this.#afterViewInit.set(true);
+ }
+
ngOnDestroy(): void {
- this.modalService.toggle({ show: false, modal: this });
- this.stateToggleSubscribe(false);
+ this.#modalService.toggle({ show: false, modal: this });
+ this.#afterViewInit.set(false);
}
- private stateToggleSubscribe(subscribe: boolean = true): void {
- if (subscribe) {
- this.stateToggleSubscription = this.modalService.modalState$.subscribe(
- (action) => {
- if (this === action.modal || this.id === action.id) {
- if ('show' in action) {
- this.visible = action?.show === 'toggle' ? !this.visible : action.show;
- }
- } else {
- if (this.visible) {
- this.visible = false;
- }
- }
+ private stateToggleSubscribe(): void {
+ this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
+ if (this === action.modal || this.id === action.id) {
+ if ('show' in action) {
+ this.visible = action?.show === 'toggle' ? !this.visible : action.show;
}
- );
- } else {
- this.stateToggleSubscription?.unsubscribe();
- }
+ } else {
+ if (this.visible) {
+ this.visible = false;
+ }
+ }
+ });
}
private setBackdrop(setBackdrop: boolean): void {
- if (setBackdrop) {
- this.activeBackdrop = this.backdropService.setBackdrop('modal');
- } else {
- this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
- }
+ this.#activeBackdrop = setBackdrop
+ ? this.#backdropService.setBackdrop('modal')
+ : this.#backdropService.clearBackdrop(this.#activeBackdrop);
}
private setBodyStyles(open: boolean): void {
if (open) {
- if (this.backdrop === true) {
- this.renderer.addClass(this.document.body, 'modal-open');
+ if (this.backdrop() === true) {
+ this.#renderer.addClass(this.#document.body, 'modal-open');
}
} else {
- this.renderer.removeClass(this.document.body, 'modal-open');
+ this.#renderer.removeClass(this.#document.body, 'modal-open');
}
}
private setStaticBackdrop(): void {
- if (this.transition) {
- this.renderer.addClass(this.hostElement.nativeElement, 'modal-static');
- this.renderer.setStyle(this.hostElement.nativeElement, 'overflow-y', 'hidden');
+ if (this.transition()) {
+ this.#renderer.addClass(this.#hostElement.nativeElement, 'modal-static');
+ this.#renderer.setStyle(this.#hostElement.nativeElement, 'overflow-y', 'hidden');
setTimeout(() => {
- this.renderer.removeClass(this.hostElement.nativeElement, 'modal-static');
- this.renderer.removeStyle(this.hostElement.nativeElement, 'overflow-y');
+ this.#renderer.removeClass(this.#hostElement.nativeElement, 'modal-static');
+ this.#renderer.removeStyle(this.#hostElement.nativeElement, 'overflow-y');
}, 300);
}
}
diff --git a/projects/coreui-angular/src/lib/nav/nav-item.component.spec.ts b/projects/coreui-angular/src/lib/nav/nav-item.component.spec.ts
index 00adf0aa..47d74216 100644
--- a/projects/coreui-angular/src/lib/nav/nav-item.component.spec.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-item.component.spec.ts
@@ -22,4 +22,8 @@ describe('NavItemComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('nav-item');
+ });
});
diff --git a/projects/coreui-angular/src/lib/nav/nav-item.component.ts b/projects/coreui-angular/src/lib/nav/nav-item.component.ts
index 20c2f5c3..937ea2d7 100644
--- a/projects/coreui-angular/src/lib/nav/nav-item.component.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-item.component.ts
@@ -1,17 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-nav-item',
- template: ``,
+ template: '',
styleUrls: ['./nav-item.component.scss'],
- standalone: true
+ host: { class: 'nav-item' }
})
-export class NavItemComponent {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'nav-item': true
- };
- }
-}
+export class NavItemComponent {}
diff --git a/projects/coreui-angular/src/lib/nav/nav-link.directive.spec.ts b/projects/coreui-angular/src/lib/nav/nav-link.directive.spec.ts
index 656438ff..1d130b31 100644
--- a/projects/coreui-angular/src/lib/nav/nav-link.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-link.directive.spec.ts
@@ -1,8 +1,85 @@
import { NavLinkDirective } from './nav-link.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ComponentRef, DebugElement, input } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+ template: 'test',
+ imports: [NavLinkDirective]
+})
+class TestComponent {
+ readonly active = input(false);
+ readonly disabled = input(false);
+}
describe('NavLinkDirective', () => {
+ let fixture: ComponentFixture;
+ let component: TestComponent;
+ let componentRef: ComponentRef;
+ let debugElement: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ debugElement = fixture.debugElement.query(By.directive(NavLinkDirective));
+ fixture.detectChanges();
+ });
+
it('should create an instance', () => {
- const directive = new NavLinkDirective();
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new NavLinkDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should have css classes', () => {
+ expect(debugElement.nativeElement).toHaveClass('nav-link');
+ });
+
+ it('should have css classes for active', () => {
+ expect(debugElement.nativeElement).not.toHaveClass('active');
+ componentRef.setInput('active', true);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement).toHaveClass('active');
+ componentRef.setInput('active', false);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement).not.toHaveClass('active');
+ });
+
+ it('should have css classes for disabled', () => {
+ expect(debugElement.nativeElement).not.toHaveClass('disabled');
+ componentRef.setInput('disabled', true);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement).toHaveClass('disabled');
+ componentRef.setInput('disabled', false);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement).not.toHaveClass('disabled');
+ });
+
+ it('should have aria-* attr for active', () => {
+ expect(debugElement.nativeElement.getAttribute('aria-current')).not.toBe('page');
+ componentRef.setInput('active', true);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('aria-current')).toBe('page');
+ });
+
+ it('should have attributes for disabled', () => {
+ expect(debugElement.nativeElement.getAttribute('disabled')).toBeNull();
+ expect(debugElement.nativeElement.getAttribute('aria-disabled')).not.toBeTruthy();
+ expect(debugElement.nativeElement.getAttribute('tabindex')).not.toBe('-1');
+ expect(debugElement.nativeElement.style.cursor).toBe('pointer');
+ componentRef.setInput('disabled', true);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('disabled')).not.toBeNull();
+ expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBeTruthy();
+ expect(debugElement.nativeElement.getAttribute('tabindex')).toBe('-1');
+ expect(debugElement.nativeElement.style.cursor).not.toBe('pointer');
+ componentRef.setInput('disabled', false);
+ fixture.detectChanges();
});
});
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 f2b69870..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,60 +1,65 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, effect, input, numberAttribute } from '@angular/core';
+import { BooleanInput } from '../coreui.types';
@Directive({
selector: '[cNavLink]',
- standalone: true
+ host: {
+ '[class]': 'hostClasses()',
+ '[attr.aria-current]': 'ariaCurrent()',
+ '[attr.aria-disabled]': 'ariaDisabled',
+ '[attr.disabled]': 'attrDisabled',
+ '[attr.tabindex]': 'attrTabindex',
+ '[style.cursor]': 'styleCursor'
+ }
})
export class NavLinkDirective {
+ static ngAcceptInputType_disabled: BooleanInput;
/**
* Sets .nav-link class to the host. [docs]
- * @type boolean
* @default true
*/
- @Input({ transform: booleanAttribute }) cNavLink: string | boolean = true;
+ readonly cNavLink = input(true, { transform: booleanAttribute });
/**
* Toggle the active state for the component. [docs]
- * @type boolean
+ * @default undefined
*/
- @Input() active?: boolean;
+ readonly active = input();
+
/**
* Set disabled attr for the host element. [docs]
- * @type boolean
+ * @default false
*/
- @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
+ readonly disabled = input(false, { transform: booleanAttribute });
- @HostBinding('attr.aria-current')
- get ariaCurrent(): string | null {
- return this.active ? 'page' : null;
- }
-
- @HostBinding('attr.aria-disabled')
- get isDisabled(): boolean | null {
- return this.disabled || null;
- }
+ /**
+ * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
+ */
+ readonly tabindex = input(undefined, { transform: numberAttribute });
- @HostBinding('attr.disabled')
- get attrDisabled() {
- return this.disabled ? '' : null;
- };
+ readonly ariaCurrent = computed(() => {
+ return this.active() ? 'page' : null;
+ });
- @HostBinding('attr.tabindex')
- get getTabindex(): string | null {
- return this.disabled ? '-1' : null;
- }
+ ariaDisabled: boolean | null = null;
+ attrDisabled: boolean | string | null = null;
+ attrTabindex: number | null = null;
+ styleCursor: 'pointer' | null = null;
- @HostBinding('style.cursor')
- get getCursorStyle(): string | null {
- return this.disabled ? null : 'pointer';
- }
+ readonly #disabledEffect = effect(() => {
+ const disabled = this.disabled();
+ this.ariaDisabled = disabled || null;
+ this.attrDisabled = disabled ? '' : null;
+ this.attrTabindex = disabled ? -1 : (this.tabindex() ?? null);
+ this.styleCursor = disabled ? null : 'pointer';
+ });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
- 'nav-link': this.cNavLink,
- disabled: this.disabled,
- active: this.active
- };
- }
+ 'nav-link': this.cNavLink(),
+ disabled: this.disabled(),
+ active: this.active()
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/nav/nav.component.scss b/projects/coreui-angular/src/lib/nav/nav.component.scss
index 47e7d7d1..4961e30a 100644
--- a/projects/coreui-angular/src/lib/nav/nav.component.scss
+++ b/projects/coreui-angular/src/lib/nav/nav.component.scss
@@ -1,3 +1,10 @@
:host .nav-link:focus {
outline: 0;
}
+
+// todo: temp fix for nav-underline-border
+:host.nav-underline-border {
+ column-gap: 0;
+}
+
+
diff --git a/projects/coreui-angular/src/lib/nav/nav.component.spec.ts b/projects/coreui-angular/src/lib/nav/nav.component.spec.ts
index e6366fca..5d400f13 100644
--- a/projects/coreui-angular/src/lib/nav/nav.component.spec.ts
+++ b/projects/coreui-angular/src/lib/nav/nav.component.spec.ts
@@ -1,25 +1,87 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NavComponent } from './nav.component';
+import { ComponentRef } from '@angular/core';
describe('NavComponent', () => {
let component: NavComponent;
let fixture: ComponentFixture;
+ let componentRef: ComponentRef;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NavComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavComponent);
component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('nav');
+ });
+
+ it('should have css classes for layout', () => {
+ componentRef.setInput('layout', 'fill');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).toHaveClass('nav-fill');
+ componentRef.setInput('layout', 'justified');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-fill');
+ expect(fixture.nativeElement).toHaveClass('nav-justified');
+ componentRef.setInput('layout', undefined);
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-fill');
+ expect(fixture.nativeElement).not.toHaveClass('nav-justified');
+ });
+
+ it('should have css classes for variant', () => {
+ expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+ componentRef.setInput('variant', 'tabs');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+ componentRef.setInput('variant', 'pills');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).toHaveClass('nav-pills');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+ componentRef.setInput('variant', 'underline');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+ expect(fixture.nativeElement).toHaveClass('nav-underline');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+ componentRef.setInput('variant', 'underline-border');
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+ expect(fixture.nativeElement).toHaveClass('nav-underline-border');
+
+ componentRef.setInput('variant', undefined);
+ fixture.detectChanges();
+ expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+ expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+ expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+ });
});
diff --git a/projects/coreui-angular/src/lib/nav/nav.component.ts b/projects/coreui-angular/src/lib/nav/nav.component.ts
index 8b161d79..5cfcece9 100644
--- a/projects/coreui-angular/src/lib/nav/nav.component.ts
+++ b/projects/coreui-angular/src/lib/nav/nav.component.ts
@@ -1,29 +1,31 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
@Component({
selector: 'c-nav',
- template: ``,
+ template: '',
styleUrls: ['./nav.component.scss'],
- standalone: true
+ host: { class: 'nav', '[class]': 'hostClasses()' }
})
export class NavComponent {
/**
* Specify a layout type for component.
- * @type {'fill' | 'justified'}
+ * @default undefined
*/
- @Input() layout?: 'fill' | 'justified';
+ readonly layout = input<'fill' | 'justified'>();
+
/**
* Set the nav variant to tabs or pills.
- * @type {'tabs' | 'pills' | 'underline'}
+ * @default undefined
*/
- @Input() variant?: '' | 'tabs' | 'pills' ;
+ readonly variant = input<'tabs' | 'pills' | 'underline' | 'underline-border' | ''>();
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const layout = this.layout();
+ const variant = this.variant();
return {
nav: true,
- [`nav-${this.layout}`]: !!this.layout,
- [`nav-${this.variant}`]: !!this.variant
- };
- }
+ [`nav-${layout}`]: !!layout,
+ [`nav-${variant}`]: !!variant
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts
index c75fcf02..91b3141d 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts
@@ -1,8 +1,11 @@
import { NavbarBrandDirective } from './navbar-brand.directive';
+import { TestBed } from '@angular/core/testing';
describe('NavbarBrandDirective', () => {
it('should create an instance', () => {
- const directive = new NavbarBrandDirective();
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new NavbarBrandDirective();
+ expect(directive).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts b/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts
index f35426c3..a8a2a83b 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts
@@ -1,12 +1,9 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, input } from '@angular/core';
@Directive({
selector: '[cNavbarBrand]',
- standalone: true
+ host: { class: 'navbar-brand', '[attr.role]': 'role()' }
})
export class NavbarBrandDirective {
-
- @HostBinding('class.navbar-brand') navbarBrand = true;
- @HostBinding('attr.role') role = 'button';
-
+ readonly role = input('button');
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.spec.ts
index 63465318..e0f104b8 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.spec.ts
@@ -22,4 +22,8 @@ describe('NavbarNavComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('navbar-nav');
+ });
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts b/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts
index dc43eb94..36e68d2d 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts
@@ -1,24 +1,21 @@
-import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
@Component({
selector: 'c-navbar-nav',
- template: '',
- standalone: true
+ template: '',
+ host: { '[class]': 'hostClasses()' }
})
export class NavbarNavComponent {
-
/**
* Enable vertical scrolling of a collapsed navbar toggleable contents.
* @type boolean
*/
- @Input({ transform: booleanAttribute }) scroll: string | boolean = false;
+ readonly scroll = input(false, { transform: booleanAttribute });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
'navbar-nav': true,
- 'navbar-nav-scroll': this.scroll
- };
- }
-
+ 'navbar-nav-scroll': this.scroll()
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.spec.ts
index aa3ed7e1..97577f18 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.spec.ts
@@ -22,4 +22,8 @@ describe('NavbarTextComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('navbar-text');
+ });
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts b/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts
index 939818dc..33180716 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts
@@ -1,12 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-navbar-text',
- template: '',
- standalone: true
+ template: '',
+ host: { class: 'navbar-text' }
})
-export class NavbarTextComponent {
-
- @HostBinding('class.navbar-text') navbarTextClass = true;
-
-}
+export class NavbarTextComponent {}
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 4a820bfa..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
@@ -1,12 +1,75 @@
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { NavbarTogglerDirective } from './navbar-toggler.directive';
-import { ElementRef, Renderer2 } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { CollapseDirective } from '../../collapse';
+
+class MockElementRef extends ElementRef {}
+
+@Component({
+ imports: [NavbarTogglerDirective, CollapseDirective],
+ template: `
+
+ test
+ `
+})
+class TestComponent {}
describe('NavbarTogglerDirective', () => {
- let renderer: Renderer2;
- let hostElement: ElementRef;
+ let component: TestComponent;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
+ let debugElementCollapse: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent],
+ providers: [Renderer2, { provide: ElementRef, useValue: MockElementRef }, provideAnimationsAsync()]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ debugElement = fixture.debugElement.query(By.directive(NavbarTogglerDirective));
+ debugElementCollapse = fixture.debugElement.query(By.directive(CollapseDirective));
+ fixture.detectChanges();
+ });
it('should create an instance', () => {
- const directive = new NavbarTogglerDirective(renderer, hostElement);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new NavbarTogglerDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should have css classes', () => {
+ expect(debugElement.nativeElement).toHaveClass('navbar-toggler');
+ });
+
+ it('should have default aria-label', () => {
+ expect(debugElement.nativeElement.getAttribute('aria-label')).toBe('Toggle navigation');
+ });
+
+ it('should have default type', () => {
+ expect(debugElement.nativeElement.getAttribute('type')).toBe('button');
+ });
+
+ it('should toggle collapse on click', fakeAsync(() => {
+ const collapseRef = debugElementCollapse.injector.get(CollapseDirective);
+ expect(collapseRef.visible()).toBeFalse();
+ fixture.autoDetectChanges();
+ debugElement.nativeElement.dispatchEvent(new Event('click'));
+ expect(collapseRef.visible()).toBeTrue();
+ debugElement.nativeElement.dispatchEvent(new Event('click'));
+ expect(collapseRef.visible()).toBeFalse();
+ }));
+
+ it('should add default icon', () => {
+ const directive = debugElement.injector.get(NavbarTogglerDirective);
+ directive.addDefaultIcon();
+ const renderer = debugElement.injector.get(Renderer2);
+ const span = debugElement.nativeElement.querySelector('span');
+ expect(span).toBeTruthy();
+ expect(span.classList.contains('navbar-toggler-icon')).toBeTrue();
});
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.ts b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.ts
index 346ae578..c159b6f7 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.ts
@@ -1,55 +1,59 @@
-import { AfterContentInit, Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
+import { afterNextRender, Directive, ElementRef, inject, input, Renderer2 } from '@angular/core';
import { CollapseDirective } from '../../collapse';
@Directive({
selector: '[cNavbarToggler]',
- standalone: true
+ host: {
+ '[attr.aria-label]': 'ariaLabel()',
+ '[attr.type]': 'type()',
+ class: 'navbar-toggler',
+ '(click)': 'handleClick($event)'
+ }
})
-export class NavbarTogglerDirective implements AfterContentInit {
+export class NavbarTogglerDirective {
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+
+ constructor() {
+ afterNextRender({
+ read: () => {
+ const hasContent = this.#hostElement.nativeElement.childNodes.length as boolean;
+ if (!hasContent) {
+ this.addDefaultIcon();
+ }
+ }
+ });
+ }
+
/**
* Reference to navbar collapse element (via # template variable) . [docs]
* @type string
* @default 'button'
*/
- @Input('cNavbarToggler') collapseRef?: CollapseDirective;
- @HostBinding('class.navbar-toggler') navbarToggler = true;
+ readonly collapseRef = input(undefined, { alias: 'cNavbarToggler' });
+
/**
* Default type for navbar-toggler. [docs]
* @type string
* @default 'button'
*/
- @HostBinding('attr.type')
- @Input() type = 'button';
+ readonly type = input('button');
+
/**
* Default aria-label attr for navbar-toggler. [docs]
* @type string
* @default 'Toggle navigation'
*/
- @HostBinding('attr.aria-label')
- @Input() ariaLabel = 'Toggle navigation';
-
- private hasContent!: boolean;
-
- constructor(
- private renderer: Renderer2,
- private hostElement: ElementRef
- ) { }
+ readonly ariaLabel = input('Toggle navigation');
- @HostListener('click', ['$event'])
- handleClick() {
- this.collapseRef?.toggle(!this.collapseRef?.visible);
+ handleClick($event: MouseEvent): void {
+ const collapseRef = this.collapseRef();
+ collapseRef?.toggle(!collapseRef?.visible());
}
addDefaultIcon(): void {
- const span = this.renderer.createElement('span');
- this.renderer.addClass(span, 'navbar-toggler-icon');
- this.renderer.appendChild(this.hostElement.nativeElement, span);
- }
-
- ngAfterContentInit(): void {
- this.hasContent = this.hostElement.nativeElement.childNodes.length as boolean;
- if (!this.hasContent) {
- this.addDefaultIcon();
- }
+ const span = this.#renderer.createElement('span');
+ this.#renderer.addClass(span, 'navbar-toggler-icon');
+ this.#renderer.appendChild(this.#hostElement.nativeElement, span);
}
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.html b/projects/coreui-angular/src/lib/navbar/navbar.component.html
index 66e9e109..86c946dd 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.html
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.html
@@ -1,11 +1,11 @@
-
+
-
-
+
+
-
+
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
index 259b5e07..fbf41b8f 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
@@ -9,8 +9,7 @@ describe('NavbarComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NavbarComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -22,4 +21,16 @@ describe('NavbarComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('navbar');
+ });
+
+ it('should have container class', () => {
+ fixture.componentRef.setInput('expand', 'xl');
+ fixture.componentRef.setInput('container', 'sm');
+ fixture.detectChanges();
+ expect(fixture.componentInstance.containerClass()).toBe('container-sm');
+ expect(fixture.componentInstance.breakpoint()).toBe('');
+ });
});
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
index db050b28..c2af15db 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -1,9 +1,23 @@
-import { AfterContentInit, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
import { BreakpointObserver } from '@angular/cdk/layout';
+import {
+ AfterContentInit,
+ afterEveryRender,
+ Component,
+ computed,
+ contentChild,
+ DOCUMENT,
+ ElementRef,
+ inject,
+ input,
+ OnDestroy,
+ signal
+} from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Subscription } from 'rxjs';
import { CollapseDirective } from '../collapse';
import { Colors } from '../coreui.types';
+import { ThemeDirective } from '../shared';
// todo: fix container prop issue not rendering children
// todo: workaround - use
component directly in template
@@ -11,82 +25,108 @@ import { Colors } from '../coreui.types';
@Component({
selector: 'c-navbar',
templateUrl: './navbar.component.html',
- standalone: true,
- imports: [NgClass, NgTemplateOutlet]
+ imports: [NgClass, NgTemplateOutlet],
+ hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
+ 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;
- /**
- * Sets if the color of text should be colored for a light or dark dark background.
- */
- @Input() colorScheme?: 'dark' | 'light' = 'light';
+ 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';
-
- @ContentChild(CollapseDirective) collapse!: CollapseDirective;
+ readonly placement = input<'fixed-top' | 'fixed-bottom' | 'sticky-top'>();
- @HostBinding('attr.role')
- @Input() role = 'navigation';
+ readonly role = input('navigation');
- constructor(
- private hostElement: ElementRef,
- private breakpointObserver: BreakpointObserver
- ) {}
+ readonly collapse = contentChild(CollapseDirective);
- @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-light': this.colorScheme === 'light',
- 'navbar-dark': this.colorScheme === 'dark',
- [`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 : ''}`;
+ });
+
+ readonly computedStyle = signal('');
+
+ readonly #afterEveryRenderFn = afterEveryRender({
+ 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);
+ }
+ }
+ });
- get breakpoint(): string | boolean {
- if (typeof this.expand === 'string') {
- return getComputedStyle(this.hostElement.nativeElement).getPropertyValue(`--cui-breakpoint-${this.expand}`);
+ 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;
- this.collapse.toggle(false);
- this.collapse.animate = 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-body/offcanvas-body.component.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.spec.ts
index 7a0669c2..c1ecfb7a 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.spec.ts
@@ -22,4 +22,8 @@ describe('OffcanvasBodyComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('offcanvas-body');
+ });
});
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.ts
index 8b519d9e..ebaf9d95 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.ts
@@ -1,18 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-offcanvas-body',
- template: ``,
+ template: '',
styleUrls: ['./offcanvas-body.component.scss'],
- standalone: true
+ host: { class: 'offcanvas-body' }
})
-export class OffcanvasBodyComponent {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'offcanvas-body': true,
- };
- }
-
-}
+export class OffcanvasBodyComponent {}
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.spec.ts
index 182efed0..5f97acee 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.spec.ts
@@ -22,4 +22,8 @@ describe('OffcanvasHeaderComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('offcanvas-header');
+ });
});
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.ts
index d7ef7e18..9bff19fc 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.ts
@@ -1,17 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-offcanvas-header',
- template: ``,
- standalone: true
+ template: '',
+ host: { class: 'offcanvas-header' }
})
-export class OffcanvasHeaderComponent {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'offcanvas-header': true,
- };
- }
-
-}
+export class OffcanvasHeaderComponent {}
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.spec.ts
index d0638f9d..0a8b6d66 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.spec.ts
@@ -1,8 +1,37 @@
import { OffcanvasTitleDirective } from './offcanvas-title.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+ template: 'Test
',
+ imports: [OffcanvasTitleDirective]
+})
+class TestComponent {}
describe('OffcanvasTitleDirective', () => {
+ let component: TestComponent;
+ let fixture: ComponentFixture;
+ let elementRef: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ elementRef = fixture.debugElement.query(By.directive(OffcanvasTitleDirective));
+
+ fixture.detectChanges(); // initial binding
+ });
+
it('should create an instance', () => {
const directive = new OffcanvasTitleDirective();
expect(directive).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(elementRef.nativeElement).toHaveClass('offcanvas-title');
+ });
});
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.ts
index e2b7ebd3..1aa9d36c 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.ts
@@ -1,16 +1,7 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
selector: '[cOffcanvasTitle]',
- standalone: true
+ host: { class: 'offcanvas-title' }
})
-export class OffcanvasTitleDirective {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'offcanvas-title': true,
- };
- }
-
-}
+export class OffcanvasTitleDirective {}
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts
index 92f16fa7..9f49c308 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts
@@ -1,39 +1,47 @@
import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
+import { take } from 'rxjs/operators';
import { OffcanvasToggleDirective } from './offcanvas-toggle.directive';
import { OffcanvasService } from '../offcanvas.service';
@Component({
- template: `
- `
+ template: ` `,
+ imports: [OffcanvasToggleDirective]
})
-class TestButtonComponent {}
+class TestComponent {}
describe('OffcanvasToggleDirective', () => {
-
- let component: TestButtonComponent;
- let fixture: ComponentFixture;
- let buttonEl: DebugElement;
+ let component: TestComponent;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
let service: OffcanvasService;
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [NoopAnimationsModule, OffcanvasToggleDirective],
- declarations: [TestButtonComponent],
+ imports: [NoopAnimationsModule, OffcanvasToggleDirective, TestComponent],
providers: [OffcanvasService]
});
- fixture = TestBed.createComponent(TestButtonComponent);
+ fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
- buttonEl = fixture.debugElement.query(By.css('button'));
+ debugElement = fixture.debugElement.query(By.css('button'));
service = TestBed.inject(OffcanvasService);
fixture.detectChanges(); // initial binding
});
it('should create an instance', () => {
- const directive = new OffcanvasToggleDirective(service);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new OffcanvasToggleDirective();
+ expect(directive).toBeTruthy();
+ });
});
+
+ it('should toggle offcanvas on click', fakeAsync(() => {
+ service.offcanvasState$.pipe(take(1)).subscribe((value) => {
+ expect(value).toEqual({ show: 'toggle', id: 'OffcanvasEnd' });
+ });
+ debugElement.nativeElement.dispatchEvent(new MouseEvent('click'));
+ }));
});
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts
index 87edf3ea..d58c7ab8 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts
@@ -1,26 +1,24 @@
-import { Directive, HostListener, Input } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
import { OffcanvasService } from '../offcanvas.service';
@Directive({
selector: '[cOffcanvasToggle]',
- standalone: true
+ host: {
+ '(click)': 'toggleOpen($event)'
+ }
})
export class OffcanvasToggleDirective {
+ readonly #offcanvasService = inject(OffcanvasService);
/**
* Html id attr of offcanvas to toggle.
- * @type string
+ * @return string
*/
- @Input('cOffcanvasToggle') id?: string;
-
- constructor(
- private offcanvasService: OffcanvasService
- ) {}
+ readonly id = input(undefined, { alias: 'cOffcanvasToggle' });
- @HostListener('click', ['$event'])
- toggleOpen($event: any): void {
+ protected toggleOpen($event: MouseEvent): void {
$event.preventDefault();
- this.offcanvasService.toggle({ show: 'toggle', id: this.id });
+ this.#offcanvasService.toggle({ show: 'toggle', id: this.id() });
}
}
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas.service.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas.service.ts
index d4d73d24..ec6a0b6c 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas.service.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas.service.ts
@@ -12,12 +12,9 @@ export interface IOffcanvasAction {
providedIn: 'root'
})
export class OffcanvasService {
-
private offcanvasState = new Subject();
offcanvasState$ = this.offcanvasState.asObservable();
- constructor() { }
-
toggle(action: IOffcanvasAction): void {
this.offcanvasState.next(action);
}
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.html b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.html
index fd9b2771..58481089 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.html
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.html
@@ -1,4 +1,4 @@
-
+
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 f0762e09..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,26 +1,75 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+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';
describe('OffcanvasComponent', () => {
let component: OffcanvasComponent;
+ let componentRef: ComponentRef;
let fixture: ComponentFixture;
+ let document: Document;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NoopAnimationsModule, OffcanvasComponent]
- })
- .compileComponents();
- });
+ }).compileComponents();
- beforeEach(() => {
fixture = TestBed.createComponent(OffcanvasComponent);
component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ document = TestBed.inject(DOCUMENT);
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('offcanvas');
+ expect(fixture.nativeElement).toHaveClass('offcanvas-start');
+ expect(fixture.nativeElement.getAttribute('id')).toContain('offcanvas-start-');
+ });
+
+ it('should react to visible changes', fakeAsync(() => {
+ expect(componentRef.instance.visible()).toBeFalse();
+ componentRef.setInput('visible', true);
+ fixture.detectChanges();
+ flushMicrotasks();
+ expect(componentRef.instance.visible()).toBeTrue();
+ expect(fixture.nativeElement.getAttribute('inert')).toBeNull();
+ }));
+
+ it('should close offcanvas to Esc keydown event', fakeAsync(() => {
+ componentRef.setInput('visible', true);
+ fixture.detectChanges();
+ expect(componentRef.instance.visible()).toBeTrue();
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+ tick();
+ fixture.detectChanges();
+ expect(componentRef.instance.visible()).toBeFalse();
+ expect(fixture.nativeElement.getAttribute('inert')).toBeTruthy();
+ }));
+
+ it('should close offcanvas on backdrop click', fakeAsync(() => {
+ componentRef.setInput('visible', true);
+ fixture.detectChanges();
+ expect(componentRef.instance.visible()).toBeTrue();
+ const backdrop = document.querySelector('.offcanvas-backdrop');
+ expect(backdrop).not.toBeNull();
+ if (backdrop) {
+ backdrop?.dispatchEvent(new MouseEvent('click'));
+ tick();
+ fixture.detectChanges();
+ // expect(componentRef.instance.visible()).toBeFalse();
+ // expect(fixture.nativeElement.getAttribute('inert')).toBeTruthy();
+ }
+ }));
+
+ it('should return breakpoint value', fakeAsync(() => {
+ componentRef.setInput('responsive', 'false');
+ fixture.detectChanges();
+ expect(fixture.componentInstance.responsiveBreakpoint).toBeFalse();
+ }));
});
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 523e9428..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,27 +1,31 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+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,
- EventEmitter,
- HostBinding,
- HostListener,
- Inject,
- Input,
+ inject,
+ input,
+ linkedSignal,
OnDestroy,
OnInit,
- Output,
+ output,
PLATFORM_ID,
Renderer2
} from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { BackdropService } from '../../backdrop/backdrop.service';
+import { ThemeDirective } from '../../shared';
import { OffcanvasService } from '../offcanvas.service';
-import { A11yModule } from '@angular/cdk/a11y';
let nextId = 0;
@@ -47,272 +51,254 @@ let nextId = 0;
templateUrl: './offcanvas.component.html',
styleUrls: ['./offcanvas.component.scss'],
exportAs: 'cOffcanvas',
- standalone: true,
- imports: [A11yModule]
+ imports: [A11yModule],
+ hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
+ host: {
+ ngSkipHydration: 'true',
+ '[@showHide]': 'this.visible() ? "visible" : "hidden"',
+ '[attr.id]': 'id()',
+ '[attr.inert]': 'ariaHidden() || null',
+ '[attr.role]': 'role()',
+ '[attr.aria-modal]': 'ariaModal()',
+ '[attr.tabindex]': 'tabIndex',
+ '[class]': 'hostClasses()',
+ '(@showHide.start)': 'animateStart($event)',
+ '(@showHide.done)': 'animateDone($event)',
+ '(document:keydown)': 'onKeyDownHandler($event)'
+ }
})
export class OffcanvasComponent implements OnInit, OnDestroy {
+ readonly #document = inject(DOCUMENT);
+ readonly #platformId = inject(PLATFORM_ID);
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #offcanvasService = inject(OffcanvasService);
+ readonly #backdropService = inject(BackdropService);
+ readonly #breakpointObserver = inject(BreakpointObserver);
+ readonly #destroyRef = inject(DestroyRef);
- constructor(
- @Inject(DOCUMENT) private document: Document,
- @Inject(PLATFORM_ID) private platformId: any,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private offcanvasService: OffcanvasService,
- private backdropService: BackdropService,
- private breakpointObserver: BreakpointObserver
- ) {}
-
- static ngAcceptInputType_scroll: BooleanInput;
/**
* Apply a backdrop on body while offcanvas is open.
- * @type boolean | 'static'
+ * @return boolean | 'static'
* @default true
*/
- @Input() backdrop: boolean | 'static' = true;
+ readonly backdrop = input(true);
/**
* Closes the offcanvas when escape key is pressed [docs]
- * @type boolean
+ * @return boolean
* @default true
*/
- @Input() keyboard = true;
+ readonly keyboard = input(true, { transform: booleanAttribute });
/**
* Components placement, there’s no default placement.
- * @type {'start' | 'end' | 'top' | 'bottom'}
+ * @return {'start' | 'end' | 'top' | 'bottom'}
* @default 'start'
*/
- @Input() placement: string | 'start' | 'end' | 'top' | 'bottom' = 'start';
+ readonly placement = input('start');
/**
* Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
- * @type boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ * @return boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
* @default true
* @since 4.3.10
*/
- @Input() responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = true;
- @Input() id = `offcanvas-${this.placement}-${nextId++}`;
+ readonly responsive = input<(boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl') | undefined>(true);
+ readonly id = input(`offcanvas-${this.placement()}-${nextId++}`);
+
/**
* Default role for offcanvas. [docs]
- * @type string
+ * @return string
* @default 'dialog'
*/
- @Input() @HostBinding('attr.role') role = 'dialog';
+ readonly role = input('dialog');
+
/**
* Set aria-modal html attr for offcanvas. [docs]
- * @type boolean
+ * @return boolean
* @default true
*/
- @Input() @HostBinding('attr.aria-modal') ariaModal = true;
- /**
- * Event triggered on visible change.
- */
- @Output() readonly visibleChange = new EventEmitter();
- #scroll = false;
- #visible: boolean = false;
+ readonly ariaModal = input(true, { transform: booleanAttribute });
+
#activeBackdrop!: HTMLDivElement;
- #scrollbarWidth!: string;
- #stateToggleSubscription!: Subscription;
#backdropClickSubscription!: Subscription;
#layoutChangeSubscription!: Subscription;
- #show = false;
-
- get scroll() {
- return this.#scroll;
- }
/**
* Allow body scrolling while offcanvas is visible.
- * @type boolean
+ * @return boolean
* @default false
*/
- @Input()
- set scroll(value: boolean) {
- this.#scroll = coerceBooleanProperty(value);
- }
-
- get visible(): boolean {
- return this.#visible;
- }
+ readonly scroll = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of offcanvas component.
- * @type boolean
+ * @return boolean
* @default false
*/
- @Input()
- set visible(value: boolean) {
- this.#visible = coerceBooleanProperty(value);
- if (this.#visible) {
- this.setBackdrop(this.backdrop);
+ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+
+ readonly visible = linkedSignal({
+ source: this.visibleInput,
+ computation: (value) => value
+ });
+
+ readonly visibleEffect = effect(() => {
+ const visible = this.visible();
+ if (visible) {
+ this.setBackdrop(this.backdrop());
this.setFocus();
} else {
this.setBackdrop(false);
}
- this.layoutChangeSubscribe(this.#visible);
- this.visibleChange.emit(value);
- }
+ this.layoutChangeSubscribe(visible);
+ this.visibleChange?.emit(visible);
+ });
+
+ /**
+ * Event triggered on visible change.
+ * @return
+ */
+ readonly visibleChange = output();
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const responsive = this.responsive();
+ const placement = this.placement();
+ const visible = this.visible();
return {
- offcanvas: typeof this.responsive === 'boolean',
- [`offcanvas-${this.responsive}`]: typeof this.responsive !== 'boolean',
- [`offcanvas-${this.placement}`]: !!this.placement,
- show: this.show
- };
- }
+ offcanvas: typeof responsive === 'boolean',
+ [`offcanvas-${responsive}`]: typeof responsive !== 'boolean',
+ [`offcanvas-${placement}`]: !!placement,
+ show: visible
+ } as Record;
+ });
- @HostBinding('attr.aria-hidden')
- get ariaHidden(): boolean | null {
- return this.visible ? null : true;
- }
+ readonly ariaHidden = computed(() => {
+ return this.visible() ? null : true;
+ });
- @HostBinding('attr.tabindex')
get tabIndex(): string | null {
return '-1';
}
- @HostBinding('@showHide')
- get animateTrigger(): string {
- return this.visible ? 'visible' : 'hidden';
- }
-
get show(): boolean {
- return this.visible && this.#show;
+ return this.visible();
}
set show(value: boolean) {
- this.#show = value;
+ this.visible.set(value);
}
get responsiveBreakpoint(): string | false {
- if (typeof this.responsive !== 'string') {
+ const responsive = this.responsive();
+ if (typeof responsive !== 'string') {
return false;
}
- const element: Element = this.document.documentElement;
- const responsiveBreakpoint = this.responsive;
- const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) || false;
+ const element: Element = this.#document.documentElement;
+ const breakpointValue =
+ this.#document.defaultView
+ ?.getComputedStyle(element)
+ ?.getPropertyValue(`--cui-breakpoint-${responsive.trim()}`) ?? false;
return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
}
- @HostListener('@showHide.start', ['$event'])
animateStart(event: AnimationEvent) {
- const scrollbarWidth = this.#scrollbarWidth;
if (event.toState === 'visible') {
- if (!this.scroll) {
- this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
- this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+ if (!this.scroll()) {
+ this.#backdropService.hideScrollbar();
}
- this.renderer.addClass(this.hostElement.nativeElement, 'showing');
+ this.#renderer.addClass(this.#hostElement.nativeElement, 'showing');
} else {
- this.renderer.addClass(this.hostElement.nativeElement, 'hiding');
+ this.#renderer.addClass(this.#hostElement.nativeElement, 'hiding');
}
}
- @HostListener('@showHide.done', ['$event'])
animateDone(event: AnimationEvent) {
setTimeout(() => {
if (event.toState === 'visible') {
- this.renderer.removeClass(this.hostElement.nativeElement, 'showing');
+ this.#renderer.removeClass(this.#hostElement.nativeElement, 'showing');
}
if (event.toState === 'hidden') {
- this.renderer.removeClass(this.hostElement.nativeElement, 'hiding');
- this.renderer.removeStyle(this.document.body, 'overflow');
- this.renderer.removeStyle(this.document.body, 'paddingRight');
+ this.#renderer.removeClass(this.#hostElement.nativeElement, 'hiding');
+ this.#renderer.removeStyle(this.#document.body, 'overflow');
+ this.#renderer.removeStyle(this.#document.body, 'paddingRight');
}
});
- this.show = this.visible;
+ this.show = this.visible();
}
- @HostListener('document:keydown', ['$event'])
onKeyDownHandler(event: KeyboardEvent): void {
- if (
- event.key === 'Escape' &&
- this.keyboard &&
- this.visible &&
- this.backdrop !== 'static'
- ) {
- this.offcanvasService.toggle({ show: false, id: this.id });
+ if (event.key === 'Escape' && this.keyboard() && this.visible() && this.backdrop() !== 'static') {
+ this.#offcanvasService.toggle({ show: false, id: this.id() });
}
}
ngOnInit(): void {
- this.#scrollbarWidth = this.backdropService.scrollbarWidth;
this.stateToggleSubscribe();
setTimeout(() => {
// hotfix to avoid offcanvas flicker on the first render
- this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'flex');
- })
+ this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'flex');
+ });
}
ngOnDestroy(): void {
- this.offcanvasService.toggle({ show: false, id: this.id });
- this.stateToggleSubscribe(false);
+ this.#offcanvasService.toggle({ show: false, id: this.id() });
}
setFocus(): void {
- if (isPlatformBrowser(this.platformId)) {
- setTimeout(() => this.hostElement.nativeElement.focus());
+ if (isPlatformBrowser(this.#platformId)) {
+ setTimeout(() => this.#hostElement.nativeElement.focus());
}
}
- private stateToggleSubscribe(subscribe: boolean = true): void {
- if (subscribe) {
- this.#stateToggleSubscription =
- this.offcanvasService.offcanvasState$.subscribe((action) => {
- if (this === action.offcanvas || this.id === action.id) {
- if ('show' in action) {
- this.visible =
- action?.show === 'toggle' ? !this.visible : action.show;
- }
- }
- });
- } else {
- this.#stateToggleSubscription?.unsubscribe();
- }
+ private stateToggleSubscribe(): void {
+ this.#offcanvasService.offcanvasState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
+ if (this === action.offcanvas || this.id() === action.id) {
+ if ('show' in action) {
+ this.visible.update((value) => (action?.show === 'toggle' ? !value : action.show));
+ }
+ }
+ });
}
private backdropClickSubscribe(subscribe: boolean = true): void {
if (subscribe) {
- this.#backdropClickSubscription =
- this.backdropService.backdropClick$.subscribe((clicked) => {
- this.offcanvasService.toggle({ show: !clicked, id: this.id });
+ this.#backdropClickSubscription = this.#backdropService.backdropClick$
+ .pipe(takeUntilDestroyed(this.#destroyRef))
+ .subscribe((clicked) => {
+ this.#offcanvasService.toggle({ show: !clicked, id: this.id() });
});
} else {
this.#backdropClickSubscription?.unsubscribe();
}
}
- private setBackdrop(setBackdrop: boolean | 'static'): void {
- this.#scrollbarWidth = this.backdropService.scrollbarWidth;
- this.#activeBackdrop = !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
- : this.backdropService.clearBackdrop(this.#activeBackdrop);
- setBackdrop === true ? this.backdropClickSubscribe()
- : this.backdropClickSubscribe(false);
+ protected setBackdrop(setBackdrop: boolean | 'static'): void {
+ this.#activeBackdrop = !!setBackdrop
+ ? this.#backdropService.setBackdrop('offcanvas')
+ : this.#backdropService.clearBackdrop(this.#activeBackdrop);
+ setBackdrop === true ? this.backdropClickSubscribe() : this.backdropClickSubscribe(false);
}
private layoutChangeSubscribe(subscribe: boolean = true): void {
-
if (subscribe) {
-
if (!this.responsiveBreakpoint) {
return;
}
const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
- const layoutChanges = this.breakpointObserver.observe([responsiveBreakpoint]);
+ const layoutChanges = this.#breakpointObserver.observe([responsiveBreakpoint]);
this.#layoutChangeSubscription = layoutChanges
.pipe(
- filter(breakpointState => !breakpointState.matches)
+ filter((breakpointState) => !breakpointState.matches),
+ takeUntilDestroyed(this.#destroyRef)
)
- .subscribe(
- (breakpointState: BreakpointState) => {
- this.visible = breakpointState.matches;
- }
- );
+ .subscribe((breakpointState: BreakpointState) => {
+ this.visible.set(breakpointState.matches);
+ });
} else {
this.#layoutChangeSubscription?.unsubscribe();
}
diff --git a/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts b/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts
index fba9ae0d..a07ee0c1 100644
--- a/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts
+++ b/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts
@@ -9,8 +9,7 @@ describe('PaginationItemComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PageItemComponent]
- })
- .compileComponents();
+ }).compileComponents();
});
beforeEach(() => {
@@ -22,4 +21,8 @@ describe('PaginationItemComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('page-item');
+ });
});
diff --git a/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.ts b/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.ts
index 0e7cb472..52e2301b 100644
--- a/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.ts
+++ b/projects/coreui-angular/src/lib/pagination/page-item/page-item.component.ts
@@ -3,9 +3,7 @@ import { PageItemDirective } from './page-item.directive';
@Component({
selector: 'c-page-item',
- template: ``,
- styleUrls: ['./page-item.component.scss'],
- standalone: true
+ template: '',
+ styleUrls: ['./page-item.component.scss']
})
-export class PageItemComponent extends PageItemDirective { }
-
+export class PageItemComponent extends PageItemDirective {}
diff --git a/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.spec.ts b/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.spec.ts
index 9842bddf..790e0030 100644
--- a/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.spec.ts
@@ -1,18 +1,60 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Component, ComponentRef, DebugElement, input, Renderer2 } from '@angular/core';
+import { provideRouter, RouterLink } from '@angular/router';
+
+import { PageLinkDirective } from '../page-link/page-link.directive';
+import { PageItemComponent } from './page-item.component';
import { PageItemDirective } from './page-item.directive';
-import { TestBed } from '@angular/core/testing';
-import { Renderer2 } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+ selector: 'c-test',
+ imports: [PageItemComponent, PageLinkDirective, PageItemComponent, PageLinkDirective, RouterLink],
+ template: `
+
+ Previous
+
+ `
+})
+export class TestComponent {
+ readonly disabled = input(false);
+}
describe('PageItemDirective', () => {
- let renderer: Renderer2;
+ let component: TestComponent;
+ let componentRef: ComponentRef;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [Renderer2],
- providers: [Renderer2]
- });
+ imports: [TestComponent],
+ providers: [Renderer2, provideRouter([])]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ debugElement = fixture.debugElement.query(By.directive(PageLinkDirective));
});
+
it('should create an instance', () => {
- const directive = new PageItemDirective(renderer);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new PageItemDirective();
+ expect(directive).toBeTruthy();
+ });
});
+
+ it('should toggle disable state for the component', fakeAsync(() => {
+ expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBeNull();
+ expect(debugElement.nativeElement.getAttribute('tabindex')).toBeNull();
+ componentRef.setInput('disabled', true);
+ tick();
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
+ expect(debugElement.nativeElement.getAttribute('tabindex')).toBe('-1');
+ componentRef.setInput('disabled', false);
+ tick();
+ fixture.detectChanges();
+ }));
});
diff --git a/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.ts b/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.ts
index 9fc08abe..7e85ceb8 100644
--- a/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.ts
+++ b/projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.ts
@@ -1,76 +1,58 @@
-import {
- AfterContentInit,
- ContentChild,
- Directive,
- ElementRef,
- HostBinding,
- Input,
- OnChanges,
- Renderer2,
- SimpleChanges
-} from '@angular/core';
+import { computed, contentChild, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
import { PageLinkDirective } from '../page-link/page-link.directive';
@Directive({
selector: '[cPageItem]',
- standalone: true
+ host: {
+ class: 'page-item',
+ '[class]': 'hostClasses()',
+ '[attr.aria-current]': 'ariaCurrent()'
+ }
})
-export class PageItemDirective implements AfterContentInit, OnChanges {
+export class PageItemDirective {
+ readonly #renderer = inject(Renderer2);
/**
* Toggle the active state for the component.
- * @type boolean
+ * @return boolean
*/
- @Input() active?: boolean;
+ readonly active = input();
+
/**
* Toggle the disabled state for the component.
- * @type boolean
+ * @return boolean
*/
- @Input() disabled?: boolean;
+ readonly disabled = input();
- @HostBinding('attr.aria-current')
- get ariaCurrent(): string | null {
- return this.active ? 'page' : null;
- }
+ readonly ariaCurrent = computed(() => {
+ return this.active() ? 'page' : null;
+ });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
'page-item': true,
- disabled: this.disabled,
- active: this.active,
- };
- }
-
- @ContentChild(PageLinkDirective, { read: ElementRef }) pageLinkElementRef!: ElementRef;
-
- constructor(
- private renderer: Renderer2
- ) { }
-
- ngAfterContentInit(): void {
- this.setAttributes();
- }
-
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['disabled']) {
- this.setAttributes();
- }
- }
-
- setAttributes(): void {
- if (!this.pageLinkElementRef) {
- return
+ disabled: this.disabled(),
+ active: this.active()
+ } as Record;
+ });
+
+ readonly pageLinkElementRef = contentChild(PageLinkDirective, { read: ElementRef });
+
+ readonly pageLinkElementRefEffect = effect(() => {
+ const pageLinkElementRef = this.pageLinkElementRef();
+ const disabled = this.disabled();
+ if (!pageLinkElementRef) {
+ return;
}
- const pageLinkElement = this.pageLinkElementRef.nativeElement;
+ const pageLinkElement = pageLinkElementRef.nativeElement;
- if (this.disabled) {
- this.renderer.setAttribute(pageLinkElement, 'aria-disabled', 'true');
- this.renderer.setAttribute(pageLinkElement, 'tabindex', '-1');
+ if (disabled) {
+ this.#renderer.setAttribute(pageLinkElement, 'aria-disabled', 'true');
+ this.#renderer.setAttribute(pageLinkElement, 'tabindex', '-1');
} else {
- this.renderer.removeAttribute(pageLinkElement, 'aria-disabled');
- this.renderer.removeAttribute(pageLinkElement, 'tabindex');
+ this.#renderer.removeAttribute(pageLinkElement, 'aria-disabled');
+ this.#renderer.removeAttribute(pageLinkElement, 'tabindex');
}
- }
+ });
}
diff --git a/projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.ts b/projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.ts
index 40dc11c5..fd053286 100644
--- a/projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.ts
+++ b/projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.ts
@@ -1,15 +1,7 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
selector: '[cPageLink]',
- standalone: true
+ host: { class: 'page-link' }
})
-export class PageLinkDirective {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'page-link': true,
- };
- }
-}
+export class PageLinkDirective {}
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
index 24e870d8..fe5b272c 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
+++ b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html
@@ -1,3 +1,3 @@
-
-
+
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.spec.ts b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.spec.ts
index 110cfa4b..9bdf3665 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.spec.ts
+++ b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.spec.ts
@@ -1,10 +1,13 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PaginationComponent } from './pagination.component';
+import { ElementRef } from '@angular/core';
+import { By } from '@angular/platform-browser';
describe('PaginationComponent', () => {
let component: PaginationComponent;
let fixture: ComponentFixture;
+ let elementRef: ElementRef;
beforeEach(async () => {
await TestBed.configureTestingModule({
@@ -16,10 +19,15 @@ describe('PaginationComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(PaginationComponent);
component = fixture.componentInstance;
+ elementRef = fixture.debugElement.query(By.css('ul'));
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(elementRef.nativeElement).toHaveClass('pagination');
+ });
});
diff --git a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
index 9d1117fa..e1cff52c 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
+++ b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts
@@ -1,38 +1,39 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
import { NgClass } from '@angular/common';
@Component({
selector: 'c-pagination',
templateUrl: './pagination.component.html',
- standalone: true,
- imports: [NgClass]
+ imports: [NgClass],
+ host: {
+ '[attr.role]': 'role()'
+ }
})
export class PaginationComponent {
-
/**
* Set the alignment of pagination components.
* @values 'start', 'center', 'end'
*/
- @Input() align: 'start' | 'center' | 'end' | '' = '';
+ readonly align = input<'start' | 'center' | 'end' | ''>('');
/**
* Size the component small or large.
* @values 'sm', 'lg'
*/
- @Input() size?: 'sm' | 'lg';
+ readonly size = input<'sm' | 'lg'>();
/**
* Default role for pagination. [docs]
- * @type string
+ * @return string
* @default 'navigation'
*/
- @HostBinding('attr.role')
- @Input() role = 'navigation';
+ readonly role = input('navigation');
- get paginationClass(): any {
+ readonly paginationClass = computed(() => {
+ const size = this.size();
+ const align = this.align();
return {
pagination: true,
- [`pagination-${this.size}`]: !!this.size,
- [`justify-content-${this.align}`]: !!this.align
- };
- }
-
+ [`pagination-${size}`]: !!size,
+ [`justify-content-${align}`]: !!align
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.spec.ts b/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.spec.ts
index f3c40cc3..0488fac2 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.spec.ts
@@ -1,8 +1,11 @@
+import { TestBed } from '@angular/core/testing';
import { PlaceholderAnimationDirective } from './placeholder-animation.directive';
describe('PlaceholderAnimationDirective', () => {
it('should create an instance', () => {
- const directive = new PlaceholderAnimationDirective();
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new PlaceholderAnimationDirective();
+ expect(directive).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.ts b/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.ts
index 1979e3e5..212ff46f 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.ts
@@ -1,31 +1,27 @@
-import { AfterContentInit, ContentChild, Directive, HostBinding, Input } from '@angular/core';
+import { computed, contentChild, Directive, input, InputSignal } from '@angular/core';
import { PlaceholderDirective } from './placeholder.directive';
@Directive({
selector: '[cPlaceholderAnimation]',
- standalone: true
+ host: {
+ '[class]': 'hostClasses()'
+ }
})
-export class PlaceholderAnimationDirective implements AfterContentInit {
-
+export class PlaceholderAnimationDirective {
/**
* Animation type for placeholder
* @type 'glow' | 'wave'
* @default undefined
*/
- @Input('cPlaceholderAnimation') animation?: 'glow' | 'wave';
-
- @ContentChild(PlaceholderDirective) placeholder!: PlaceholderDirective;
+ readonly animation: InputSignal<'glow' | 'wave' | undefined> = input<'glow' | 'wave' | undefined>(undefined, {
+ alias: 'cPlaceholderAnimation'
+ });
- #animate: boolean = false;
+ readonly placeholder = contentChild(PlaceholderDirective);
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
- [`placeholder-${this.animation}`]: this.#animate && !!this.animation
- };
- }
-
- ngAfterContentInit() {
- this.#animate = this.placeholder?.visible;
- }
+ [`placeholder-${this.animation()}`]: this.placeholder()?.visible() && !!this.animation()
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/placeholder/placeholder.directive.spec.ts b/projects/coreui-angular/src/lib/placeholder/placeholder.directive.spec.ts
index 9a7578ed..48b76b00 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder.directive.spec.ts
@@ -1,8 +1,63 @@
+import { Component, ComponentRef, DebugElement, input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { PlaceholderDirective } from './placeholder.directive';
+import { PlaceholderAnimationDirective } from './placeholder-animation.directive';
+
+@Component({
+ template: `
+
+
+
+ `,
+ imports: [PlaceholderDirective, PlaceholderAnimationDirective]
+})
+class TestComponent {
+ readonly visible = input(true);
+ readonly animation = input<'glow' | 'wave' | undefined>(undefined);
+}
describe('PlaceholderDirective', () => {
+ let component: TestComponent;
+ let componentRef: ComponentRef;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
+ let wrapperElement: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ debugElement = fixture.debugElement.query(By.directive(PlaceholderDirective));
+ wrapperElement = fixture.debugElement.query(By.directive(PlaceholderAnimationDirective));
+ });
+
it('should create an instance', () => {
- const directive = new PlaceholderDirective();
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new PlaceholderDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should toggle visibility for the placeholder', () => {
+ componentRef.setInput('visible', true);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement).toHaveClass('placeholder');
+ expect(debugElement.nativeElement).toHaveClass('placeholder-sm');
+ componentRef.setInput('visible', false);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('aria-hidden')).toBe('true');
+ expect(debugElement.nativeElement).not.toHaveClass('placeholder');
+ });
+
+ it('should toggle animation for the placeholder', () => {
+ expect(wrapperElement.nativeElement).not.toHaveClass('placeholder-glow');
+ componentRef.setInput('animation', 'glow');
+ fixture.detectChanges();
+ expect(wrapperElement.nativeElement).toHaveClass('placeholder-glow');
});
});
diff --git a/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts b/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts
index dc705169..637d0d4c 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts
@@ -1,46 +1,37 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
@Directive({
selector: '[cPlaceholder]',
exportAs: 'cPlaceholder',
- standalone: true
+ host: {
+ '[class]': 'hostClasses()',
+ '[attr.aria-hidden]': 'ariaHidden()'
+ }
})
export class PlaceholderDirective {
-
- static ngAcceptInputType_visible: BooleanInput;
-
- constructor() { }
-
/**
* placeholder toggler
* @type boolean
* @default false
*/
- @Input('cPlaceholder')
- set visible(value: boolean) {
- this._visible = coerceBooleanProperty(value);
- }
- get visible() {
- return this._visible;
- }
- private _visible: boolean = false;
+ readonly visible: InputSignalWithTransform = input(false, {
+ transform: booleanAttribute,
+ alias: 'cPlaceholder'
+ });
/**
- * Size the placeholder extra small, small, large.
+ * Size the placeholder xs, small, large.
*/
- @Input('cPlaceholderSize') size?: 'xs' | 'sm' | 'lg';
+ readonly size = input<'xs' | 'sm' | 'lg' | undefined>(undefined, { alias: 'cPlaceholderSize' });
- @HostBinding('attr.aria-hidden')
- get ariaHidden(): boolean | null {
- return this.visible ? null : true;
- };
+ readonly ariaHidden = computed(() => {
+ return this.visible() ? null : true;
+ });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
- 'placeholder': this.visible,
- [`placeholder-${this.size}`]: !!this.size
- };
- }
+ placeholder: this.visible(),
+ [`placeholder-${this.size()}`]: !!this.size()
+ } as Record;
+ });
}
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 2cce0599..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,18 +1,97 @@
-import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { IntersectionService, ListenersService } from '../services';
+import {
+ ChangeDetectorRef,
+ Component,
+ ComponentRef,
+ DebugElement,
+ DOCUMENT,
+ ElementRef,
+ Renderer2,
+ ViewContainerRef
+} from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ListenersService } from '../services';
import { PopoverDirective } from './popover.directive';
+import { Triggers } from '../coreui.types';
+
+@Component({
+ template: '',
+ imports: [PopoverDirective]
+})
+export class TestComponent {
+ content = 'Test';
+ visible = false;
+ trigger: Triggers[] = ['hover', 'click'];
+}
+
+class MockElementRef extends ElementRef {}
describe('PopoverDirective', () => {
+ let component: TestComponent;
+ let componentRef: ComponentRef;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
let document: Document;
- let renderer: Renderer2;
- let hostElement: ElementRef;
- let viewContainerRef: ViewContainerRef;
- let changeDetectorRef: ChangeDetectorRef;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent],
+ providers: [
+ // IntersectionService,
+ Renderer2,
+ ListenersService,
+ { provide: ElementRef, useClass: MockElementRef },
+ ViewContainerRef,
+ ChangeDetectorRef
+ ]
+ }).compileComponents();
+ document = TestBed.inject(DOCUMENT);
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ debugElement = fixture.debugElement.query(By.directive(PopoverDirective));
+ fixture.autoDetectChanges();
+ });
it('should create an instance', () => {
- const listenersService = new ListenersService(renderer);
- const intersectionService = new IntersectionService();
- const directive = new PopoverDirective(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef, intersectionService);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new PopoverDirective();
+ expect(directive).toBeTruthy();
+ });
});
+
+ it('should have css classes', fakeAsync(() => {
+ expect(document.querySelector('.popover.show')).toBeNull();
+ component.visible = true;
+ fixture.detectChanges();
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeTruthy();
+ component.visible = false;
+ fixture.detectChanges();
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeNull();
+ }));
+
+ it('should set popover on and off', fakeAsync(() => {
+ fixture.autoDetectChanges();
+ component.visible = false;
+ expect(document.querySelector('.popover.show')).toBeNull();
+ debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeTruthy();
+ debugElement.nativeElement.dispatchEvent(new Event('mouseleave'));
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeNull();
+ }));
+
+ it('should toggle popover', fakeAsync(() => {
+ fixture.autoDetectChanges();
+ component.visible = false;
+ expect(document.querySelector('.popover.show')).toBeNull();
+ debugElement.nativeElement.dispatchEvent(new Event('click'));
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeTruthy();
+ debugElement.nativeElement.dispatchEvent(new Event('click'));
+ tick(500);
+ expect(document.querySelector('.popover.show')).toBeNull();
+ }));
});
diff --git a/projects/coreui-angular/src/lib/popover/popover.directive.ts b/projects/coreui-angular/src/lib/popover/popover.directive.ts
index 42e1c102..ec26169d 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.ts
@@ -2,87 +2,115 @@ import {
AfterViewInit,
ChangeDetectorRef,
ComponentRef,
+ computed,
+ DestroyRef,
Directive,
+ DOCUMENT,
+ effect,
ElementRef,
- HostBinding,
- Inject,
- Input,
- OnChanges,
+ inject,
+ input,
+ model,
OnDestroy,
OnInit,
Renderer2,
- SimpleChanges,
TemplateRef,
ViewContainerRef
} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime, filter, finalize } from 'rxjs/operators';
import { createPopper, Instance, Options } from '@popperjs/core';
import { Triggers } from '../coreui.types';
+import { IListenersConfig, IntersectionService, ListenersService } from '../services';
+import { ElementRefDirective } from '../shared';
import { PopoverComponent } from './popover/popover.component';
-import { IListenersConfig, ListenersService } from '../services/listeners.service';
-import { IntersectionService } from '../services';
@Directive({
selector: '[cPopover]',
exportAs: 'cPopover',
providers: [ListenersService, IntersectionService],
- standalone: true
+ host: { '[attr.aria-describedby]': 'ariaDescribedBy' }
})
-export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
+export class PopoverDirective implements OnDestroy, OnInit, AfterViewInit {
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #viewContainerRef = inject(ViewContainerRef);
+ readonly #listenersService = inject(ListenersService);
+ readonly #changeDetectorRef = inject(ChangeDetectorRef);
+ readonly #intersectionService = inject(IntersectionService);
+ readonly #destroyRef = inject(DestroyRef);
+ readonly #document = inject(DOCUMENT);
/**
* Content of popover
- * @type {string | TemplateRef}
+ * @return {string | TemplateRef}
*/
- @Input('cPopover') content: string | TemplateRef = '';
+ readonly content = input | undefined>(undefined, { alias: 'cPopover' });
+
+ readonly #contentEffect = effect(() => {
+ if (this.content()) {
+ this.destroyTooltipElement();
+ }
+ });
/**
* Optional popper Options object, takes precedence over cPopoverPlacement prop
- * @type Partial
+ * @return Partial
*/
- @Input('cPopoverOptions')
- set popperOptions(value: Partial) {
- this._popperOptions = { ...this._popperOptions, placement: this.placement, ...value };
- };
+ readonly popperOptions = input>({}, { alias: 'cPopoverOptions' });
- get popperOptions(): Partial {
- return { placement: this.placement, ...this._popperOptions };
- }
+ readonly #popperOptionsEffect = effect(() => {
+ this._popperOptions = {
+ ...this._popperOptions,
+ placement: this.placement(),
+ ...this.popperOptions()
+ };
+ });
+
+ readonly popperOptionsComputed = computed(() => {
+ return { placement: this.placement(), ...this._popperOptions };
+ });
/**
* Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+ * @return: 'top' | 'bottom' | 'left' | 'right'
+ * @default: 'top'
*/
- @Input('cPopoverPlacement') placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+ readonly placement = input<'top' | 'bottom' | 'left' | 'right'>('top', { alias: 'cPopoverPlacement' });
+
+ /**
+ * ElementRefDirective for positioning the tooltip on reference element
+ * @return: ElementRefDirective
+ * @default: undefined
+ */
+ readonly reference = input(undefined, { alias: 'cTooltipRef' });
+
+ readonly referenceRef = computed(() => this.reference()?.elementRef ?? this.#hostElement);
+
/**
* Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
- * @type {'hover' | 'focus' | 'click'}
+ * @return: Triggers | Triggers[]
*/
- @Input('cPopoverTrigger') trigger?: Triggers | Triggers[] = 'hover';
+ readonly trigger = input('hover', { alias: 'cPopoverTrigger' });
/**
* Toggle the visibility of popover component.
+ * @return boolean
*/
- @Input('cPopoverVisible')
- set visible(value: boolean) {
- this._visible = value;
- }
-
- get visible() {
- return this._visible;
- }
+ readonly visible = model(false, { alias: 'cPopoverVisible' });
- private _visible = false;
+ readonly #visibleEffect = effect(() => {
+ this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
+ });
- @HostBinding('attr.aria-describedby') get ariaDescribedBy(): string | null {
- return this.popoverId ? this.popoverId : null;
+ get ariaDescribedBy(): string | null {
+ return this.tooltipId ? this.tooltipId : null;
}
- private popover!: HTMLDivElement;
- private popoverId!: string;
- private popoverRef!: ComponentRef;
+ private tooltip!: HTMLDivElement;
+ private tooltipId!: string;
+ private tooltipRef!: ComponentRef;
private popperInstance!: Instance;
private _popperOptions: Partial = {
@@ -90,39 +118,19 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
{
name: 'offset',
options: {
- offset: [0, 8]
+ offset: [0, 9]
}
}
]
};
- private intersectingSubscription?: Subscription;
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private viewContainerRef: ViewContainerRef,
- private listenersService: ListenersService,
- private changeDetectorRef: ChangeDetectorRef,
- private intersectionService: IntersectionService
- ) {}
-
ngAfterViewInit(): void {
- this.intersectionService.createIntersectionObserver(this.hostElement);
this.intersectionServiceSubscribe();
}
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['visible']) {
- changes['visible'].currentValue ? this.addPopoverElement() : this.removePopoverElement();
- }
- }
-
ngOnDestroy(): void {
this.clearListeners();
- this.destroyPopoverElement();
- this.intersectionServiceSubscribe(false);
+ this.destroyTooltipElement();
}
ngOnInit(): void {
@@ -131,117 +139,116 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
private setListeners(): void {
const config: IListenersConfig = {
- hostElement: this.hostElement,
- trigger: this.trigger,
+ hostElement: this.#hostElement,
+ trigger: this.trigger(),
callbackToggle: () => {
- this.visible = !this.visible;
- this.visible ? this.addPopoverElement() : this.removePopoverElement();
+ this.visible.update((visible) => !visible);
},
callbackOff: () => {
- this.visible = false;
- this.removePopoverElement();
+ this.visible.set(false);
},
callbackOn: () => {
- this.visible = true;
- this.addPopoverElement();
+ this.visible.set(true);
}
};
- this.listenersService.setListeners(config);
+ this.#listenersService.setListeners(config);
}
private clearListeners(): void {
- this.listenersService.clearListeners();
+ this.#listenersService.clearListeners();
}
- private intersectionServiceSubscribe(subscribe: boolean = true): void {
- if (subscribe) {
- this.intersectingSubscription = this.intersectionService.intersecting$
- .pipe(
- debounceTime(100)
- )
- .subscribe(isIntersecting => {
- this.visible = isIntersecting ? this.visible : false;
- !this.visible && this.removePopoverElement();
- });
- } else {
- this.intersectingSubscription?.unsubscribe();
- }
+ private intersectionServiceSubscribe(): void {
+ this.#intersectionService.createIntersectionObserver(this.referenceRef());
+ this.#intersectionService.intersecting$
+ .pipe(
+ filter((next) => next.hostElement === this.referenceRef()),
+ debounceTime(100),
+ finalize(() => {
+ this.#intersectionService.unobserve(this.referenceRef());
+ }),
+ takeUntilDestroyed(this.#destroyRef)
+ )
+ .subscribe((next) => {
+ this.visible.set(next.isIntersecting ? this.visible() : false);
+ });
}
private getUID(prefix: string): string {
let uid = prefix ?? 'random-id';
do {
uid = `${prefix}-${Math.floor(Math.random() * 1000000).toString(10)}`;
- } while (this.document.getElementById(uid));
+ } while (this.#document.getElementById(uid));
return uid;
}
- private createPopoverElement(): void {
- if (!this.popoverRef) {
- this.popoverRef = this.viewContainerRef.createComponent(PopoverComponent);
+ private createTooltipElement(): void {
+ if (!this.tooltipRef) {
+ this.tooltipRef = this.#viewContainerRef.createComponent(PopoverComponent);
// this.viewContainerRef.detach();
}
}
- private destroyPopoverElement(): void {
- this.popover?.remove();
- this.popoverRef?.destroy();
+ private destroyTooltipElement(): void {
+ this.tooltip?.remove();
+ this.tooltipRef?.destroy();
// @ts-ignore
- this.popoverRef = undefined;
+ this.tooltipRef = undefined;
this.popperInstance?.destroy();
- this.viewContainerRef?.detach();
- this.viewContainerRef?.clear();
+ this.#viewContainerRef?.detach();
+ this.#viewContainerRef?.clear();
}
- private addPopoverElement(): void {
- if (!this.popoverRef) {
- this.createPopoverElement();
+ private addTooltipElement(): void {
+ if (!this.content()) {
+ this.destroyTooltipElement();
+ return;
+ }
+
+ if (!this.tooltipRef) {
+ this.createTooltipElement();
}
- this.popoverRef.instance.content = this.content;
- this.popover = this.popoverRef.location.nativeElement;
- this.renderer.addClass(this.popover, 'd-none');
- this.renderer.addClass(this.popover, 'fade');
+
+ this.tooltipRef?.setInput('content', this.content() ?? '');
+
+ this.tooltip = this.tooltipRef?.location.nativeElement;
+ this.#renderer.addClass(this.tooltip, 'd-none');
+ this.#renderer.addClass(this.tooltip, 'fade');
this.popperInstance?.destroy();
- setTimeout(() => {
- this.popperInstance = createPopper(
- this.hostElement.nativeElement,
- this.popover,
- { ...this.popperOptions }
- );
- this.viewContainerRef.insert(this.popoverRef.hostView);
- this.renderer.appendChild(this.document.body, this.popover);
- if (!this.visible) {
- this.removePopoverElement();
- return;
- }
- setTimeout(() => {
- this.popoverId = this.getUID('popover');
- this.popoverRef.instance.id = this.popoverId;
- if (!this.visible) {
- this.removePopoverElement();
- return;
- }
- this.renderer.removeClass(this.popover, 'd-none');
- this.popoverRef.instance.visible = this.visible;
- this.popperInstance.forceUpdate();
- this.changeDetectorRef.markForCheck();
- }, 100);
+ this.#viewContainerRef.insert(this.tooltipRef.hostView);
+ this.#renderer.appendChild(this.#document.body, this.tooltip);
+
+ this.popperInstance = createPopper(this.referenceRef().nativeElement, this.tooltip, {
+ ...this.popperOptionsComputed()
});
- }
- private removePopoverElement(): void {
- this.popoverId = '';
- if (!this.popoverRef) {
+ if (!this.visible()) {
+ this.removeTooltipElement();
+ return;
+ }
+ setTimeout(() => {
+ this.tooltipId = this.getUID('popover');
+ this.tooltipRef?.setInput('id', this.tooltipId);
+ this.#renderer.removeClass(this.tooltip, 'd-none');
+ this.tooltipRef?.setInput('visible', this.visible());
+ this.popperInstance?.forceUpdate();
+ this.#changeDetectorRef?.markForCheck();
+ }, 100);
+ }
+
+ private removeTooltipElement(): void {
+ this.tooltipId = '';
+ if (!this.tooltipRef) {
return;
}
- this.popoverRef.instance.visible = false;
- this.popoverRef.instance.id = undefined;
- this.changeDetectorRef.markForCheck();
+ this.tooltipRef.setInput('visible', false);
+ this.tooltipRef.setInput('id', undefined);
+ this.#changeDetectorRef.markForCheck();
setTimeout(() => {
- this.viewContainerRef.detach();
+ this.#viewContainerRef?.detach();
}, 300);
}
}
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.html b/projects/coreui-angular/src/lib/popover/popover/popover.component.html
index 8a24a3a9..afa937fe 100644
--- a/projects/coreui-angular/src/lib/popover/popover/popover.component.html
+++ b/projects/coreui-angular/src/lib/popover/popover/popover.component.html
@@ -1,4 +1,4 @@
-
-
+
+
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.spec.ts b/projects/coreui-angular/src/lib/popover/popover/popover.component.spec.ts
index 4a2220f1..53ba179b 100644
--- a/projects/coreui-angular/src/lib/popover/popover/popover.component.spec.ts
+++ b/projects/coreui-angular/src/lib/popover/popover/popover.component.spec.ts
@@ -22,4 +22,10 @@ describe('PopoverComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('popover');
+ expect(fixture.nativeElement).toHaveClass('fade');
+ expect(fixture.nativeElement).toHaveClass('bs-popover-auto');
+ });
});
diff --git a/projects/coreui-angular/src/lib/popover/popover/popover.component.ts b/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
index e3d9cfd2..70175099 100644
--- a/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
+++ b/projects/coreui-angular/src/lib/popover/popover/popover.component.ts
@@ -1,14 +1,14 @@
import {
- AfterViewInit,
+ booleanAttribute,
Component,
- HostBinding,
- Input,
- OnChanges,
+ computed,
+ effect,
+ inject,
+ input,
OnDestroy,
Renderer2,
- SimpleChanges,
TemplateRef,
- ViewChild,
+ viewChild,
ViewContainerRef
} from '@angular/core';
import { NgClass } from '@angular/common';
@@ -16,61 +16,53 @@ import { NgClass } from '@angular/common';
@Component({
selector: 'c-popover',
templateUrl: './popover.component.html',
- standalone: true,
- imports: [NgClass]
+ imports: [NgClass],
+ host: {
+ class: 'popover fade bs-popover-auto',
+ '[class]': 'hostClasses()',
+ '[attr.role]': 'role()',
+ '[attr.id]': 'id()'
+ }
})
-export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class PopoverComponent implements OnDestroy {
+ readonly renderer = inject(Renderer2);
/**
* Content of popover
- * @type {string | TemplateRef}
+ * @return {string | TemplateRef}
*/
- @Input() content: string | TemplateRef = '';
+ readonly content = input>('');
+
+ readonly #contentEffect = effect(() => {
+ this.updateView(this.content());
+ });
+
/**
* Toggle the visibility of popover component.
- * @type boolean
+ * @return boolean
*/
- @Input() visible = false;
- @Input() @HostBinding('attr.id') id?: string;
- @Input() @HostBinding('attr.role') role = 'tooltip';
+ readonly visible = input(false, { transform: booleanAttribute });
+ readonly id = input();
+ readonly role = input('tooltip');
- @ViewChild('popoverTemplate', { read: ViewContainerRef }) viewContainerRef!: ViewContainerRef;
+ readonly viewContainerRef = viewChild('popoverTemplate', { read: ViewContainerRef });
private textNode!: Text;
- constructor(
- private renderer: Renderer2
- ) { }
-
- @HostBinding('class')
- get hostClasses(): { [klass: string]: any; } {
+ readonly hostClasses = computed(() => {
return {
popover: true,
fade: true,
- show: this.visible,
+ show: this.visible(),
'bs-popover-auto': true
- };
- }
-
- ngAfterViewInit(): void {
- setTimeout(() => {
- this.updateView(this.content);
- });
- }
-
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['content']) {
- setTimeout(() => {
- this.updateView(this.content);
- });
- }
- }
+ } as Record;
+ });
ngOnDestroy(): void {
this.clear();
}
private clear(): void {
- this.viewContainerRef?.clear();
+ this.viewContainerRef()?.clear();
if (!!this.textNode) {
this.renderer.removeChild(this.textNode.parentNode, this.textNode);
}
@@ -84,15 +76,15 @@ export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
}
if (content instanceof TemplateRef) {
- this.viewContainerRef.createEmbeddedView(content);
+ this.viewContainerRef()?.createEmbeddedView(content);
} else {
- this.textNode = this.renderer.createText(content);
- const popoverBody = this.renderer.createElement('div');
- this.renderer.addClass(popoverBody, 'popover-body');
- this.renderer.appendChild(popoverBody, this.textNode);
+ const textNodeContent = this.renderer.createText(content);
+ this.textNode = this.renderer.createElement('div');
+ this.renderer.addClass(this.textNode, 'popover-body');
+ this.renderer.appendChild(this.textNode, textNodeContent);
- const element = this.viewContainerRef.element.nativeElement;
- this.renderer.appendChild(element.parentNode, popoverBody);
+ const element = this.viewContainerRef()?.element.nativeElement;
+ this.renderer.appendChild(element.parentNode, this.textNode);
}
}
}
diff --git a/projects/coreui-angular/src/lib/progress/progress-bar.component.spec.ts b/projects/coreui-angular/src/lib/progress/progress-bar.component.spec.ts
index d7fef619..6441107e 100644
--- a/projects/coreui-angular/src/lib/progress/progress-bar.component.spec.ts
+++ b/projects/coreui-angular/src/lib/progress/progress-bar.component.spec.ts
@@ -1,25 +1,64 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarDirective } from './progress-bar.directive';
+import { ProgressService } from './progress.service';
describe('ProgressBarComponent', () => {
let component: ProgressBarComponent;
+ let componentRef: ComponentRef;
let fixture: ComponentFixture;
+ let directive: ProgressBarDirective;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [ProgressBarComponent]
- })
- .compileComponents();
- }));
+ imports: [ProgressBarComponent],
+ providers: [ProgressService]
+ }).compileComponents();
- beforeEach(() => {
fixture = TestBed.createComponent(ProgressBarComponent);
+
component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ directive = fixture.debugElement.injector.get(ProgressBarDirective);
+ componentRef.setInput('value', 42);
+ componentRef.setInput('color', 'success');
+ componentRef.setInput('variant', 'striped');
+ componentRef.setInput('animated', true);
fixture.detectChanges();
- });
+ }));
it('should create', () => {
- expect(component).toBeTruthy();
+ expect(component).toBeDefined();
+ });
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('progress-bar');
+ expect(fixture.nativeElement).toHaveClass('bg-success');
+ expect(fixture.nativeElement).toHaveClass('progress-bar-striped');
+ expect(fixture.nativeElement).toHaveClass('progress-bar-animated');
+ });
+
+ it('should have style width %', () => {
+ expect(fixture.nativeElement.style.width).toBe('42%');
+ });
+
+ it('should have aria-* attributes', () => {
+ expect(fixture.nativeElement.getAttribute('aria-valuenow')).toBe('42');
+ expect(fixture.nativeElement.getAttribute('aria-valuemin')).toBe('0');
+ expect(fixture.nativeElement.getAttribute('aria-valuemax')).toBe('100');
+ expect(fixture.nativeElement.getAttribute('role')).toBe('progressbar');
+ });
+
+ it('should not have aria-* attributes', () => {
+ componentRef.setInput('value', undefined);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.getAttribute('aria-valuenow')).toBeFalsy();
+ expect(fixture.nativeElement.getAttribute('aria-valuemin')).toBeFalsy();
+ expect(fixture.nativeElement.getAttribute('aria-valuemax')).toBeFalsy();
+ expect(fixture.nativeElement.getAttribute('role')).toBeFalsy();
+ // expect(fixture.nativeElement.style.width).toBeFalsy();
+ expect(fixture.nativeElement.style.width).toBe('0%');
});
});
diff --git a/projects/coreui-angular/src/lib/progress/progress-bar.component.ts b/projects/coreui-angular/src/lib/progress/progress-bar.component.ts
index 1d4eefba..6d61a885 100644
--- a/projects/coreui-angular/src/lib/progress/progress-bar.component.ts
+++ b/projects/coreui-angular/src/lib/progress/progress-bar.component.ts
@@ -1,112 +1,29 @@
-import {
- booleanAttribute,
- Component,
- ElementRef,
- HostBinding,
- Input,
- numberAttribute,
- OnChanges,
- OnInit,
- Renderer2,
- SimpleChanges
-} from '@angular/core';
-import { Colors } from '../coreui.types';
+import { Component, computed, inject } from '@angular/core';
+import { ProgressBarDirective } from './progress-bar.directive';
@Component({
selector: 'c-progress-bar',
- template: '',
- standalone: true
+ template: '',
+ hostDirectives: [
+ {
+ directive: ProgressBarDirective,
+ inputs: ['animated', 'color', 'max', 'role', 'value', 'variant']
+ }
+ ],
+ host: { class: 'progress-bar', '[class]': 'hostClasses()' }
})
-export class ProgressBarComponent implements OnInit, OnChanges {
+export class ProgressBarComponent {
+ readonly #progressBarDirective: ProgressBarDirective | null = inject(ProgressBarDirective, { optional: true });
- /**
- * Use to animate the stripes right to left via CSS3 animations.
- * @type boolean
- */
- @Input({ transform: booleanAttribute }) animated: string | boolean = false;
-
- /**
- * Sets the color context of the component to one of CoreUI’s themed colors.
- * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
- */
- @Input() color?: Colors;
- // TODO: check if this is necessary.
- @Input({ transform: numberAttribute }) precision: string | number = 0;
- /**
- * The percent to progress the ProgressBar.
- * @type number
- */
- @Input({ transform: numberAttribute }) value: string | number = 0;
-
- /**
- * Set the progress bar variant to optional striped.
- * @values 'striped'
- */
- @Input() variant?: 'striped';
-
- /**
- * Set default html role attribute.
- * @type string
- */
- @Input()
- @HostBinding('attr.role') role = 'progressbar';
- private state = {
- percent: 0,
- min: 0,
- max: 100
- };
-
- constructor(
- private renderer: Renderer2,
- private hostElement: ElementRef
- ) { }
-
- get min(): number {
- return this.state.min;
- }
-
- @Input()
- set min(value: number) {
- this.state.min = isNaN(value) ? 0 : value;
- }
-
- get max(): number {
- return this.state.max;
- }
-
- @Input()
- set max(value: number) {
- this.state.max = isNaN(value) || value <= 0 || value === this.min ? 100 : value;
- }
-
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const animated = this.#progressBarDirective?.animated();
+ const color = this.#progressBarDirective?.color();
+ const variant = this.#progressBarDirective?.variant();
return {
'progress-bar': true,
- 'progress-bar-animated': this.animated,
- [`progress-bar-${this.variant}`]: !!this.variant,
- [`bg-${this.color}`]: !!this.color
- };
- }
-
- ngOnInit(): void {
- this.setValues();
- }
-
- setPercent(): void {
- this.state.percent = +((this.value / (this.max - this.min)) * 100).toFixed(this.precision);
- }
-
- setValues(): void {
- this.setPercent();
- const host: HTMLElement = this.hostElement.nativeElement;
- this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
- this.renderer.setAttribute(host, 'aria-valuenow', String(this.value));
- this.renderer.setAttribute(host, 'aria-valuemin', String(this.min));
- this.renderer.setAttribute(host, 'aria-valuemax', String(this.max));
- }
-
- public ngOnChanges(changes: SimpleChanges): void {
- this.setValues();
- }
+ 'progress-bar-animated': !!animated,
+ [`progress-bar-${variant}`]: !!variant,
+ [`bg-${color}`]: !!color
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/progress/progress-bar.directive.spec.ts b/projects/coreui-angular/src/lib/progress/progress-bar.directive.spec.ts
new file mode 100644
index 00000000..35b7967a
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress-bar.directive.spec.ts
@@ -0,0 +1,81 @@
+import { Component, ComponentRef, DebugElement, ElementRef, input, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ProgressBarDirective } from './progress-bar.directive';
+import { By } from '@angular/platform-browser';
+import { ProgressService } from './progress.service';
+
+class MockElementRef extends ElementRef {}
+
+@Component({
+ template: ``,
+ selector: 'c-test',
+ imports: [ProgressBarDirective]
+})
+export class TestComponent {
+ readonly value = input(42);
+ readonly color = input('success');
+}
+
+describe('ProgressBarDirective', () => {
+ let directive: ProgressBarDirective;
+ let debugElement: DebugElement;
+ let fixture: ComponentFixture;
+ let componentRef: ComponentRef;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }, ProgressService],
+ imports: [TestComponent]
+ });
+ fixture = TestBed.createComponent(TestComponent);
+ componentRef = fixture.componentRef;
+ debugElement = fixture.debugElement.query(By.directive(ProgressBarDirective));
+ directive = debugElement.injector.get(ProgressBarDirective);
+ fixture.detectChanges();
+
+ // TestBed.runInInjectionContext(() => {
+ // directive = new ProgressBarDirective();
+ // });
+ });
+
+ it('should create an instance', () => {
+ expect(directive).toBeDefined();
+ });
+
+ it('should have color value', () => {
+ expect(directive.color()).toBe('success');
+ });
+
+ it('should have max value', () => {
+ expect(directive.max()).toBe(100);
+ });
+
+ it('should have variant value', () => {
+ expect(directive.variant()).toBe('striped');
+ });
+
+ it('should have role value', () => {
+ expect(directive.role()).toBe('progressbar');
+ });
+
+ it('should have precision value', () => {
+ expect(directive.precision()).toBe(0);
+ });
+
+ it('should have animated value', () => {
+ expect(directive.animated()).toBe(true);
+ });
+
+ it('should have aria-* attributes', () => {
+ expect(debugElement.nativeElement.getAttribute('aria-valuenow')).toBe('42');
+ expect(debugElement.nativeElement.getAttribute('aria-valuemin')).toBe('0');
+ expect(debugElement.nativeElement.getAttribute('aria-valuemax')).toBe('100');
+ expect(debugElement.nativeElement.getAttribute('role')).toBe('progressbar');
+ componentRef.setInput('value', undefined);
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('aria-valuenow')).toBeNull();
+ expect(debugElement.nativeElement.getAttribute('aria-valuemin')).toBeNull();
+ expect(debugElement.nativeElement.getAttribute('aria-valuemax')).toBeNull();
+ expect(debugElement.nativeElement.getAttribute('role')).toBeNull();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/progress/progress-bar.directive.ts b/projects/coreui-angular/src/lib/progress/progress-bar.directive.ts
new file mode 100644
index 00000000..6e972d0e
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress-bar.directive.ts
@@ -0,0 +1,96 @@
+import {
+ booleanAttribute,
+ Directive,
+ effect,
+ EffectRef,
+ ElementRef,
+ inject,
+ input,
+ numberAttribute,
+ Renderer2
+} from '@angular/core';
+import { Colors } from '../coreui.types';
+import { ProgressService } from './progress.service';
+
+@Directive({
+ selector: '[cProgressBar]',
+ exportAs: 'cProgressBar'
+})
+export class ProgressBarDirective {
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #progressService = inject(ProgressService);
+
+ readonly #valuesEffect: EffectRef = effect(() => {
+ const host: HTMLElement = this.#hostElement.nativeElement;
+ const value = this.#progressService.value();
+ const percent = this.#progressService.percent();
+ const stacked = this.#progressService.stacked();
+ if (value === undefined) {
+ for (const name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) {
+ this.#renderer.removeAttribute(host, name);
+ }
+ } else {
+ const { min, max } = this.#progressService;
+ this.#renderer.setAttribute(host, 'aria-valuenow', String(value));
+ this.#renderer.setAttribute(host, 'aria-valuemin', String(min()));
+ this.#renderer.setAttribute(host, 'aria-valuemax', String(max()));
+ this.#renderer.setAttribute(host, 'role', this.role());
+ }
+ const tagName = host.tagName;
+ if (percent >= 0 && ((stacked && tagName === 'C-PROGRESS') || (!stacked && tagName !== 'C-PROGRESS'))) {
+ this.#renderer.setStyle(host, 'width', `${percent}%`);
+ } else {
+ this.#renderer.removeStyle(host, 'width');
+ }
+ });
+
+ /**
+ * Use to animate the stripes right to left via CSS3 animations.
+ * @return boolean
+ */
+ readonly animated = input(undefined, { transform: booleanAttribute });
+
+ /**
+ * Sets the color context of the component to one of CoreUI’s themed colors.
+ * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+ */
+ readonly color = input();
+
+ readonly precision = input(0, { transform: numberAttribute });
+
+ /**
+ * The percent value the ProgressBar.
+ * @return number
+ * @default 0
+ */
+ readonly value = input(0, { transform: numberAttribute });
+
+ /**
+ * Set the progress bar variant to optional striped.
+ * @values 'striped'
+ * @default undefined
+ */
+ readonly variant = input<'striped'>();
+
+ /**
+ * The max value of the ProgressBar.
+ * @return number
+ * @default 100
+ */
+ readonly max = input(100, { transform: numberAttribute });
+
+ /**
+ * Set default html role attribute.
+ * @return string
+ */
+ readonly role = input('progressbar');
+
+ readonly #serviceEffect = effect(() => {
+ this.#progressService.precision.set(this.precision());
+ const max = this.max();
+ this.#progressService.max.set(isNaN(max) || max <= 0 ? 100 : max);
+ const value = this.value();
+ this.#progressService.value.set(value && !isNaN(value) ? value : undefined);
+ });
+}
diff --git a/projects/coreui-angular/src/lib/progress/progress-bar.ts b/projects/coreui-angular/src/lib/progress/progress-bar.ts
deleted file mode 100644
index d5416b29..00000000
--- a/projects/coreui-angular/src/lib/progress/progress-bar.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IStackedBar {
- value: number;
- color?: string;
- label?: string;
- animated?: boolean;
- striped?: boolean;
- precision?: number;
- min?: number;
- max?: number;
-}
diff --git a/projects/coreui-angular/src/lib/progress/progress-stacked.component.spec.ts b/projects/coreui-angular/src/lib/progress/progress-stacked.component.spec.ts
new file mode 100644
index 00000000..0c3508de
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress-stacked.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressStackedComponent } from './progress-stacked.component';
+
+describe('ProgressStackedComponent', () => {
+ let component: ProgressStackedComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ProgressStackedComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ProgressStackedComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ expect(component.stacked).toBeTruthy();
+ });
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('progress-stacked');
+ });
+});
diff --git a/projects/coreui-angular/src/lib/progress/progress-stacked.component.ts b/projects/coreui-angular/src/lib/progress/progress-stacked.component.ts
new file mode 100644
index 00000000..b5cd17af
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress-stacked.component.ts
@@ -0,0 +1,16 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+ selector: 'c-progress-stacked',
+ exportAs: 'cProgressStacked',
+ template: '',
+ styles: `
+ :host {
+ display: flex;
+ }
+ `,
+ host: { '[class.progress-stacked]': 'stacked()' }
+})
+export class ProgressStackedComponent {
+ readonly stacked = input(true);
+}
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.html b/projects/coreui-angular/src/lib/progress/progress.component.html
new file mode 100644
index 00000000..6c718035
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress.component.html
@@ -0,0 +1,13 @@
+@if (contentProgressBars()?.length) {
+
+} @else {
+ @let pbd = progressBarDirective;
+
+
+
+}
+
+
+
+
+
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.scss b/projects/coreui-angular/src/lib/progress/progress.component.scss
new file mode 100644
index 00000000..381bd487
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress.component.scss
@@ -0,0 +1,5 @@
+:host-context(.progress-stacked) {
+ &.progress {
+ transition: var(--cui-progress-bar-transition)
+ }
+}
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.spec.ts b/projects/coreui-angular/src/lib/progress/progress.component.spec.ts
index 861fb081..24f9d3b9 100644
--- a/projects/coreui-angular/src/lib/progress/progress.component.spec.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.component.spec.ts
@@ -1,25 +1,50 @@
+import { Component, DebugNode } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ProgressComponent } from './progress.component';
+import { ProgressBarDirective } from './progress-bar.directive';
+
+@Component({
+ template: ` `,
+ selector: 'c-test',
+ imports: [ProgressComponent]
+})
+export class TestComponent {}
describe('ProgressComponent', () => {
- let component: ProgressComponent;
- let fixture: ComponentFixture;
+ let component: TestComponent;
+ let progress: DebugNode | undefined;
+ let fixture: ComponentFixture;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [ProgressComponent]
- })
- .compileComponents();
- }));
+ imports: [TestComponent, ProgressComponent, ProgressBarDirective]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
- beforeEach(() => {
- fixture = TestBed.createComponent(ProgressComponent);
component = fixture.componentInstance;
+ progress = fixture.debugElement.childNodes.find((v) => ProgressComponent);
+ // let x= fixture.debugElement.queryAll(By.directive(ProgressBarDirective))
fixture.detectChanges();
- });
+ }));
it('should create', () => {
- expect(component).toBeTruthy();
+ expect(component).toBeDefined();
+ expect(progress).toBeDefined();
+ });
+
+ it('should have css classes', () => {
+ expect(progress?.nativeNode).toHaveClass('progress');
+ });
+
+ it('should have style width %', () => {
+ expect(progress?.nativeNode.style.width).toBe('');
+ });
+
+ it('should have aria-* attributes', () => {
+ expect(progress?.nativeNode.getAttribute('aria-valuenow')).toBe('42');
+ expect(progress?.nativeNode.getAttribute('aria-valuemin')).toBe('0');
+ expect(progress?.nativeNode.getAttribute('aria-valuemax')).toBe('100');
});
});
diff --git a/projects/coreui-angular/src/lib/progress/progress.component.ts b/projects/coreui-angular/src/lib/progress/progress.component.ts
index 4c302146..9f4c0811 100644
--- a/projects/coreui-angular/src/lib/progress/progress.component.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.component.ts
@@ -1,41 +1,84 @@
-import { booleanAttribute, Component, HostBinding, Input, numberAttribute } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+ booleanAttribute,
+ Component,
+ computed,
+ contentChildren,
+ ElementRef,
+ inject,
+ input,
+ numberAttribute
+} from '@angular/core';
+import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarDirective } from './progress-bar.directive';
+import { ProgressStackedComponent } from './progress-stacked.component';
+import { ProgressService } from './progress.service';
@Component({
selector: 'c-progress',
- template: '',
- standalone: true
+ exportAs: 'cProgress',
+ templateUrl: './progress.component.html',
+ imports: [ProgressBarComponent, NgTemplateOutlet],
+ styleUrl: './progress.component.scss',
+ hostDirectives: [
+ {
+ directive: ProgressBarDirective,
+ inputs: ['animated', 'color', 'max', 'role', 'value', 'variant']
+ }
+ ],
+ host: {
+ class: 'progress',
+ '[class]': 'hostClasses()',
+ '[style.height]': 'hostStyle()'
+ },
+ providers: [ProgressService]
})
export class ProgressComponent {
+ readonly #hostElement = inject(ElementRef);
+ protected readonly progressBarDirective: ProgressBarDirective | null = inject(ProgressBarDirective, {
+ optional: true
+ });
+ readonly #stacked: boolean = inject(ProgressStackedComponent, { optional: true })?.stacked() ?? false;
+ readonly #progressService = inject(ProgressService);
+
+ constructor() {
+ this.#progressService.stacked.set(this.#stacked);
+ }
+
+ readonly stacked = this.#progressService.stacked;
+ readonly percent = this.#progressService.percent;
+ readonly barValue = this.#progressService.value;
+
+ readonly contentProgressBars = contentChildren(ProgressBarComponent);
/**
* Sets the height of the component. If you set that value the inner `` will automatically resize accordingly.
- * @type number
+ * @return number
*/
- @Input({ transform: numberAttribute }) height: string | number = 0;
+ readonly height = input(0, { transform: numberAttribute });
/**
* Displays thin progress.
- * @type boolean
+ * @return boolean
*/
- @Input({ transform: booleanAttribute }) thin: string | boolean = false;
+ readonly thin = input(false, { transform: booleanAttribute });
/**
* Change the default color to white.
- * @type boolean
+ * @return boolean
*/
- @Input({ transform: booleanAttribute }) white: string | boolean = false;
+ readonly white = input(false, { transform: booleanAttribute });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
progress: true,
- 'progress-thin': this.thin,
- 'progress-white': this.white
- };
- }
+ 'progress-thin': this.thin(),
+ 'progress-white': this.white()
+ } as Record;
+ });
- @HostBinding('style.height')
- get hostStyle(): any {
- return !!this.height ? `${this.height}px` : '';
- }
+ readonly hostStyle = computed(() => {
+ const height = this.height();
+ return !!height ? `${height}px` : (this.#hostElement?.nativeElement?.style?.height ?? undefined);
+ });
}
diff --git a/projects/coreui-angular/src/lib/progress/progress.module.ts b/projects/coreui-angular/src/lib/progress/progress.module.ts
index f4101373..5f91781f 100644
--- a/projects/coreui-angular/src/lib/progress/progress.module.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.module.ts
@@ -1,15 +1,21 @@
import { NgModule } from '@angular/core';
import { ProgressComponent } from './progress.component';
import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarDirective } from './progress-bar.directive';
+import { ProgressStackedComponent } from './progress-stacked.component';
@NgModule({
exports: [
ProgressComponent,
- ProgressBarComponent
+ ProgressBarComponent,
+ ProgressBarDirective,
+ ProgressStackedComponent
],
imports: [
ProgressComponent,
- ProgressBarComponent
+ ProgressBarComponent,
+ ProgressBarDirective,
+ ProgressStackedComponent
]
})
export class ProgressModule {}
diff --git a/projects/coreui-angular/src/lib/progress/progress.service.spec.ts b/projects/coreui-angular/src/lib/progress/progress.service.spec.ts
new file mode 100644
index 00000000..fe751942
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress.service.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProgressService } from './progress.service';
+
+describe('ProgressService', () => {
+ let service: ProgressService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [ProgressService]
+ });
+ service = TestBed.inject(ProgressService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should expose values', () => {
+ service.value.set(42);
+ expect(service.percent()).toBe(42);
+ expect(service.min()).toBe(0);
+ expect(service.max()).toBe(100);
+ expect(service.value()).toBe(42);
+ service.max.set(200);
+ expect(service.max()).toBe(200);
+ service.value.set(84);
+ expect(service.percent()).toBe(42);
+ service.value.set(undefined);
+ expect(service.percent()).toBe(0);
+ });
+});
diff --git a/projects/coreui-angular/src/lib/progress/progress.service.ts b/projects/coreui-angular/src/lib/progress/progress.service.ts
new file mode 100644
index 00000000..1a43dac0
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress.service.ts
@@ -0,0 +1,14 @@
+import { computed, Injectable, signal } from '@angular/core';
+
+@Injectable()
+export class ProgressService {
+ readonly stacked = signal(false);
+ readonly value = signal(undefined);
+ readonly precision = signal(0);
+ readonly min = signal(0);
+ readonly max = signal(100);
+
+ readonly percent = computed(() => {
+ return +((((this.value() ?? 0) - this.min()) / (this.max() - this.min())) * 100).toFixed(this.precision());
+ });
+}
diff --git a/projects/coreui-angular/src/lib/progress/progress.type.ts b/projects/coreui-angular/src/lib/progress/progress.type.ts
new file mode 100644
index 00000000..7fe7e28b
--- /dev/null
+++ b/projects/coreui-angular/src/lib/progress/progress.type.ts
@@ -0,0 +1,21 @@
+import { Colors } from '../coreui.types';
+
+export interface IProgress {
+ height: number;
+ thin: boolean;
+ white: boolean;
+}
+
+export interface IProgressBar extends IProgressBarStacked {
+ animated?: boolean;
+ color?: Colors;
+ max?: number;
+ precision: number;
+ value?: number;
+ variant?: 'striped';
+ width?: number;
+}
+
+export interface IProgressBarStacked {
+ stacked?: boolean;
+}
diff --git a/projects/coreui-angular/src/lib/progress/public_api.ts b/projects/coreui-angular/src/lib/progress/public_api.ts
index 6c97b9ed..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,6 @@
-export { IStackedBar } from './progress-bar';
+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';
+export { ProgressBarDirective } from './progress-bar.directive';
export { ProgressModule } from './progress.module';
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 5e53ad53..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,26 +1,24 @@
-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'
})
export class ClassToggleService {
+ readonly #document = inject(DOCUMENT);
+ readonly #rendererFactory = inject(RendererFactory2);
- private renderer: Renderer2;
+ #renderer: Renderer2;
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private rendererFactory: RendererFactory2
- ) {
- this.renderer = rendererFactory.createRenderer(null, null);
+ constructor() {
+ this.#renderer = this.#rendererFactory.createRenderer(null, null);
}
toggle(selector: any, className: string) {
- const element = document.querySelector(selector);
+ const element = this.#document.querySelector(selector);
if (element) {
- element.classList.contains(className) ?
- this.renderer.removeClass(element, className) :
- this.renderer.addClass(element, className);
+ element.classList.contains(className)
+ ? this.#renderer.removeClass(element, className)
+ : this.#renderer.addClass(element, className);
}
}
}
diff --git a/projects/coreui-angular/src/lib/services/color-mode.service.spec.ts b/projects/coreui-angular/src/lib/services/color-mode.service.spec.ts
new file mode 100644
index 00000000..6118fee6
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/color-mode.service.spec.ts
@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { ColorModeService } from './color-mode.service';
+
+describe('ColorModeService', () => {
+
+ let service: ColorModeService;
+
+ beforeEach(() => {
+ service = TestBed.inject(ColorModeService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should switch themes', () => {
+ expect(service.colorMode()).toBeUndefined();
+ service.colorMode.set('light');
+ expect(service.colorMode()).toBe('light');
+ service.colorMode.set('dark');
+ expect(service.colorMode()).toBe('dark');
+ service.colorMode.set('auto');
+ expect(service.colorMode()).toBe('auto');
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/color-mode.service.ts b/projects/coreui-angular/src/lib/services/color-mode.service.ts
new file mode 100644
index 00000000..c681ed84
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/color-mode.service.ts
@@ -0,0 +1,95 @@
+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';
+
+export type ColorMode = 'light' | 'dark' | 'auto' | string | undefined;
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ColorModeService {
+ readonly #destroyRef: DestroyRef = inject(DestroyRef);
+ readonly #document: Document = inject(DOCUMENT);
+ readonly #localStorage: LocalStorageService = inject(LocalStorageService);
+
+ readonly eventName = signal('ColorSchemeChange');
+ readonly localStorageItemName: WritableSignal = signal(undefined);
+ readonly localStorageItemName$ = toObservable(this.localStorageItemName);
+ readonly colorMode: WritableSignal = signal(undefined);
+
+ readonly #colorModeEffect = effect(() => {
+ const colorMode = this.colorMode();
+ if (colorMode) {
+ const localStorageItemName = this.localStorageItemName();
+ localStorageItemName && this.setStoredTheme(localStorageItemName, colorMode);
+ this.#setTheme(colorMode);
+ }
+ });
+
+ constructor() {
+ afterNextRender({
+ read: () => {
+ this.localStorageItemName$
+ .pipe(
+ tap((params) => {
+ this.colorMode.set(this.getDefaultScheme(params));
+ }),
+ takeUntilDestroyed(this.#destroyRef)
+ )
+ .subscribe();
+ }
+ });
+ }
+
+ getStoredTheme(localStorageItemName: string) {
+ return this.#localStorage.getItem(localStorageItemName);
+ }
+
+ setStoredTheme(localStorageItemName: string, colorMode: string) {
+ return this.#localStorage.setItem(localStorageItemName, colorMode);
+ }
+
+ removeStoredTheme(localStorageItemName: string) {
+ this.#localStorage.removeItem(localStorageItemName);
+ }
+
+ getDefaultScheme(localStorageItemName: string | undefined) {
+ if (this.#document.defaultView === undefined) {
+ return this.getDatasetTheme();
+ }
+
+ const storedTheme = localStorageItemName && this.getStoredTheme(localStorageItemName);
+
+ return storedTheme ?? this.getDatasetTheme();
+ }
+
+ getPrefersColorScheme() {
+ return this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : this.#document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches
+ ? 'light'
+ : undefined;
+ }
+
+ getDatasetTheme(): ColorMode {
+ return this.#document.documentElement.dataset['coreuiTheme'];
+ }
+
+ #setTheme(colorMode: ColorMode) {
+ this.#document.documentElement.dataset['coreuiTheme'] =
+ colorMode === 'auto' ? this.getPrefersColorScheme() : colorMode;
+
+ const event = new Event(this.eventName());
+ this.#document.documentElement.dispatchEvent(event);
+ }
+}
diff --git a/projects/coreui-angular/src/lib/services/in-memory-storage.service.spec.ts b/projects/coreui-angular/src/lib/services/in-memory-storage.service.spec.ts
new file mode 100644
index 00000000..dd5ce72b
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/in-memory-storage.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InMemoryStorageService } from './in-memory-storage.service';
+
+describe('InMemoryStorageService', () => {
+ let service: InMemoryStorageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(InMemoryStorageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/in-memory-storage.service.ts b/projects/coreui-angular/src/lib/services/in-memory-storage.service.ts
new file mode 100644
index 00000000..2d060d3f
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/in-memory-storage.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class InMemoryStorageService implements Storage {
+ #storage = new Map();
+
+ public setItem(key: string, data: any): void {
+ this.#storage.set(key, JSON.stringify(data));
+ }
+
+ public getItem(key: string): any {
+ return this.#storage.has(key) ? JSON.parse(this.#storage.get(key) ?? 'null') : undefined;
+ }
+
+ public removeItem(key: string): void {
+ this.#storage.delete(key);
+ }
+
+ public clear() {
+ this.#storage.clear();
+ }
+
+ public get length() {
+ return this.#storage.size;
+ }
+
+ public key(index: number) {
+ return Array.from(this.#storage.keys())[index];
+ }
+}
diff --git a/projects/coreui-angular/src/lib/services/intersection.service.spec.ts b/projects/coreui-angular/src/lib/services/intersection.service.spec.ts
index b56af721..9954988e 100644
--- a/projects/coreui-angular/src/lib/services/intersection.service.spec.ts
+++ b/projects/coreui-angular/src/lib/services/intersection.service.spec.ts
@@ -7,10 +7,9 @@ describe('IntersectionService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [IntersectionService]
+ providers: [IntersectionService]
});
- service = new IntersectionService();
- // service = TestBed.inject(IntersectionService);
+ service = TestBed.inject(IntersectionService);
});
it('should be created', () => {
diff --git a/projects/coreui-angular/src/lib/services/intersection.service.ts b/projects/coreui-angular/src/lib/services/intersection.service.ts
index 92db7b4a..72d9dfc7 100644
--- a/projects/coreui-angular/src/lib/services/intersection.service.ts
+++ b/projects/coreui-angular/src/lib/services/intersection.service.ts
@@ -1,4 +1,5 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { ElementRef, inject, Injectable, OnDestroy, PLATFORM_ID } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
export interface IIntersectionObserverInit {
@@ -7,16 +8,15 @@ export interface IIntersectionObserverInit {
threshold?: number | number[];
}
-@Injectable()
+@Injectable({
+ providedIn: 'root'
+})
export class IntersectionService implements OnDestroy {
- constructor() { }
+ platformId = inject(PLATFORM_ID);
- private intersecting = new BehaviorSubject(false);
- intersecting$ = this.intersecting.asObservable();
-
- private intersectionObserver!: IntersectionObserver;
- private hostElement!: { nativeElement: Element; };
+ readonly #intersecting: BehaviorSubject = new BehaviorSubject({ isIntersecting: false });
+ readonly intersecting$ = this.#intersecting.asObservable();
private defaultObserverOptions: IIntersectionObserverInit = {
root: null,
@@ -24,23 +24,36 @@ export class IntersectionService implements OnDestroy {
threshold: 0.2
};
- createIntersectionObserver(hostElement: { nativeElement: Element; }, observerOptions = this.defaultObserverOptions) {
+ hostElementRefs: Map = new Map();
+
+ createIntersectionObserver(hostElement: ElementRef, observerOptions = this.defaultObserverOptions) {
- const options = { ...this.defaultObserverOptions, ...observerOptions };
+ if (isPlatformServer(this.platformId)) {
+ this.#intersecting.next({ isIntersecting: true, hostElement });
+ return;
+ }
- this.hostElement = hostElement;
+ const options: IIntersectionObserverInit = { ...this.defaultObserverOptions, ...observerOptions };
- const handleIntersect = (entries: any[], observer: any) => {
+ const handleIntersect = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
entries.forEach((entry: any) => {
- this.intersecting.next(entry.isIntersecting);
+ this.#intersecting.next({ isIntersecting: entry.isIntersecting, hostElement });
});
};
- this.intersectionObserver = new IntersectionObserver(handleIntersect, options);
- this.intersectionObserver.observe(hostElement.nativeElement);
+ this.hostElementRefs.set(hostElement, new IntersectionObserver(handleIntersect, options));
+ this.hostElementRefs.get(hostElement)?.observe(hostElement.nativeElement);
+ }
+
+ unobserve(elementRef: ElementRef) {
+ this.hostElementRefs.get(elementRef)?.unobserve(elementRef.nativeElement);
+ this.hostElementRefs.set(elementRef, null);
+ this.hostElementRefs.delete(elementRef);
}
ngOnDestroy(): void {
- this.intersectionObserver?.unobserve(this.hostElement?.nativeElement);
+ this.hostElementRefs.forEach((observer, elementRef) => {
+ observer?.unobserve(elementRef.nativeElement);
+ });
}
}
diff --git a/projects/coreui-angular/src/lib/services/listeners.service.spec.ts b/projects/coreui-angular/src/lib/services/listeners.service.spec.ts
index 097e5d05..653c7b62 100644
--- a/projects/coreui-angular/src/lib/services/listeners.service.spec.ts
+++ b/projects/coreui-angular/src/lib/services/listeners.service.spec.ts
@@ -1,22 +1,18 @@
-import { Renderer2 } from '@angular/core';
import { TestBed } from '@angular/core/testing';
-
+import { Renderer2 } from '@angular/core';
import { ListenersService } from './listeners.service';
describe('ListenersService', () => {
- let renderer: Renderer2;
- let service: ListenersService;
-
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [Renderer2, ListenersService],
- providers: [Renderer2]
+ providers: [Renderer2],
});
- service = new ListenersService(renderer);
- // service = TestBed.inject(ListenersService);
});
it('should be created', () => {
- expect(service).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const service = new ListenersService();
+ expect(service).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/services/listeners.service.ts b/projects/coreui-angular/src/lib/services/listeners.service.ts
index 1e7aa34c..abb95d06 100644
--- a/projects/coreui-angular/src/lib/services/listeners.service.ts
+++ b/projects/coreui-angular/src/lib/services/listeners.service.ts
@@ -1,54 +1,53 @@
-import { ElementRef, Injectable, Renderer2 } from '@angular/core';
+import { ElementRef, inject, Injectable, Renderer2 } from '@angular/core';
import { Triggers } from '../coreui.types';
export interface IListenersConfig {
- hostElement: ElementRef,
- trigger?: Triggers | Triggers[],
- callbackOn?: () => void,
- callbackOff?: () => void,
- callbackToggle?: () => void,
+ hostElement: ElementRef;
+ trigger?: Triggers | Triggers[];
+ callbackOn?: () => void;
+ callbackOff?: () => void;
+ callbackToggle?: () => void;
}
@Injectable()
export class ListenersService {
+ readonly renderer = inject(Renderer2);
private listeners: Map void> = new Map();
- constructor(
- private renderer: Renderer2
- ) {}
-
- setListeners({ hostElement, trigger, callbackOn, callbackOff, callbackToggle }: IListenersConfig): void {
+ setListeners({
+ hostElement,
+ trigger,
+ callbackOn,
+ callbackOff,
+ callbackToggle,
+ }: IListenersConfig): void {
const host = hostElement.nativeElement;
const triggers = Array.isArray(trigger) ? trigger : trigger?.split(' ') ?? [];
if (triggers?.includes('click')) {
- typeof callbackToggle === 'function' && this.listeners.set(
- 'click',
- this.renderer.listen(host, 'click', callbackToggle)
- );
+ typeof callbackToggle === 'function' &&
+ this.listeners.set('click', this.renderer.listen(host, 'click', callbackToggle));
}
if (triggers?.includes('focus')) {
- typeof callbackOn === 'function' && this.listeners.set(
- 'focus',
- this.renderer.listen(host, 'focus', callbackOn)
- );
+ typeof callbackOn === 'function' &&
+ this.listeners.set('focus', this.renderer.listen(host, 'focus', callbackOn));
+ }
+ if (triggers?.includes('focusin')) {
+ typeof callbackOff === 'function' &&
+ this.listeners.set('focusout', this.renderer.listen(host, 'focusout', callbackOff));
+ typeof callbackOn === 'function' &&
+ this.listeners.set('focusin', this.renderer.listen(host, 'focusin', callbackOn));
}
if (triggers?.includes('click') || triggers?.includes('focus')) {
- typeof callbackOff === 'function' && this.listeners.set(
- 'blur',
- this.renderer.listen(host, 'blur', callbackOff)
- );
+ typeof callbackOff === 'function' &&
+ this.listeners.set('blur', this.renderer.listen(host, 'blur', callbackOff));
}
if (triggers?.includes('hover')) {
- typeof callbackOn === 'function' && this.listeners.set(
- 'mouseenter',
- this.renderer.listen(host, 'mouseenter', callbackOn)
- );
- typeof callbackOff === 'function' && this.listeners.set(
- 'mouseleave',
- this.renderer.listen(host, 'mouseleave', callbackOff)
- );
+ typeof callbackOn === 'function' &&
+ this.listeners.set('mouseenter', this.renderer.listen(host, 'mouseenter', callbackOn));
+ typeof callbackOff === 'function' &&
+ this.listeners.set('mouseleave', this.renderer.listen(host, 'mouseleave', callbackOff));
}
}
diff --git a/projects/coreui-angular/src/lib/services/local-storage.service.spec.ts b/projects/coreui-angular/src/lib/services/local-storage.service.spec.ts
new file mode 100644
index 00000000..ba1dbd43
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/local-storage.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LocalStorageService } from './local-storage.service';
+
+describe('LocalStorageService', () => {
+ let service: LocalStorageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(LocalStorageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/local-storage.service.ts b/projects/coreui-angular/src/lib/services/local-storage.service.ts
new file mode 100644
index 00000000..75531a95
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/local-storage.service.ts
@@ -0,0 +1,44 @@
+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';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LocalStorageService {
+ private platformId = inject(PLATFORM_ID);
+ private document = inject(DOCUMENT);
+
+ constructor() {
+ this.#localStorage =
+ isPlatformBrowser(this.platformId) && this.document.defaultView
+ ? this.document.defaultView?.localStorage
+ : new InMemoryStorageService();
+ }
+
+ #localStorage: Storage;
+ readonly #data$ = new BehaviorSubject<{ key: string; data: any } | null>(null);
+ public readonly data$ = this.#data$.asObservable();
+
+ public setItem(key: string, data: any): void {
+ this.#localStorage.setItem(key, JSON.stringify(data));
+ this.#data$.next({ key, data });
+ }
+
+ public getItem(key: string): any {
+ const data = JSON.parse(this.#localStorage.getItem(key) || 'null');
+ this.#data$.next({ key, data });
+ return data;
+ }
+
+ public removeItem(key: string): void {
+ this.#localStorage.removeItem(key);
+ this.#data$.next({ key, data: null });
+ }
+
+ public clear() {
+ this.#localStorage.clear();
+ this.#data$.next(null);
+ }
+}
diff --git a/projects/coreui-angular/src/lib/services/public_api.ts b/projects/coreui-angular/src/lib/services/public_api.ts
index 6ef462e5..3d3a0ac3 100644
--- a/projects/coreui-angular/src/lib/services/public_api.ts
+++ b/projects/coreui-angular/src/lib/services/public_api.ts
@@ -1,3 +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, 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.spec.ts b/projects/coreui-angular/src/lib/services/rtl.service.spec.ts
new file mode 100644
index 00000000..1274c3ea
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/rtl.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RtlService } from './rtl.service';
+
+describe('RtlService', () => {
+ let service: RtlService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(RtlService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/rtl.service.ts b/projects/coreui-angular/src/lib/services/rtl.service.ts
new file mode 100644
index 00000000..e9380b1e
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/rtl.service.ts
@@ -0,0 +1,19 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RtlService {
+ readonly #document = inject(DOCUMENT);
+
+ isRTL(element?: HTMLElement | null): boolean {
+ if (element) {
+ return (
+ element.closest('[dir="rtl"]') !== null ||
+ this.#document.defaultView?.getComputedStyle(element).direction === 'rtl'
+ );
+ }
+
+ return [this.#document?.documentElement?.dir, this.#document?.body?.dir].includes('rtl');
+ }
+}
diff --git a/projects/coreui-angular/src/lib/services/script-injector.service.spec.ts b/projects/coreui-angular/src/lib/services/script-injector.service.spec.ts
new file mode 100644
index 00000000..9d02052a
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/script-injector.service.spec.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { Renderer2 } from '@angular/core';
+
+import { ScriptInjectorService } from './script-injector.service';
+
+describe('ScriptInjectorService', () => {
+ let service: ScriptInjectorService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [Renderer2]
+ });
+ service = TestBed.inject(ScriptInjectorService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/script-injector.service.ts b/projects/coreui-angular/src/lib/services/script-injector.service.ts
new file mode 100644
index 00000000..cd6e431e
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/script-injector.service.ts
@@ -0,0 +1,65 @@
+import { DOCUMENT, inject, Injectable, Renderer2 } from '@angular/core';
+
+export type ReferrerPolicy =
+ | ''
+ | 'no-referrer'
+ | 'no-referrer-when-downgrade'
+ | 'origin'
+ | 'origin-when-cross-origin'
+ | 'same-origin'
+ | 'strict-origin'
+ | 'strict-origin-when-cross-origin'
+ | 'unsafe-url';
+
+export interface IScriptAttributes {
+ async?: boolean;
+ blocking?: 'render';
+ crossorigin?: 'anonymous' | 'use-credentials';
+ defer?: boolean;
+ fetchpriority?: 'auto' | 'high' | 'low';
+ importmap?: string;
+ integrity?: string;
+ nomodule?: boolean;
+ nonce?: string;
+ referrerpolicy?: ReferrerPolicy;
+ src: string;
+ type?: string;
+}
+
+export interface IScriptConfig {
+ attributes?: IScriptAttributes;
+ loaded?: boolean;
+ elementName?: string;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ScriptInjectorService {
+ document: Document = inject(DOCUMENT);
+ renderer: Renderer2 = inject(Renderer2);
+
+ #scriptStore = new Map();
+
+ public injectScript(src: string, scriptConfig: IScriptConfig = { elementName: 'head' }) {
+ if (this.#scriptStore.has(src) && this.#scriptStore.get(src)?.loaded) {
+ return;
+ }
+ const scriptAttributes: IScriptAttributes = { ...scriptConfig?.attributes, src };
+ this.loadScript(src, (scriptConfig = { ...scriptConfig, attributes: scriptAttributes })).then();
+ }
+
+ loadScript(src: string, scriptConfig: IScriptConfig) {
+ return new Promise((resolve, reject) => {
+ const scriptElement = this.renderer.createElement('script');
+ this.renderer.setAttribute(scriptElement, 'type', 'text/javascript');
+ this.renderer.setAttribute(scriptElement, 'src', src);
+ scriptElement.onload = () => {
+ this.#scriptStore.set(src, { ...scriptConfig, loaded: true });
+ resolve({ src: src, loaded: true });
+ };
+ scriptElement.onerror = (error: any) => reject({ src: src, loaded: false, error });
+ this.renderer.appendChild(this.document.querySelector(scriptConfig.elementName ?? 'head'), scriptElement);
+ });
+ }
+}
diff --git a/projects/coreui-angular/src/lib/services/uid.service.spec.ts b/projects/coreui-angular/src/lib/services/uid.service.spec.ts
new file mode 100644
index 00000000..8ea8d4dc
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/uid.service.spec.ts
@@ -0,0 +1,22 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UIDService } from './uid.service';
+
+describe('UIDService', () => {
+ let service: UIDService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(UIDService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should return an UID string', () => {
+ expect(typeof service.getUID('test')).toBe('string');
+ expect(service.getUID('test')).toContain('test-');
+ expect(service.getUID()).toContain('random-id-');
+ });
+});
diff --git a/projects/coreui-angular/src/lib/services/uid.service.ts b/projects/coreui-angular/src/lib/services/uid.service.ts
new file mode 100644
index 00000000..d168430d
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/uid.service.ts
@@ -0,0 +1,17 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class UIDService {
+ readonly #document = inject(DOCUMENT);
+
+ getUID(prefix: string = 'random-id'): string {
+ let uid = prefix;
+ do {
+ uid = `${prefix}-${Math.floor(Math.random() * 1000000).toString(10)}`;
+ } while (this.#document.getElementById(uid));
+
+ return uid;
+ }
+}
diff --git a/projects/coreui-angular/src/lib/shared/element-ref.directive.spec.ts b/projects/coreui-angular/src/lib/shared/element-ref.directive.spec.ts
new file mode 100644
index 00000000..2360e527
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/element-ref.directive.spec.ts
@@ -0,0 +1,26 @@
+import { ElementRefDirective } from './element-ref.directive';
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+class MockElementRef extends ElementRef {}
+
+describe('ElementRefDirective', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [{ provide: ElementRef, useClass: MockElementRef }]
+ });
+ });
+ it('should create an instance', () => {
+ TestBed.runInInjectionContext(() => {
+ const directive = new ElementRefDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should expose elementRef', () => {
+ TestBed.runInInjectionContext(() => {
+ const directive = new ElementRefDirective();
+ expect(directive.elementRef).toBeInstanceOf(ElementRef);
+ });
+ });
+});
diff --git a/projects/coreui-angular/src/lib/shared/element-ref.directive.ts b/projects/coreui-angular/src/lib/shared/element-ref.directive.ts
new file mode 100644
index 00000000..c1fcee32
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/element-ref.directive.ts
@@ -0,0 +1,9 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+
+@Directive({
+ selector: '[cElementRef]',
+ exportAs: 'cElementRef'
+})
+export class ElementRefDirective {
+ public readonly elementRef = inject(ElementRef);
+}
diff --git a/projects/coreui-angular/src/lib/shared/html-attr.directive.spec.ts b/projects/coreui-angular/src/lib/shared/html-attr.directive.spec.ts
index c4757409..5ba9ca78 100644
--- a/projects/coreui-angular/src/lib/shared/html-attr.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/shared/html-attr.directive.spec.ts
@@ -1,52 +1,50 @@
-import { Component, DebugElement, Renderer2, Type } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { HtmlAttributesDirective } from './html-attr.directive';
@Component({
- template: ``
+ template: ` `,
+ imports: [HtmlAttributesDirective]
})
class TestComponent {}
-describe('HtmlAttributesDirective', () => {
+class MockElementRef extends ElementRef {}
- let component: TestComponent;
+describe('HtmlAttributesDirective', () => {
let fixture: ComponentFixture;
- let inputEl: DebugElement;
- let renderer: Renderer2;
+ let debugElement: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestComponent],
- imports: [HtmlAttributesDirective]
+ imports: [HtmlAttributesDirective, TestComponent],
+ providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }]
});
fixture = TestBed.createComponent(TestComponent);
- component = fixture.componentInstance;
- inputEl = fixture.debugElement.query(By.css('div'));
- renderer = fixture.componentRef.injector.get(Renderer2 as Type);
+ debugElement = fixture.debugElement.query(By.css('div'));
});
it('should create an instance', () => {
- const directive = new HtmlAttributesDirective(renderer, inputEl);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new HtmlAttributesDirective();
+ expect(directive).toBeTruthy();
+ });
});
it('should render a class attr', () => {
fixture.detectChanges();
- // console.log(inputEl.nativeElement.classList);
- expect(inputEl.nativeElement.classList.contains('test')).toBeTruthy();
+ expect(debugElement.nativeElement).toHaveClass('test');
});
it('should render a style attr', () => {
fixture.detectChanges();
// console.log(inputEl.nativeElement.style.backgroundColor);
- expect(inputEl.nativeElement.style.backgroundColor).toBe('red');
+ expect(debugElement.nativeElement.style.backgroundColor).toBe('red');
});
it('should render an id attr', () => {
fixture.detectChanges();
- // console.log(inputEl.nativeElement.attributes);
- expect(inputEl.nativeElement.getAttribute('id')).toBe('id-1');
+ expect(debugElement.nativeElement.getAttribute('id')).toBe('id-1');
});
});
diff --git a/projects/coreui-angular/src/lib/shared/html-attr.directive.ts b/projects/coreui-angular/src/lib/shared/html-attr.directive.ts
index e5b11bad..28141a9f 100644
--- a/projects/coreui-angular/src/lib/shared/html-attr.directive.ts
+++ b/projects/coreui-angular/src/lib/shared/html-attr.directive.ts
@@ -1,23 +1,19 @@
-import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
@Directive({
selector: '[cHtmlAttr]',
- exportAs: 'cHtmlAttr',
- standalone: true
+ exportAs: 'cHtmlAttr'
})
-export class HtmlAttributesDirective implements OnInit {
+export class HtmlAttributesDirective {
+ readonly cHtmlAttr = input>();
- @Input() cHtmlAttr?: { [key: string]: any };
+ readonly #renderer = inject(Renderer2);
+ readonly #elementRef = inject(ElementRef);
- constructor(
- private renderer: Renderer2,
- private el: ElementRef
- ) {}
-
- ngOnInit(): void {
- const attribs = this.cHtmlAttr;
+ readonly #attrEffect = effect(() => {
+ const attribs = this.cHtmlAttr();
for (const attr in attribs) {
- if (attr === 'style' && typeof (attribs[attr]) === 'object') {
+ if (attr === 'style' && typeof attribs[attr] === 'object') {
this.setStyle(attribs[attr]);
} else if (attr === 'class') {
this.addClass(attribs[attr]);
@@ -25,26 +21,28 @@ export class HtmlAttributesDirective implements OnInit {
this.setAttrib(attr, attribs[attr]);
}
}
- }
+ });
- private setStyle(styles: { [x: string]: any; }): void {
+ private setStyle(styles: Record): void {
for (const style in styles) {
if (style) {
- this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
+ this.#renderer.setStyle(this.#elementRef.nativeElement, style, styles[style]);
}
}
}
private addClass(classes: string | string[]): void {
- const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
- classArray.filter((element) => element.length > 0).forEach(element => {
- this.renderer.addClass(this.el.nativeElement, element);
- });
+ const classArray = Array.isArray(classes) ? classes : classes.split(' ');
+ classArray
+ .filter((element) => element.length > 0)
+ .forEach((element) => {
+ this.#renderer.addClass(this.#elementRef.nativeElement, element);
+ });
}
private setAttrib(key: string, value: string | null): void {
- value !== null ?
- this.renderer.setAttribute(this.el.nativeElement, key, value) :
- this.renderer.removeAttribute(this.el.nativeElement, key);
+ value !== null
+ ? this.#renderer.setAttribute(this.#elementRef.nativeElement, key, value)
+ : this.#renderer.removeAttribute(this.#elementRef.nativeElement, key);
}
}
diff --git a/projects/coreui-angular/src/lib/shared/public_api.ts b/projects/coreui-angular/src/lib/shared/public_api.ts
index a2450d0e..9fe03e59 100644
--- a/projects/coreui-angular/src/lib/shared/public_api.ts
+++ b/projects/coreui-angular/src/lib/shared/public_api.ts
@@ -1,3 +1,5 @@
-export { SharedModule } from './shared.module';
+export { ElementRefDirective } from './element-ref.directive';
export { HtmlAttributesDirective } from './html-attr.directive';
export { TemplateIdDirective } from './template-id.directive';
+export { ThemeDirective } from './theme.directive';
+export { SharedModule } from './shared.module';
diff --git a/projects/coreui-angular/src/lib/shared/shared.module.ts b/projects/coreui-angular/src/lib/shared/shared.module.ts
index f9616e59..cb545ddf 100644
--- a/projects/coreui-angular/src/lib/shared/shared.module.ts
+++ b/projects/coreui-angular/src/lib/shared/shared.module.ts
@@ -1,23 +1,18 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ElementRefDirective } from './element-ref.directive';
import { HtmlAttributesDirective } from './html-attr.directive';
import { TemplateIdDirective } from './template-id.directive';
+import { ThemeDirective } from './theme.directive';
@NgModule({
- imports: [
- HtmlAttributesDirective,
- TemplateIdDirective
- ],
- exports: [
- HtmlAttributesDirective,
- TemplateIdDirective
- ],
+ imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
+ exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
})
export class SharedModule {
-
static forRoot(): ModuleWithProviders {
return {
- ngModule: SharedModule
+ ngModule: SharedModule,
};
}
}
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
new file mode 100644
index 00000000..34b71231
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
@@ -0,0 +1,59 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, computed, DebugElement, TemplateRef, viewChild } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TemplateIdDirective } from './template-id.directive';
+
+@Component({
+ imports: [TemplateIdDirective, NgTemplateOutlet],
+ template: `
+ Inner Text
+
+
+
+ `
+})
+class TestComponent {
+ readonly templateId = viewChild(TemplateIdDirective);
+
+ readonly id = computed(() => this.templateId()?.templateRef ?? null);
+}
+
+describe('TemplateIdDirective', () => {
+ let fixture: ComponentFixture;
+ let component: TestComponent;
+ let debugElement: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ debugElement = fixture.debugElement.query(By.css('.test'));
+ component = fixture.componentInstance;
+
+ fixture.detectChanges();
+ });
+
+ it('should create a template with innerText', () => {
+ expect(debugElement.nativeElement.innerText).toBe('Inner Text');
+ });
+
+ 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(secondComponent.templateId()?.id).toBe('test');
+ });
+});
diff --git a/projects/coreui-angular/src/lib/shared/template-id.directive.ts b/projects/coreui-angular/src/lib/shared/template-id.directive.ts
index 7fdf82aa..45fc8f74 100644
--- a/projects/coreui-angular/src/lib/shared/template-id.directive.ts
+++ b/projects/coreui-angular/src/lib/shared/template-id.directive.ts
@@ -1,13 +1,13 @@
-import { Directive, Input, TemplateRef } from '@angular/core';
+import { Directive, inject, input, TemplateRef } from '@angular/core';
@Directive({
- selector: '[cTemplateId]',
- standalone: true
+ selector: '[cTemplateId]'
})
export class TemplateIdDirective {
- @Input('cTemplateId') id!: string;
+ readonly templateRef = inject(TemplateRef);
+ readonly cTemplateId = input.required();
- constructor(
- public templateRef: TemplateRef
- ) { }
+ get id() {
+ return this.cTemplateId();
+ }
}
diff --git a/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts b/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts
new file mode 100644
index 00000000..41a8f1e0
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/theme.directive.spec.ts
@@ -0,0 +1,49 @@
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ThemeDirective } from './theme.directive';
+import { By } from '@angular/platform-browser';
+
+@Component({
+ imports: [ThemeDirective],
+ template: ''
+})
+export class TestComponent {
+ theme!: 'dark' | 'light' | undefined;
+}
+
+class MockElementRef extends ElementRef {}
+
+describe('ThemeDirective', () => {
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent],
+ providers: [{ provide: ElementRef, useClass: MockElementRef }, Renderer2]
+ });
+ fixture = TestBed.createComponent(TestComponent);
+ debugElement = fixture.debugElement.query(By.css('div'));
+ });
+
+ it('should create an instance', () => {
+ TestBed.runInInjectionContext(() => {
+ const directive = new ThemeDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should set data-coreui-theme attribute', () => {
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
+ fixture.componentInstance.theme = 'dark';
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('dark');
+ fixture.componentInstance.theme = 'light';
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('light');
+ fixture.componentInstance.theme = undefined;
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
+ });
+});
diff --git a/projects/coreui-angular/src/lib/shared/theme.directive.ts b/projects/coreui-angular/src/lib/shared/theme.directive.ts
new file mode 100644
index 00000000..d3cc3a3e
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/theme.directive.ts
@@ -0,0 +1,38 @@
+import { booleanAttribute, Directive, effect, ElementRef, inject, input, Renderer2, untracked } from '@angular/core';
+
+@Directive({
+ selector: '[cTheme]',
+ exportAs: 'cTheme'
+})
+export class ThemeDirective {
+ readonly #hostElement = inject(ElementRef);
+ readonly #renderer = inject(Renderer2);
+
+ /**
+ * Add dark theme attribute.
+ * @return 'dark' | 'light' | undefined
+ */
+ readonly colorScheme = input<'dark' | 'light'>();
+
+ readonly #colorSchemeChange = effect(() => {
+ const colorScheme = this.colorScheme();
+ colorScheme ? this.setTheme(colorScheme) : this.unsetTheme();
+ });
+
+ readonly dark = input(false, { transform: booleanAttribute });
+
+ readonly #darkChange = effect(() => {
+ const darkTheme = this.dark() || untracked(this.colorScheme) === 'dark';
+ darkTheme ? this.setTheme('dark') : this.unsetTheme();
+ });
+
+ setTheme(theme?: string): void {
+ if (theme) {
+ this.#renderer.setAttribute(this.#hostElement.nativeElement, 'data-coreui-theme', theme);
+ }
+ }
+
+ unsetTheme(): void {
+ this.#renderer.removeAttribute(this.#hostElement.nativeElement, 'data-coreui-theme');
+ }
+}
diff --git a/projects/coreui-angular/src/lib/sidebar/public_api.ts b/projects/coreui-angular/src/lib/sidebar/public_api.ts
index d7b2fca1..597aacc0 100644
--- a/projects/coreui-angular/src/lib/sidebar/public_api.ts
+++ b/projects/coreui-angular/src/lib/sidebar/public_api.ts
@@ -2,10 +2,10 @@ export { SidebarComponent } from './sidebar/sidebar.component';
export { SidebarService } from './sidebar.service';
export { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component';
export { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive';
-export { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
+export { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive';
export { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
export { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
-export { SidebarNavComponent, INavData } 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 afd561c4..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';
@@ -7,52 +6,47 @@ import { SidebarComponent } from '../sidebar/sidebar.component';
providedIn: 'root'
})
export class SidebarBackdropService {
+ readonly #document = inject(DOCUMENT);
+ readonly #sidebarService = inject(SidebarService);
- private backdrop!: HTMLElement;
+ #backdrop!: HTMLElement;
renderer!: Renderer2;
- private clickListener = (): void => {};
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- // private rendererFactory: RendererFactory2,
- private sidebarService: SidebarService
- ) {
- // this.renderer = rendererFactory.createRenderer(null, null);
- }
+ #clickListener = (): void => {
+ /* empty */
+ };
setBackdrop(sidebar: SidebarComponent): void {
- const backdrop = this.document.getElementsByClassName('sidebar-backdrop');
+ const backdrop = this.#document.getElementsByClassName('sidebar-backdrop');
// console.log(`sidebar-${this.id}`, ' setBackdrop', backdrop);
if (backdrop.length === 0) {
- this.backdrop = this.renderer.createElement('div');
- this.renderer.addClass(this.backdrop, 'sidebar-backdrop');
- this.renderer.appendChild(this.document.body, this.backdrop);
- this.clickListener = this.renderer.listen(this.backdrop, 'click', (e) => {
+ this.#backdrop = this.renderer.createElement('div');
+ this.renderer.addClass(this.#backdrop, 'sidebar-backdrop');
+ this.renderer.appendChild(this.#document.body, this.#backdrop);
+ this.#clickListener = this.renderer.listen(this.#backdrop, 'click', (e) => {
// console.log(`sidebar-${this.id}`, ' backdrop click', e);
- this.sidebarService.toggle({ toggle: 'visible', sidebar });
+ this.#sidebarService.toggle({ toggle: 'visible', sidebar });
});
}
// console.log(this.backdrop, sidebar.sidebarState.mobile, sidebar.sidebarState.show);
- if (this.backdrop && sidebar.sidebarState.mobile && sidebar.sidebarState.visible) {
- this.renderer.addClass(this.backdrop, 'fade');
- this.renderer.addClass(this.backdrop, 'show');
+ if (this.#backdrop && sidebar.sidebarState.mobile && sidebar.sidebarState.visible) {
+ this.renderer.addClass(this.#backdrop, 'fade');
+ this.renderer.addClass(this.#backdrop, 'show');
// this.renderer.removeClass(this.backdrop, 'd-none');
} else {
- this.renderer.removeClass(this.backdrop, 'show');
- this.renderer.removeClass(this.backdrop, 'fade');
+ this.renderer.removeClass(this.#backdrop, 'show');
+ this.renderer.removeClass(this.#backdrop, 'fade');
// this.renderer.addClass(this.backdrop, 'd-none');
}
}
clearBackdrop(): void {
- if (this.backdrop) {
+ if (this.#backdrop) {
// clear backdrop click Listener
- this.clickListener();
+ this.#clickListener();
// this.renderer.listen(this.backdrop, 'click', (e): void => {} );
- this.renderer.removeChild(this.document.body, this.backdrop);
+ this.renderer.removeChild(this.#document.body, this.#backdrop);
// @ts-ignore
- this.backdrop = undefined;
+ this.#backdrop = undefined;
}
}
-
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
index 80241f0f..0a0b9008 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html
@@ -1,13 +1,12 @@
-
-
- ![]()
- ![]()
+@if (brandImg()) {
+
+ @if (brandFull()) {
+ ![]()
+ }
+ @if (brandNarrow()) {
+ ![]()
+ }
-
-
-
-
+} @else {
+
+}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.spec.ts
index 4457a738..005845ae 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.spec.ts
@@ -1,6 +1,5 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
import { SidebarBrandComponent } from './sidebar-brand.component';
import { HtmlAttributesDirective } from '../../shared';
@@ -13,10 +12,10 @@ describe('SidebarBrandComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
- RouterTestingModule.withRoutes([]),
HtmlAttributesDirective,
SidebarBrandComponent
- ]
+ ],
+ providers: [provideRouter([])]
})
.compileComponents();
}));
@@ -31,4 +30,8 @@ describe('SidebarBrandComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('sidebar-brand');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
index 711d5915..2d6b061b 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts
@@ -1,26 +1,20 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import { Component, computed, input } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { RouterLink, type UrlTree } from '@angular/router';
import { HtmlAttributesDirective } from '../../shared';
@Component({
selector: 'c-sidebar-brand',
templateUrl: './sidebar-brand.component.html',
- standalone: true,
- imports: [RouterLink, HtmlAttributesDirective, NgIf, NgClass]
+ imports: [RouterLink, HtmlAttributesDirective, NgClass],
+ host: { class: 'sidebar-brand' }
})
-export class SidebarBrandComponent implements OnInit {
+export class SidebarBrandComponent {
+ readonly brandFull = input();
+ readonly brandNarrow = input();
- @Input() brandFull?: any;
- @Input() brandNarrow?: any;
- @Input() routerLink?: any[] | string;
+ readonly routerLink = input();
- @HostBinding('class.sidebar-brand') sidebarBrandClass = true;
-
- brandImg = false;
-
- ngOnInit(): void {
- this.brandImg = Boolean(this.brandFull || this.brandNarrow);
- }
+ readonly brandImg = computed(() => Boolean(this.brandFull() || this.brandNarrow()));
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.spec.ts
index 17c508ec..5567e8f9 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.spec.ts
@@ -22,4 +22,8 @@ describe('SidebarFooterComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('sidebar-footer');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.ts
index 799ba4c8..25d6b5fa 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.ts
@@ -1,18 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-sidebar-footer',
- template: ``,
- standalone: true
+ template: '',
+ host: { class: 'sidebar-footer' }
})
-export class SidebarFooterComponent {
-
- constructor() { }
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'sidebar-footer': true
- };
- }
-}
+export class SidebarFooterComponent {}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.spec.ts
index 45953ca1..cf4aacc6 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.spec.ts
@@ -22,4 +22,8 @@ describe('SidebarHeaderComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('sidebar-header');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.ts
index 438cd9f6..6c4b2d8b 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.ts
@@ -1,16 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-sidebar-header',
- template: ``,
- standalone: true
+ template: '',
+ host: { class: 'sidebar-header' }
})
-export class SidebarHeaderComponent {
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'sidebar-header': true
- };
- }
-}
+export class SidebarHeaderComponent {}
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-badge.pipe.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-badge.pipe.ts
index d002eee8..4a57aad7 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-badge.pipe.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-badge.pipe.ts
@@ -1,11 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
- name: 'cSidebarNavBadge',
- standalone: true
+ name: 'cSidebarNavBadge'
})
export class SidebarNavBadgePipe implements PipeTransform {
-
transform(item: any, args?: any): any {
const badge = item.badge;
return {
@@ -17,5 +15,4 @@ export class SidebarNavBadgePipe implements PipeTransform {
[`${badge.class}`]: !!badge.class
};
}
-
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.spec.ts
index 3f4c3896..519bfc93 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.spec.ts
@@ -10,8 +10,7 @@ describe('SidebarNavDividerComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [SidebarNavDividerComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -21,7 +20,7 @@ describe('SidebarNavDividerComponent', () => {
item = {
divider: true
};
- component.item = item;
+ fixture.componentRef.setInput('item', item);
fixture.detectChanges();
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.ts
index fc0f925f..c43aea44 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.ts
@@ -1,12 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { INavData } from './sidebar-nav';
@Component({
selector: 'c-sidebar-nav-divider',
- template: ``,
- standalone: true
+ template: ``
})
export class SidebarNavDividerComponent {
-
- @Input() item: any;
-
+ readonly item = input();
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
index a415cdef..1967df91 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html
@@ -4,12 +4,15 @@
href>
{{ item.name }}
- {{ item.badge.text }}
+ @if (helper.hasBadge(item)) {
+ {{ item.badge.text }}
+ }
-
-
+
+ @if (item?.icon) {
+
+
+
+ }
+ @if (item?.iconComponent) {
-
-
+ }
+ @if (!item?.icon && !item?.iconComponent) {
+
+ }
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
index b82d608b..b6be615f 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.spec.ts
@@ -1,9 +1,7 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
import { SidebarNavGroupComponent } from './sidebar-nav.component';
-import { SidebarModule } from '../sidebar.module';
describe('SidebarNavGroupComponent', () => {
let component: SidebarNavGroupComponent;
@@ -14,11 +12,10 @@ describe('SidebarNavGroupComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
- RouterTestingModule.withRoutes([]),
NoopAnimationsModule,
SidebarNavGroupComponent
],
- declarations: []
+ providers: [provideRouter([])]
})
.compileComponents();
}));
@@ -57,4 +54,8 @@ describe('SidebarNavGroupComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('nav-group');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts
index ce6b237a..e1b3106a 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts
@@ -10,9 +10,6 @@ export interface ISidebarAction {
@Injectable()
export class SidebarNavGroupService {
-
- constructor() { }
-
private sidebarNavGroupState = new BehaviorSubject({});
sidebarNavGroupState$ = this.sidebarNavGroupState.asObservable();
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.ts
index e169d057..0fd96a44 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.ts
@@ -1,11 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
- name: 'cSidebarNavIcon',
- standalone: true
+ name: 'cSidebarNavIcon'
})
export class SidebarNavIconPipe implements PipeTransform {
-
transform(item: any, args?: any): any {
const icon = item.icon;
return {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.spec.ts
index 295bf035..69eb2fe3 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.spec.ts
@@ -1,11 +1,15 @@
import { SidebarNavItemClassPipe } from './sidebar-nav-item-class.pipe';
-import {SidebarNavHelper} from './sidebar-nav.service';
-import { INavData } from './sidebar-nav';
+import { TestBed } from '@angular/core/testing';
+import { SidebarNavHelper } from './sidebar-nav.service';
describe('SidebarNavItemClassPipe', () => {
it('create an instance', () => {
- const helper = new SidebarNavHelper();
- const pipe = new SidebarNavItemClassPipe(helper);
- expect(pipe).toBeTruthy();
+ TestBed.configureTestingModule({
+ providers: [SidebarNavHelper]
+ });
+ TestBed.runInInjectionContext(() => {
+ const pipe = new SidebarNavItemClassPipe();
+ expect(pipe).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.ts
index 1bad16c1..5de1ed20 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.ts
@@ -1,29 +1,25 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
-import {SidebarNavHelper} from './sidebar-nav.service';
+import { SidebarNavHelper } from './sidebar-nav.service';
@Pipe({
- name: 'cSidebarNavItemClass',
- standalone: true
+ name: 'cSidebarNavItemClass'
})
export class SidebarNavItemClassPipe implements PipeTransform {
-
- constructor(
- public helper: SidebarNavHelper
- ) {}
+ readonly helper = inject(SidebarNavHelper);
// transform(item: any, ...args: any[]): any {
transform(item: any, args?: any[]): any {
- const itemType = this.helper.itemType(item);
- let itemClass;
- if (['divider', 'title'].includes(itemType)) {
- itemClass = `nav-${itemType}`;
- } else if (itemType === 'group') {
- // itemClass = 'c-sidebar-nav-group' ;
- itemClass = '' ;
- } else {
- itemClass = 'nav-item';
- }
- return item.class ? `${itemClass} ${item.class}` : itemClass;
+ const itemType = this.helper.itemType(item);
+ let itemClass;
+ if (['divider', 'title'].includes(itemType)) {
+ itemClass = `nav-${itemType}`;
+ } else if (itemType === 'group') {
+ // itemClass = 'c-sidebar-nav-group' ;
+ itemClass = '';
+ } else {
+ itemClass = 'nav-item';
}
+ return item.class ? `${itemClass} ${item.class}` : itemClass;
+ }
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
index 44266100..6cd272be 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
@@ -1,7 +1,12 @@
-
-
- {{ item.name }}
- {{ item.badge.text }}
+@let labelItem = item();
+
+ @if (helper.hasIcon(labelItem)) {
+
+ }
+ {{ labelItem.name }}
+ @if (helper.hasBadge(labelItem)) {
+ {{ labelItem.badge?.text ?? '' }}
+ }
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.spec.ts
index ae5954bb..86f8d0e8 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.spec.ts
@@ -1,8 +1,8 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
import { SidebarNavHelper } from './sidebar-nav.service';
-// import {LayoutModule} from '../../shared/layout/index.ts_';
describe('SidebarNavLabelComponent', () => {
let component: SidebarNavLabelComponent;
@@ -13,8 +13,7 @@ describe('SidebarNavLabelComponent', () => {
TestBed.configureTestingModule({
providers: [SidebarNavHelper],
imports: [SidebarNavLabelComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -22,10 +21,17 @@ describe('SidebarNavLabelComponent', () => {
component = fixture.componentInstance;
item = {
+ name: 'Label Item',
class: '',
- variant: 'info'
+ variant: 'info',
+ icon: 'c-icon',
+ label: {
+ variant: 'info',
+ class: ''
+ },
+ badge: {}
};
- component.item = item;
+ fixture.componentRef.setInput('item', item);
fixture.detectChanges();
});
@@ -33,4 +39,31 @@ describe('SidebarNavLabelComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should set correct itemClass', () => {
+ const link = fixture.debugElement.query(By.css('a')).nativeElement;
+
+ expect(link).toHaveClass('c-nav-label');
+ expect(link).toHaveClass('c-active');
+ item.class = 'custom-class';
+ fixture.componentRef.setInput('item', { ...item });
+ fixture.detectChanges();
+ expect(link).toHaveClass('custom-class');
+ });
+
+ it('should display label name', () => {
+ const label = fixture.debugElement.query(By.css('a')).nativeElement;
+ expect(label.textContent).toBe(item.name);
+ expect(label.textContent).toBe('Label Item');
+ });
+
+ it('should set correct labelIconClass', () => {
+ const icon = fixture.debugElement.query(By.css('i')).nativeElement;
+ expect(icon).toHaveClass('text-info');
+ item.label = { variant: 'success', class: 'custom-icon-class' };
+ fixture.componentRef.setInput('item', { ...item });
+ fixture.detectChanges();
+ expect(icon).toHaveClass('text-success');
+ expect(icon).toHaveClass('custom-icon-class');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
index a1b7b238..17f4b9a1 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts
@@ -1,48 +1,40 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { NgClass, NgIf } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { NgClass } from '@angular/common';
import { HtmlAttributesDirective } from '../../shared';
import { SidebarNavHelper } from './sidebar-nav.service';
import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
+import { INavData } from './sidebar-nav';
@Component({
selector: 'c-sidebar-nav-label',
templateUrl: './sidebar-nav-label.component.html',
- standalone: true,
- imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass, NgIf]
+ imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
})
-export class SidebarNavLabelComponent implements OnInit {
-
- constructor(
- public helper: SidebarNavHelper
- ) { }
-
- @Input() item: any;
-
- private classes = {
- 'c-nav-label': true,
- 'c-active': true
- };
- private iconClasses = {};
-
- ngOnInit() {
- this.iconClasses = this.helper.getIconClass(this.item);
- }
-
- getItemClass() {
- const itemClass = this.item.class;
- // @ts-ignore
- this.classes[itemClass] = !!itemClass;
- return this.classes;
- }
-
- getLabelIconClass() {
- const variant = `text-${this.item.label.variant}`;
- // @ts-ignore
- this.iconClasses[variant] = !!this.item.label.variant;
- const labelClass = this.item.label.class;
- // @ts-ignore
- this.iconClasses[labelClass] = !!labelClass;
- return this.iconClasses;
- }
+export class SidebarNavLabelComponent {
+ readonly helper = inject(SidebarNavHelper);
+
+ readonly item = input({});
+
+ readonly itemClass = computed(() => {
+ const classes: Record = {
+ 'c-nav-label': true,
+ 'c-active': true
+ };
+ const itemClass = this.item().class;
+ if (itemClass) {
+ classes[itemClass] = !!itemClass;
+ }
+ return classes;
+ });
+
+ readonly labelIconClass = computed(() => {
+ const item = this.item();
+ const iconClasses: Record = this.helper.getIconClass(item);
+ const variant = `text-${item.label?.variant}`;
+ iconClasses[variant] = !!item.label?.variant;
+ const labelClass = item.label?.class ?? '';
+ iconClasses[labelClass] = !!labelClass;
+ return iconClasses;
+ });
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
index fadc7999..1b864573 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html
@@ -1,53 +1,64 @@
-
-
-
-
- {{ item.badge?.text }}
-
-
-
-
- {{ item.badge?.text }}
-
-
-
-
-
- {{ item.badge?.text }}
-
-
+@let linkItem = item() ?? {};
+@switch (linkType) {
+ @case ('disabled') {
+
+
+
+ @if (linkItem.badge) {
+ {{ linkItem.badge?.text }}
+ }
+
+ }
+ @case ('external') {
+
+
+
+ @if (linkItem.badge) {
+ {{ linkItem.badge?.text }}
+ }
+
+ }
+ @default {
+
+
+
+
+ @if (linkItem.badge) {
+ {{ linkItem.badge?.text }}
+ }
+
+ }
+}
-
-
+
+ @if (item?.icon) {
+
+
+
+ }
+ @if (item?.iconComponent) {
-
-
+ }
+ @if (!item?.icon && !item?.iconComponent) {
+
+ }
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.spec.ts
index a1e66298..2bed3342 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.spec.ts
@@ -1,9 +1,9 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
import { SidebarNavLinkComponent } from './sidebar-nav-link.component';
import { HtmlAttributesDirective } from '../../shared';
+import { By } from '@angular/platform-browser';
describe('SidebarNavLinkComponent', () => {
let component: SidebarNavLinkComponent;
@@ -13,12 +13,9 @@ describe('SidebarNavLinkComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [RouterTestingModule.withRoutes([]),
- HtmlAttributesDirective,
- SidebarNavLinkComponent
- ]
- })
- .compileComponents();
+ imports: [HtmlAttributesDirective, SidebarNavLinkComponent],
+ providers: [provideRouter([])]
+ }).compileComponents();
}));
beforeEach(() => {
@@ -31,11 +28,11 @@ describe('SidebarNavLinkComponent', () => {
url: '/dashboard',
icon: 'cil-speedometer',
badge: {
- variant: 'info',
+ color: 'info',
text: 'NEW'
}
};
- component.item = item;
+ fixture.componentRef.setInput('item', item);
// router.initialNavigation();
fixture.detectChanges();
@@ -44,4 +41,25 @@ describe('SidebarNavLinkComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have item with name "Dashboard"', () => {
+ const link = fixture.debugElement.query(By.css('a')).nativeElement;
+ expect(link.textContent).toContain('Dashboard');
+ });
+
+ it('should have correct URL', () => {
+ const link = fixture.debugElement.query(By.css('a')).nativeElement;
+ expect(link.getAttribute('href')).toBe('/dashboard');
+ });
+
+ it('should have correct icon class', () => {
+ const icon = fixture.debugElement.query(By.css('.cil-speedometer')).nativeElement;
+ expect(icon).toBeTruthy();
+ });
+
+ it('should have badge with text "NEW"', () => {
+ const badge = fixture.debugElement.query(By.css('.badge')).nativeElement;
+ expect(badge.textContent).toContain('NEW');
+ expect(badge.classList).toContain('bg-info');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
index 4bacab78..afd96df8 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts
@@ -1,9 +1,11 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { CommonModule, NgIf } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Component, inject, input, OnDestroy, OnInit, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
+import { IconDirective } from '@coreui/icons-angular';
// import {SidebarService} from '../sidebar.service';
import { HtmlAttributesDirective } from '../../shared';
import { SidebarNavHelper } from './sidebar-nav.service';
@@ -11,92 +13,75 @@ import { INavData } from './sidebar-nav';
import { SidebarNavLinkPipe } from './sidebar-nav-link.pipe';
import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
-import { IconDirective } from '@coreui/icons-angular';
@Component({
selector: 'c-sidebar-nav-link-content',
template: `
-
- {{item?.name ?? ''}}
-
+ @let itemLinkContent = item();
+ @if (itemLinkContent) {
+ {{ itemLinkContent?.name ?? '' }}
+ }
`,
- providers: [SidebarNavHelper],
- standalone: true,
- imports: [NgIf]
+ providers: [SidebarNavHelper]
})
export class SidebarNavLinkContentComponent {
- @Input() item?: INavData;
+ readonly helper = inject(SidebarNavHelper);
- constructor(
- public helper: SidebarNavHelper
- ) { }
+ readonly item = input({});
}
@Component({
selector: 'c-sidebar-nav-link',
templateUrl: './sidebar-nav-link.component.html',
providers: [SidebarNavHelper],
- standalone: true,
imports: [
- CommonModule,
RouterModule,
HtmlAttributesDirective,
IconDirective,
SidebarNavLinkContentComponent,
SidebarNavLinkPipe,
SidebarNavBadgePipe,
- SidebarNavIconPipe
+ SidebarNavIconPipe,
+ NgTemplateOutlet,
+ NgClass
]
})
export class SidebarNavLinkComponent implements OnInit, OnDestroy {
+ readonly router = inject(Router);
- // tslint:disable-next-line:variable-name
- protected _item: INavData = {};
+ readonly item = input();
- @Input()
- set item(item: INavData) {
- this._item = JSON.parse(JSON.stringify(item));
- }
+ readonly linkClick = output();
- get item(): INavData {
- return this._item;
- }
+ public linkType!: string;
+ public href!: string;
+ public linkActive!: boolean;
+ private url!: string;
- @Output() linkClick = new EventEmitter();
+ private navigationEndObservable: Observable;
+ private navSubscription!: Subscription;
- // @ts-ignore
- public linkType: string;
- // @ts-ignore
- public href: string;
- // @ts-ignore
- public linkActive: boolean;
- // @ts-ignore
- private url: string;
+ constructor() {
+ const router = this.router;
- private navigationEndObservable: Observable;
- // @ts-ignore
- private navSubscription: Subscription;
-
- constructor(
- public router: Router
- // private renderer: Renderer2,
- // private hostElement: ElementRef,
- // private sidebarService: SidebarService
- ) {
this.navigationEndObservable = router.events.pipe(
- filter(event => {
+ filter((event) => {
return event instanceof NavigationEnd;
- })
+ }),
+ takeUntilDestroyed()
) as Observable;
}
ngOnInit(): void {
- // @ts-ignore
- this.url = typeof this.item.url === 'string' ? this.item.url : this.router.serializeUrl(this.router.createUrlTree(this.item.url));
+ const item = this.item() ?? {};
+ this.url =
+ typeof item.url === 'string'
+ ? item.url
+ : this.router.serializeUrl(this.router.createUrlTree((item.url as any[]) ?? ['']));
this.linkType = this.getLinkType();
- this.href = this.isDisabled() ? '' : (this.item.href || this.url);
+ this.href = this.isDisabled() ? '' : item.href || this.url;
this.linkActive = this.router.url.split(/[?#(;]/)[0] === this.href.split(/[?#(;]/)[0];
- this.navSubscription = this.navigationEndObservable.subscribe(event => {
+ this.navSubscription = this.navigationEndObservable.subscribe((event) => {
const itemUrlArray = this.href.split(/[?#(;]/)[0].split('/');
const urlArray = event.urlAfterRedirects.split(/[?#(;]/)[0].split('/');
this.linkActive = itemUrlArray.every((value, index) => value === urlArray[index]);
@@ -112,16 +97,17 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
}
public isDisabled(): boolean {
- return this.item?.attributes?.['disabled'];
+ return this.item()?.attributes?.['disabled'];
}
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';
+ const item = this.item() ?? {};
+ const linkPath = Array.isArray(item.url) ? item.url[0] : item.url;
+ return !!item.href || linkPath?.substring(0, 4) === 'http';
}
linkClicked(): void {
- this.linkClick.emit();
+ this.linkClick?.emit();
}
// public hideMobile() {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts
index d9213216..1aa5890b 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts
@@ -1,13 +1,10 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
- name: 'cSidebarNavLink',
- standalone: true
+ name: 'cSidebarNavLink'
})
export class SidebarNavLinkPipe implements PipeTransform {
-
transform(item: any): any {
-
const disabled = item?.attributes?.disabled;
return {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.spec.ts
index 987278ea..638a6f97 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.spec.ts
@@ -10,8 +10,7 @@ describe('SidebarNavTitleComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [SidebarNavTitleComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -22,7 +21,7 @@ describe('SidebarNavTitleComponent', () => {
title: true,
name: 'Theme'
};
- component.item = item;
+ fixture.componentRef.setInput('item', item);
fixture.detectChanges();
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.ts
index 44e59a2a..26f12a25 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-title.component.ts
@@ -1,41 +1,42 @@
-import {Component, ElementRef, Input, OnInit, Renderer2} from '@angular/core';
+import { Component, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
+import { INavData } from './sidebar-nav';
@Component({
selector: 'c-sidebar-nav-title',
- template: '',
- standalone: true
+ template: ''
})
-export class SidebarNavTitleComponent implements OnInit {
- @Input() item: any;
+export class SidebarNavTitleComponent {
+ readonly #elementRef = inject(ElementRef);
+ readonly #renderer = inject(Renderer2);
- constructor(
- private el: ElementRef,
- private renderer: Renderer2,
- ) {}
+ readonly item = input();
- ngOnInit(): void {
- const nativeElement: HTMLElement = this.el.nativeElement;
- const name = this.renderer.createText(this.item.name);
+ readonly #itemEffect = effect(() => {
+ const item = this.item();
+ if (item?.name) {
+ const nativeElement: HTMLElement = this.#elementRef.nativeElement;
+ const name = this.#renderer.createText(item.name);
- if ( this.item.class ) {
- const classes = this.item.class;
- this.renderer.addClass(nativeElement, classes);
- }
+ if (item?.class) {
+ const classes = item.class;
+ this.#renderer.addClass(nativeElement, classes);
+ }
- if ( this.item.wrapper ) {
- const wrapper = this.renderer.createElement(this.item.wrapper.element);
- this.addAttribs(this.item.wrapper.attributes, wrapper);
- this.renderer.appendChild(wrapper, name);
- this.renderer.appendChild(nativeElement, wrapper);
- } else {
- this.renderer.appendChild(nativeElement, name);
+ if (item?.wrapper) {
+ const wrapper = this.#renderer.createElement(item.wrapper.element);
+ this.addAttribs(item.wrapper.attributes, wrapper);
+ this.#renderer.appendChild(wrapper, name);
+ this.#renderer.appendChild(nativeElement, wrapper);
+ } else {
+ this.#renderer.appendChild(nativeElement, name);
+ }
}
- }
+ });
- private addAttribs(attribs: { [x: string]: any; }, element: any): void {
+ private addAttribs(attribs: { [x: string]: any }, element: HTMLElement): void {
if (attribs) {
for (const attr in attribs) {
- if (attr === 'style' && typeof(attribs[attr]) === 'object' ) {
+ if (attr === 'style' && typeof attribs[attr] === 'object') {
this.setStyle(attribs[attr], element);
} else if (attr === 'class') {
this.addClass(attribs[attr], element);
@@ -46,22 +47,24 @@ export class SidebarNavTitleComponent implements OnInit {
}
}
- private setStyle(styles: { [x: string]: any; }, el: any): void {
+ private setStyle(styles: { [x: string]: any }, el: any): void {
for (const style in styles) {
if (style) {
- this.renderer.setStyle(el, style, styles[style]);
+ this.#renderer.setStyle(el, style, styles[style]);
}
}
}
- private addClass(classes: string | Array, el: any): void {
- const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
- classArray.filter((element) => element.length > 0).forEach(element => {
- this.renderer.addClass(el, element );
- });
+ private addClass(classes: string | string[], el: any): void {
+ const classArray = Array.isArray(classes) ? classes : classes.split(' ');
+ classArray
+ .filter((element) => element.length > 0)
+ .forEach((element) => {
+ this.#renderer.addClass(el, element);
+ });
}
private setAttrib(key: string, value: string, el: any): void {
- this.renderer.setAttribute(el, key, value );
+ this.#renderer.setAttribute(el, key, value);
}
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
index 7295438c..c3976dc0 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html
@@ -1,42 +1,46 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+@for (item of navItemsArray; track item) {
+ @switch (helper.itemType(item)) {
+ @case ('group') {
+
+ }
+ @case ('divider') {
+
+ }
+ @case ('title') {
+
+ }
+ @case ('label') {
+
+ }
+ @case ('empty') {
+
+ }
+ @default {
+
+ }
+ }
+}
+
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.spec.ts
index a56acb24..95aeab19 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.spec.ts
@@ -1,6 +1,5 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
import { SidebarNavComponent } from './sidebar-nav.component';
import { SidebarNavHelper } from './sidebar-nav.service';
@@ -9,24 +8,18 @@ import { SidebarNavHelper } from './sidebar-nav.service';
describe('SidebarNavComponent', () => {
let component: SidebarNavComponent;
let fixture: ComponentFixture;
- let router: Router;
- let navItems: Array;
+ let navItems: any[];
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [
- RouterTestingModule.withRoutes([]),
- SidebarNavComponent
- ],
+ imports: [RouterTestingModule.withRoutes([]), SidebarNavComponent],
declarations: [],
providers: [SidebarNavHelper]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarNavComponent);
- router = TestBed.inject(Router);
component = fixture.componentInstance;
// mock items supplied by the parent component
@@ -50,4 +43,8 @@ describe('SidebarNavComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('sidebar-nav');
+ });
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
index 28fabd22..f8e96985 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts
@@ -1,24 +1,16 @@
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
- NgClass,
- NgForOf,
- NgIf,
- NgStyle,
- NgSwitch,
- NgSwitchCase,
- NgSwitchDefault,
- NgTemplateOutlet
-} from '@angular/common';
-import {
+ booleanAttribute,
Component,
ElementRef,
forwardRef,
HostBinding,
+ inject,
Input,
OnChanges,
OnDestroy,
OnInit,
- Optional,
Renderer2,
SimpleChanges,
ViewChild
@@ -47,12 +39,10 @@ import { IconDirective } from '@coreui/icons-angular';
templateUrl: './sidebar-nav-group.component.html',
styleUrls: ['./sidebar-nav-group.component.scss'],
providers: [SidebarNavHelper, SidebarNavGroupService],
- standalone: true,
imports: [
HtmlAttributesDirective,
IconDirective,
NgTemplateOutlet,
- NgIf,
NgClass,
SidebarNavIconPipe,
SidebarNavBadgePipe,
@@ -61,27 +51,32 @@ import { IconDirective } from '@coreui/icons-angular';
],
animations: [
trigger('openClose', [
- state('open', style({
- height: '*'
- })),
- state('closed', style({
- height: '0px'
- })),
- transition('open <=> closed', [
- animate('.15s ease')
- ])
+ state(
+ 'open',
+ style({
+ height: '*'
+ })
+ ),
+ state(
+ 'closed',
+ style({
+ height: '0px'
+ })
+ ),
+ transition('open <=> closed', [animate('.15s ease')])
])
]
})
export class SidebarNavGroupComponent implements OnInit, OnDestroy {
+ readonly #router = inject(Router);
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #sidebarNavGroupService = inject(SidebarNavGroupService);
+ public readonly helper = inject(SidebarNavHelper);
+
+ constructor() {
+ const router = this.#router;
- constructor(
- private router: Router,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- public helper: SidebarNavHelper,
- private sidebarNavGroupService: SidebarNavGroupService
- ) {
this.navigationEndObservable = router.events.pipe(
filter((event: any) => event instanceof NavigationEnd)
) as Observable;
@@ -90,6 +85,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
@Input() item: any;
@Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
@Input() show?: boolean;
+ @Input({ transform: booleanAttribute }) compact?: boolean;
@HostBinding('class')
get hostClasses(): any {
@@ -110,7 +106,6 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
public display: any = { display: 'block' };
ngOnInit(): void {
-
this.navItems = [...this.item.children];
this.navSubscription = this.navigationEndObservable.subscribe((event: NavigationEnd) => {
@@ -120,16 +115,16 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
}
});
- if (this.samePath(this.router.routerState.snapshot.url)) {
+ if (this.samePath(this.#router.routerState.snapshot.url)) {
this.openGroup(true);
}
- this.navGroupSubscription = this.sidebarNavGroupService.sidebarNavGroupState$.subscribe(next => {
+ this.navGroupSubscription = this.#sidebarNavGroupService.sidebarNavGroupState$.subscribe((next) => {
if (this.dropdownMode === 'close' && next.sidebarNavGroup && next.sidebarNavGroup !== this) {
if (next.sidebarNavGroup.item.url.startsWith(this.item.url)) {
return;
}
- if (this.samePath(this.router.routerState.snapshot.url)) {
+ if (this.samePath(this.#router.routerState.snapshot.url)) {
this.openGroup(true);
return;
}
@@ -156,7 +151,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
$event.preventDefault();
this.openGroup(!this.open);
if (this.open) {
- this.sidebarNavGroupService.toggle({ open: this.open, sidebarNavGroup: this });
+ this.#sidebarNavGroupService.toggle({ open: this.open, sidebarNavGroup: this });
}
}
@@ -166,75 +161,74 @@ 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;
+ });
+ }
+ });
}
}
@Component({
selector: 'c-sidebar-nav',
templateUrl: './sidebar-nav.component.html',
- standalone: true,
imports: [
- NgForOf,
NgClass,
- NgSwitch,
- NgSwitchCase,
- NgSwitchDefault,
HtmlAttributesDirective,
SidebarNavLinkComponent,
SidebarNavLabelComponent,
SidebarNavTitleComponent,
SidebarNavDividerComponent,
- SidebarNavGroupComponent,
+ forwardRef(() => SidebarNavGroupComponent),
SidebarNavItemClassPipe,
RouterModule
]
})
export class SidebarNavComponent implements OnChanges {
-
- constructor(
- @Optional() public sidebar: SidebarComponent,
- public helper: SidebarNavHelper,
- public router: Router,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private sidebarService: SidebarService
- ) { }
+ readonly sidebar = inject(SidebarComponent, { optional: true });
+ readonly helper = inject(SidebarNavHelper);
+ readonly router = inject(Router);
+ readonly #renderer = inject(Renderer2);
+ readonly #hostElement = inject(ElementRef);
+ readonly #sidebarService = inject(SidebarService);
@Input() navItems?: INavData[] = [];
@Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
- @Input() groupItems?: boolean;
- @Input() compact?: boolean;
+ @Input({ transform: booleanAttribute }) groupItems?: boolean;
+ @Input({ transform: booleanAttribute }) compact?: boolean;
@HostBinding('class')
get hostClasses(): any {
return {
'sidebar-nav': !this.groupItems,
- compact: !this.groupItems && !!this.compact
+ 'nav-group-items': this.groupItems,
+ compact: this.groupItems && this.compact
};
}
- @HostBinding('class.nav-group-items')
- get sidebarNavGroupItemsClass(): boolean {
- return !!this.groupItems;
- }
+ // @HostBinding('class.nav-group-items')
+ // get sidebarNavGroupItemsClass(): boolean {
+ // return !!this.groupItems;
+ // }
- @HostBinding('attr.role') role = 'nav';
+ @HostBinding('attr.role')
+ @Input()
+ role = 'navigation';
public navItemsArray: INavData[] = [];
@@ -245,7 +239,7 @@ export class SidebarNavComponent implements OnChanges {
public hideMobile(): void {
// todo: proper scrollIntoView() after NavigationEnd
if (this.sidebar && this.sidebar.sidebarState.mobile) {
- this.sidebarService.toggle({ toggle: 'visible', sidebar: this.sidebar });
+ this.#sidebarService.toggle({ toggle: 'visible', sidebar: this.sidebar });
}
}
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.spec.ts
index 823edc92..5330d76c 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.spec.ts
@@ -3,17 +3,16 @@ import { SidebarService } from '../sidebar.service';
import { SidebarToggleDirective } from './sidebar-toggle.directive';
describe('SidebarToggleDirective', () => {
-
beforeEach(async () => {
await TestBed.configureTestingModule({
providers: [SidebarService]
- })
- .compileComponents();
+ }).compileComponents();
});
it('should create an instance', () => {
- const service = new SidebarService();
- const directive = new SidebarToggleDirective(service);
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new SidebarToggleDirective();
+ expect(directive).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.ts
index 2019da2f..4e5d4548 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.ts
@@ -1,6 +1,6 @@
-import {Directive, HostListener, Input} from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
-import {SidebarService} from '../sidebar.service';
+import { SidebarService } from '../sidebar.service';
/**
* Allows the sidebar to be toggled/folded via click on host element.
@@ -8,30 +8,28 @@ import {SidebarService} from '../sidebar.service';
@Directive({
selector: '[cSidebarToggle]',
exportAs: 'cSidebarToggle',
- standalone: true
+ host: {
+ '(click)': 'toggleOpen($event)'
+ }
})
export class SidebarToggleDirective {
+ readonly #sidebarService = inject(SidebarService);
+
/**
- * Id of sidebar for toggle action. [docs]
- *
- * @type string
+ * Id of sidebar for toggle action.
+ * @return string
*/
- @Input('cSidebarToggle') id?: string;
+ readonly id = input(undefined, { alias: 'cSidebarToggle' });
/**
- * Sidebar property name for toggle action. [docs]
+ * Sidebar property name for toggle action.
*
- * @type 'visible' | 'unfoldable'
+ * @return 'visible' | 'unfoldable'
* @default 'visible'
*/
- @Input() toggle: 'visible' | 'unfoldable' = 'visible'
-
- constructor(
- private sidebarService: SidebarService
- ) {}
+ readonly toggle = input<'visible' | 'unfoldable'>('visible');
- @HostListener('click', ['$event'])
toggleOpen($event: any): void {
$event.preventDefault();
- this.sidebarService.toggle({ toggle: this.toggle, id: this.id });
+ this.#sidebarService.toggle({ toggle: this.toggle(), id: this.id() });
}
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts
deleted file mode 100644
index ef5da2c8..00000000
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
- selector: 'c-sidebar-toggler',
- template: ``,
- standalone: true
-})
-export class SidebarTogglerComponent {
-
- @HostBinding('attr.role')
- @Input() role = 'button';
-
- @HostBinding('class.sidebar-toggler') sidebarTogglerClass = true;
-
-}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.directive.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.directive.ts
new file mode 100644
index 00000000..89d5ec46
--- /dev/null
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.directive.ts
@@ -0,0 +1,23 @@
+import { Directive, input } from '@angular/core';
+import { SidebarToggleDirective } from '../sidebar-toggle/sidebar-toggle.directive';
+
+@Directive({
+ selector: '[cSidebarToggler]',
+ hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }],
+ host: {
+ '[attr.role]': 'role()',
+ class: 'sidebar-toggler',
+ '[style]': 'getStyles'
+ }
+})
+export class SidebarTogglerDirective {
+ readonly role = input('button');
+
+ get getStyles(): any {
+ return {
+ appearance: 'button',
+ 'align-items': 'flex-start',
+ cursor: 'pointer'
+ };
+ }
+}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts b/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts
index 1f88b8cf..1cf1d4d1 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts
@@ -4,7 +4,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
import { SidebarService } from './sidebar.service';
import { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component';
import { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive';
-import { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
+import { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive';
import { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
import { SidebarNavGroupService } from './sidebar-nav/sidebar-nav-group.service';
@@ -42,12 +42,12 @@ import {
SidebarNavLinkPipe,
SidebarNavTitleComponent,
SidebarToggleDirective,
- SidebarTogglerComponent
+ SidebarTogglerDirective
],
exports: [
SidebarComponent,
SidebarToggleDirective,
- SidebarTogglerComponent,
+ SidebarTogglerDirective,
SidebarBrandComponent,
SidebarNavComponent,
SidebarHeaderComponent,
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts b/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
index f0fdb9f4..c0b41019 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
-import {SidebarComponent} from './sidebar/sidebar.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
export interface ISidebarAction {
unfoldable?: boolean | 'toggle';
@@ -17,12 +17,9 @@ export interface ISidebarAction {
providedIn: 'root'
})
export class SidebarService {
-
private sidebarState = new BehaviorSubject({});
sidebarState$ = this.sidebarState.asObservable();
- constructor() {}
-
toggle(action: ISidebarAction): void {
this.sidebarState.next(action);
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.spec.ts
index 891f26db..63281cee 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.spec.ts
@@ -22,4 +22,8 @@ describe('SidebarComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('sidebar-fixed');
+ });
});
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 12546d30..7edb74ec 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.ts
@@ -1,18 +1,20 @@
import {
+ booleanAttribute,
Component,
- EventEmitter,
- HostBinding,
- Inject,
- Input,
+ computed,
+ DOCUMENT,
+ effect,
+ inject,
+ input,
+ linkedSignal,
OnChanges,
OnDestroy,
OnInit,
- Output,
+ output,
Renderer2,
- SimpleChanges,
+ signal,
+ SimpleChanges
} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
@@ -22,186 +24,186 @@ import { SidebarBackdropService } from '../sidebar-backdrop/sidebar-backdrop.ser
@Component({
selector: 'c-sidebar',
exportAs: 'cSidebar',
- template: '',
- standalone: true
+ template: '',
+ host: {
+ class: 'sidebar',
+ '[class]': 'hostClasses()',
+ '[attr.inert]': '!this.sidebarState.visible || null'
+ }
})
export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
- static ngAcceptInputType_narrow: BooleanInput;
- static ngAcceptInputType_overlaid: BooleanInput;
- static ngAcceptInputType_unfoldable: BooleanInput;
- static ngAcceptInputType_visible: BooleanInput;
-
- #narrow = false;
- #overlaid = false;
- #unfoldable = false;
- #visible = false;
+ readonly #document = inject(DOCUMENT);
+ readonly #renderer = inject(Renderer2);
+ readonly #breakpointObserver = inject(BreakpointObserver);
+ readonly #sidebarService = inject(SidebarService);
+ readonly #backdropService = inject(SidebarBackdropService);
+
#onMobile = false;
#layoutChangeSubscription!: Subscription;
#stateToggleSubscription!: Subscription;
- state: ISidebarAction = {
- sidebar: this,
- };
+ readonly state = signal
