-
+
+
diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.scss b/projects/coreui-angular/src/lib/modal/modal/modal.component.scss
deleted file mode 100644
index e69de29b..00000000
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 58092e14..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
@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ModalComponent } from './modal.component';
-import { ModalModule } from '../modal.module';
describe('ModalComponent', () => {
let component: ModalComponent;
@@ -10,10 +9,8 @@ describe('ModalComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [ NoopAnimationsModule, ModalModule ],
- declarations: [ ModalComponent ],
- })
- .compileComponents();
+ imports: [NoopAnimationsModule, ModalComponent]
+ }).compileComponents();
});
beforeEach(() => {
@@ -25,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 48f1de66..6a6811eb 100644
--- a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
+++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
@@ -1,25 +1,31 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
import {
+ AfterViewInit,
+ booleanAttribute,
Component,
+ computed,
+ DestroyRef,
+ 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 { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { ModalService } from '../modal.service';
import { BackdropService } from '../../backdrop/backdrop.service';
import { ModalContentComponent } from '../modal-content/modal-content.component';
+import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component';
@Component({
selector: 'c-modal',
@@ -37,221 +43,259 @@ import { ModalContentComponent } from '../modal-content/modal-content.component'
// display: 'none'
})
),
- transition('visible <=> *', [animate('300ms')])
+ transition('visible <=> *', [animate('150ms')])
])
],
templateUrl: './modal.component.html',
- styleUrls: ['./modal.component.scss'],
- exportAs: 'cModal'
+ exportAs: 'cModal',
+ 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);
- private get scrollbarWidth() {
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
- const documentWidth = this.document.documentElement.clientWidth;
- const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
- return `${scrollbarWidth}px`;
- }
-
- @HostListener('@showHide.start', ['$event'])
animateStart(event: AnimationEvent) {
- const scrollbarWidth = this.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.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 });
}
}
@@ -259,56 +303,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.html b/projects/coreui-angular/src/lib/nav/nav-item.component.html
deleted file mode 100644
index 6dbc7430..00000000
--- a/projects/coreui-angular/src/lib/nav/nav-item.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
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 8dc2e012..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
@@ -8,9 +8,9 @@ describe('NavItemComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ NavItemComponent ]
+ imports: [NavItemComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -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 2ae549b4..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,16 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-nav-item',
- templateUrl: './nav-item.component.html',
- styleUrls: ['./nav-item.component.scss']
+ template: '',
+ styleUrls: ['./nav-item.component.scss'],
+ 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 9984f5b8..e32e7d00 100644
--- a/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
@@ -1,77 +1,57 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, effect, input } from '@angular/core';
@Directive({
- selector: '[cNavLink]'
+ selector: '[cNavLink]',
+ 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_cNavLink: BooleanInput;
- static ngAcceptInputType_disabled: BooleanInput;
-
/**
* Sets .nav-link class to the host. [docs]
- * @type boolean
* @default true
*/
- @Input()
- set cNavLink(value: boolean) {
- this._cNavLink = coerceBooleanProperty(value);
- };
- get cNavLink() {
- return this._cNavLink;
- }
- private _cNavLink = 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()
- get disabled(): boolean {
- return this._disabled;
- }
- set disabled(value: boolean) {
- this._disabled = coerceBooleanProperty(value);
- }
- private _disabled = false;
-
- @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;
- }
-
- @HostBinding('attr.disabled')
- get attrDisabled () {
- return this.disabled ? '' : null;
- };
-
- @HostBinding('attr.tabindex')
- get getTabindex(): string | null {
- return this.disabled ? '-1' : null;
- }
-
- @HostBinding('style.cursor')
- get getCursorStyle(): string | null {
- return this.disabled ? null : 'pointer';
- }
-
- @HostBinding('class')
- get hostClasses(): any {
+ readonly disabled = input(false, { transform: booleanAttribute });
+
+ readonly ariaCurrent = computed(() => {
+ return this.active() ? 'page' : null;
+ });
+
+ ariaDisabled: boolean | null = null;
+ attrDisabled: boolean | string | null = null;
+ attrTabindex: '-1' | null = null;
+ styleCursor: 'pointer' | null = null;
+
+ readonly #disabledEffect = effect(() => {
+ const disabled = this.disabled();
+ this.ariaDisabled = disabled || null;
+ this.attrDisabled = disabled ? '' : null;
+ this.attrTabindex = disabled ? '-1' : null;
+ this.styleCursor = disabled ? null : 'pointer';
+ });
+
+ 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 f2be3f09..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({
- declarations: [ NavComponent ]
- })
- .compileComponents();
+ imports: [NavComponent]
+ }).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 b48003dc..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: `
- `,
- styleUrls: ['./nav.component.scss']
+ template: '',
+ styleUrls: ['./nav.component.scss'],
+ 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/nav/nav.module.ts b/projects/coreui-angular/src/lib/nav/nav.module.ts
index 152608cb..70c75f6c 100644
--- a/projects/coreui-angular/src/lib/nav/nav.module.ts
+++ b/projects/coreui-angular/src/lib/nav/nav.module.ts
@@ -1,14 +1,18 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { NavComponent } from './nav.component';
import { NavItemComponent } from './nav-item.component';
import { NavLinkDirective } from './nav-link.directive';
@NgModule({
- declarations: [NavComponent, NavItemComponent, NavLinkDirective],
imports: [
- CommonModule
+ NavComponent,
+ NavItemComponent,
+ NavLinkDirective
],
- exports: [NavComponent, NavItemComponent, NavLinkDirective]
+ exports: [
+ NavComponent,
+ NavItemComponent,
+ NavLinkDirective
+ ]
})
-export class NavModule { }
+export class NavModule {}
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 b91d089e..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,11 +1,9 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, input } from '@angular/core';
@Directive({
- selector: '[cNavbarBrand]'
+ selector: '[cNavbarBrand]',
+ 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 5adc7827..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
@@ -8,9 +8,9 @@ describe('NavbarNavComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ NavbarNavComponent ]
+ imports: [NavbarNavComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -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 5a067908..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,33 +1,21 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
@Component({
selector: 'c-navbar-nav',
- template: '',
+ template: '',
+ host: { '[class]': 'hostClasses()' }
})
export class NavbarNavComponent {
-
- static ngAcceptInputType_scroll: BooleanInput;
-
/**
* Enable vertical scrolling of a collapsed navbar toggleable contents.
* @type boolean
*/
- @Input()
- set scroll(value: boolean) {
- this._scroll = coerceBooleanProperty(value);
- };
- get scroll() {
- return this._scroll;
- }
- private _scroll = 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.html b/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.html
deleted file mode 100644
index 6dbc7430..00000000
--- a/projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
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 bc06684b..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
@@ -8,9 +8,9 @@ describe('NavbarTextComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ NavbarTextComponent ]
+ imports: [NavbarTextComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -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 abfc13ec..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,11 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-navbar-text',
- template: '',
+ 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..55899436 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: `
+
+
+ `
+})
+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 6799ac5f..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,54 +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]'
+ selector: '[cNavbarToggler]',
+ 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.scss b/projects/coreui-angular/src/lib/navbar/navbar.component.scss
deleted file mode 100644
index e69de29b..00000000
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 cb0cff46..fbf41b8f 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
@@ -8,9 +8,8 @@ describe('NavbarComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ NavbarComponent ]
- })
- .compileComponents();
+ imports: [NavbarComponent]
+ }).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 080be553..11c037e8 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -1,91 +1,131 @@
-import { AfterContentInit, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
-
+import {
+ AfterContentInit,
+ afterRender,
+ Component,
+ computed,
+ contentChild,
+ ElementRef,
+ inject,
+ input,
+ OnDestroy,
+ signal
+} from '@angular/core';
+import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
import { BreakpointObserver } from '@angular/cdk/layout';
import { CollapseDirective } from '../collapse';
import { Colors } from '../coreui.types';
+import { ThemeDirective } from '../shared';
+import { Subscription } from 'rxjs';
// todo: fix container prop issue not rendering children
-// todo: workaroud - use
component directly in template
+// todo: workaround - use component directly in template
@Component({
- selector: 'c-navbar',
- templateUrl: './navbar.component.html',
- styleUrls: ['./navbar.component.scss']
+ selector: 'c-navbar',
+ templateUrl: './navbar.component.html',
+ imports: [NgClass, NgTemplateOutlet],
+ hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
+ host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
})
-export class NavbarComponent implements AfterContentInit {
+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';
+ readonly placement = input<'fixed-top' | 'fixed-bottom' | 'sticky-top'>();
- @ContentChild(CollapseDirective) collapse!: CollapseDirective;
+ readonly role = input('navigation');
- @HostBinding('attr.role')
- @Input() role = 'navigation';
+ readonly collapse = contentChild(CollapseDirective);
- constructor(
- private hostElement: ElementRef,
- private breakpointObserver: BreakpointObserver
- ) {}
-
- @HostBinding('class')
- get hostClasses(): any {
- const expandClassSuffix: string = this.expand === true ? '' : `-${this.expand}`;
+ readonly hostClasses = computed(() => {
+ const color = this.color();
+ const expand = this.expand();
+ const expandClassSuffix: string = expand === true ? '' : `-${expand}`;
+ const placement = this.placement();
return {
navbar: true,
- 'navbar-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 afterNextRenderFn = afterRender({
+ read: () => {
+ const expand = this.expand();
+ if (typeof expand === 'string') {
+ const computedStyle =
+ this.#document.defaultView
+ ?.getComputedStyle(this.#hostElement.nativeElement)
+ ?.getPropertyValue(`--cui-breakpoint-${expand}`) ?? false;
+ computedStyle && this.computedStyle.set(computedStyle);
+ }
+ }
+ });
- 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/navbar/navbar.module.ts b/projects/coreui-angular/src/lib/navbar/navbar.module.ts
index 90d74ad9..8cde570e 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.module.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.module.ts
@@ -1,6 +1,4 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar.component';
import { NavbarBrandDirective } from './navbar-brand/navbar-brand.directive';
@@ -9,23 +7,19 @@ import { NavbarTextComponent } from './navbar-text/navbar-text.component';
import { NavbarTogglerDirective } from './navbar-toggler/navbar-toggler.directive';
@NgModule({
- declarations: [
+ exports: [
+ NavbarBrandDirective,
NavbarComponent,
NavbarNavComponent,
NavbarTextComponent,
- NavbarBrandDirective,
NavbarTogglerDirective
],
- exports: [
+ imports: [
+ NavbarBrandDirective,
NavbarComponent,
NavbarNavComponent,
NavbarTextComponent,
- NavbarBrandDirective,
NavbarTogglerDirective
- ],
- imports: [
- CommonModule,
- RouterModule
]
})
-export class NavbarModule { }
+export class NavbarModule {}
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 b7bd6cbd..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
@@ -8,9 +8,9 @@ describe('OffcanvasBodyComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ OffcanvasBodyComponent ]
+ imports: [OffcanvasBodyComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 fd30d6d1..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,17 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-offcanvas-body',
- template: ``,
- styleUrls: ['./offcanvas-body.component.scss']
+ template: '',
+ styleUrls: ['./offcanvas-body.component.scss'],
+ 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.scss b/projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.scss
deleted file mode 100644
index e69de29b..00000000
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 0add318c..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
@@ -8,9 +8,9 @@ describe('OffcanvasHeaderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ OffcanvasHeaderComponent ]
+ imports: [OffcanvasHeaderComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 46ec9df4..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: ``,
- styleUrls: ['./offcanvas-header.component.scss']
+ 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 30fb6192..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,15 +1,7 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
- selector: '[cOffcanvasTitle]'
+ selector: '[cOffcanvasTitle]',
+ 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 406d3206..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,38 +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],
- declarations: [OffcanvasToggleDirective, 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 4511a506..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,25 +1,24 @@
-import { Directive, HostListener, Input } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
import { OffcanvasService } from '../offcanvas.service';
@Directive({
- selector: '[cOffcanvasToggle]'
+ selector: '[cOffcanvasToggle]',
+ 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.module.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas.module.ts
index 258edfba..cc136f9a 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas.module.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas.module.ts
@@ -1,6 +1,4 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { A11yModule } from '@angular/cdk/a11y';
import { OffcanvasComponent } from './offcanvas/offcanvas.component';
import { OffcanvasBodyComponent } from './offcanvas-body/offcanvas-body.component';
@@ -11,27 +9,23 @@ import { OffcanvasService } from './offcanvas.service';
import { BackdropService } from '../backdrop/backdrop.service';
@NgModule({
- declarations: [
- OffcanvasComponent,
+ exports: [
OffcanvasBodyComponent,
+ OffcanvasComponent,
OffcanvasHeaderComponent,
OffcanvasTitleDirective,
OffcanvasToggleDirective
],
- exports: [
- OffcanvasComponent,
+ imports: [
OffcanvasBodyComponent,
+ OffcanvasComponent,
OffcanvasHeaderComponent,
OffcanvasTitleDirective,
OffcanvasToggleDirective
],
- imports: [
- CommonModule,
- A11yModule
- ],
providers: [
OffcanvasService,
BackdropService
- ],
+ ]
})
-export class OffcanvasModule { }
+export class OffcanvasModule {}
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.scss b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss
index e69de29b..cc36f78b 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss
@@ -0,0 +1,3 @@
+:host {
+ display: none;
+}
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
new file mode 100644
index 00000000..1a142315
--- /dev/null
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
@@ -0,0 +1,76 @@
+import { ComponentFixture, fakeAsync, flushMicrotasks, TestBed, tick } from '@angular/core/testing';
+
+import { OffcanvasComponent } from './offcanvas.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentRef } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+describe('OffcanvasComponent', () => {
+ let component: OffcanvasComponent;
+ let componentRef: ComponentRef;
+ let fixture: ComponentFixture;
+ let document: Document;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NoopAnimationsModule, OffcanvasComponent]
+ }).compileComponents();
+
+ 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 c0bdee41..cb437177 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
@@ -1,26 +1,30 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import {
+ booleanAttribute,
Component,
+ computed,
+ DestroyRef,
+ effect,
ElementRef,
- EventEmitter,
- HostBinding,
- HostListener,
- Inject,
- Input,
- OnChanges,
+ inject,
+ input,
+ linkedSignal,
OnDestroy,
OnInit,
- Output,
+ output,
PLATFORM_ID,
- Renderer2,
- SimpleChanges,
+ Renderer2
} from '@angular/core';
-import { animate, state, style, transition, trigger, } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { A11yModule } from '@angular/cdk/a11y';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
-import { OffcanvasService } from '../offcanvas.service';
import { BackdropService } from '../../backdrop/backdrop.service';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ThemeDirective } from '../../shared';
+import { OffcanvasService } from '../offcanvas.service';
let nextId = 0;
@@ -29,219 +33,273 @@ let nextId = 0;
animations: [
trigger('showHide', [
state(
- 'true',
+ 'visible',
style({
- visibility: 'visible',
+ // visibility: 'visible'
})
),
state(
- 'false',
+ 'hidden',
style({
- visibility: 'hidden',
+ // visibility: 'hidden'
})
),
- transition('true => false', [animate('300ms')]),
- ]),
+ transition('visible <=> *', [animate('300ms')])
+ ])
],
templateUrl: './offcanvas.component.html',
styleUrls: ['./offcanvas.component.scss'],
exportAs: 'cOffcanvas',
+ 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 OnChanges, OnInit, OnDestroy {
-
- static ngAcceptInputType_scroll: BooleanInput;
-
- constructor(
- @Inject(DOCUMENT) private document: any,
- @Inject(PLATFORM_ID) private platformId: any,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private offcanvasService: OffcanvasService,
- private backdropService: BackdropService
- ) { }
+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);
/**
* Apply a backdrop on body while offcanvas is open.
- * @type boolean
+ * @return boolean | 'static'
* @default true
*/
- @Input() backdrop = 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');
/**
- * Allow body scrolling while offcanvas is visible.
- * @type boolean
+ * Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
+ * @return boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ * @default true
+ * @since 4.3.10
*/
- @Input()
- set scroll(value: boolean) {
- this._scroll = coerceBooleanProperty(value);
- };
- get scroll() {
- return this._scroll;
- }
- private _scroll = false;
+ readonly responsive = input<(boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl') | undefined>(true);
+ readonly id = input(`offcanvas-${this.placement()}-${nextId++}`);
- @Input() id = `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;
+ readonly ariaModal = input(true, { transform: booleanAttribute });
+
+ #activeBackdrop!: HTMLDivElement;
+ #backdropClickSubscription!: Subscription;
+ #layoutChangeSubscription!: Subscription;
+
+ /**
+ * Allow body scrolling while offcanvas is visible.
+ * @return boolean
+ * @default false
+ */
+ 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 (value) {
- 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.setScroll();
- this.visibleChange.emit(value);
- }
- get visible(): boolean {
- return this._visible;
- }
- private _visible!: boolean;
+ this.layoutChangeSubscribe(visible);
+ this.visibleChange.emit(visible);
+ });
/**
* Event triggered on visible change.
+ * @return
*/
- @Output() visibleChange = new EventEmitter();
-
- private activeBackdrop!: any;
-
- private stateToggleSubscription!: Subscription;
- private backdropClickSubscription!: Subscription;
+ 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: true,
- [`offcanvas-${this.placement}`]: !!this.placement,
- show: this.visible,
- };
- }
+ 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 animateType(): boolean {
- return this.visible;
+ get show(): boolean {
+ return this.visible();
+ }
+
+ set show(value: boolean) {
+ this.visible.set(value);
+ }
+
+ get responsiveBreakpoint(): string | false {
+ const responsive = this.responsive();
+ if (typeof responsive !== 'string') {
+ return 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;
+ }
+
+ animateStart(event: AnimationEvent) {
+ if (event.toState === 'visible') {
+ if (!this.scroll()) {
+ this.#backdropService.hideScrollbar();
+ }
+ this.#renderer.addClass(this.#hostElement.nativeElement, 'showing');
+ } else {
+ this.#renderer.addClass(this.#hostElement.nativeElement, 'hiding');
+ }
+ }
+
+ animateDone(event: AnimationEvent) {
+ setTimeout(() => {
+ if (event.toState === 'visible') {
+ 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.show = this.visible();
}
- @HostListener('document:keydown', ['$event'])
onKeyDownHandler(event: KeyboardEvent): void {
- if (event.key === 'Escape' && this.keyboard && this.visible) {
- 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.setScroll();
this.stateToggleSubscribe();
+ setTimeout(() => {
+ // hotfix to avoid offcanvas flicker on the first render
+ 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() });
}
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['scroll']) {
- this.setScroll();
+ setFocus(): void {
+ 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;
- }
- }
+ 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));
}
- );
- } else {
- this.stateToggleSubscription.unsubscribe();
- }
+ }
+ });
}
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();
+ this.#backdropClickSubscription?.unsubscribe();
}
}
- private setBackdrop(setBackdrop: boolean): void {
- if (setBackdrop) {
- this.activeBackdrop = this.backdropService.setBackdrop('offcanvas');
- this.backdropClickSubscribe();
- } else {
- this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
- this.backdropClickSubscribe(false);
- }
- }
-
- setFocus(): void {
- if (isPlatformBrowser(this.platformId)) {
- setTimeout(() => this.hostElement.nativeElement.focus());
- }
+ 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);
}
- setScroll() {
- if (this.visible) {
- if (!this.scroll) {
- this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
- this.renderer.setStyle(this.document.body, 'paddingRight.px', '0');
+ private layoutChangeSubscribe(subscribe: boolean = true): void {
+ if (subscribe) {
+ if (!this.responsiveBreakpoint) {
+ return;
}
- return;
- }
- if (!this.scroll) {
- this.renderer.removeStyle(this.document.body, 'overflow');
- this.renderer.removeStyle(this.document.body, 'paddingRight');
+
+ const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
+
+ const layoutChanges = this.#breakpointObserver.observe([responsiveBreakpoint]);
+
+ this.#layoutChangeSubscription = layoutChanges
+ .pipe(
+ filter((breakpointState) => !breakpointState.matches),
+ takeUntilDestroyed(this.#destroyRef)
+ )
+ .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 346698b5..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
@@ -8,9 +8,8 @@ describe('PaginationItemComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [PageItemComponent]
- })
- .compileComponents();
+ imports: [PageItemComponent]
+ }).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 a85c1c6b..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,8 +3,7 @@ import { PageItemDirective } from './page-item.directive';
@Component({
selector: 'c-page-item',
- template: ``,
+ 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 241b49a0..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,74 +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]'
+ selector: '[cPageItem]',
+ 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 63bbdecc..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,14 +1,7 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
- selector: '[cPageLink]'
+ selector: '[cPageLink]',
+ 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.module.ts b/projects/coreui-angular/src/lib/pagination/pagination.module.ts
index b56e32f6..f8aa1fa0 100644
--- a/projects/coreui-angular/src/lib/pagination/pagination.module.ts
+++ b/projects/coreui-angular/src/lib/pagination/pagination.module.ts
@@ -1,25 +1,21 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { PaginationComponent } from './pagination/pagination.component';
import { PageItemComponent } from './page-item/page-item.component';
import { PageItemDirective } from './page-item/page-item.directive';
import { PageLinkDirective } from './page-link/page-link.directive';
@NgModule({
- declarations: [
- PaginationComponent,
- PageItemComponent,
- PageItemDirective,
- PageLinkDirective
- ],
exports: [
- PaginationComponent,
PageItemComponent,
PageItemDirective,
- PageLinkDirective
+ PageLinkDirective,
+ PaginationComponent
],
imports: [
- CommonModule
+ PageItemComponent,
+ PageItemDirective,
+ PageLinkDirective,
+ PaginationComponent
]
})
export class PaginationModule {}
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.scss b/projects/coreui-angular/src/lib/pagination/pagination/pagination.component.scss
deleted file mode 100644
index e69de29b..00000000
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 258ba5c1..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,25 +1,33 @@
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({
- declarations: [ PaginationComponent ]
+ imports: [PaginationComponent]
})
- .compileComponents();
+ .compileComponents();
});
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 52c73539..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,36 +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',
- styleUrls: ['./pagination.component.scss']
+ 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 1663610c..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]'
+ selector: '[cPlaceholderAnimation]',
+ host: {
+ '[class]': 'hostClasses()'
+ }
})
-export class PlaceholderAnimationDirective implements AfterContentInit {
-
- constructor() { }
-
+export class PlaceholderAnimationDirective {
/**
* Animation type for placeholder
* @type 'glow' | 'wave'
* @default undefined
*/
- @Input('cPlaceholderAnimation') animation?: 'glow' | 'wave';
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- [`placeholder-${this.animation}`]: this.animate && !!this.animation
- };
- }
+ readonly animation: InputSignal<'glow' | 'wave' | undefined> = input<'glow' | 'wave' | undefined>(undefined, {
+ alias: 'cPlaceholderAnimation'
+ });
- @ContentChild(PlaceholderDirective) placeholder!: PlaceholderDirective;
- private animate: boolean = false;
+ readonly placeholder = contentChild(PlaceholderDirective);
- ngAfterContentInit() {
- this.animate = this.placeholder?.visible;
- }
+ readonly hostClasses = computed(() => {
+ return {
+ [`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 351d2ced..637d0d4c 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts
@@ -1,45 +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'
+ exportAs: 'cPlaceholder',
+ host: {
+ '[class]': 'hostClasses()',
+ '[attr.aria-hidden]': 'ariaHidden()'
+ }
})
export class PlaceholderDirective {
-
- static ngAcceptInputType_visible: BooleanInput;
-
- constructor() { }
-
/**
* placeholder toggler
* @type boolean
- * @default true
+ * @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/placeholder/placeholder.module.ts b/projects/coreui-angular/src/lib/placeholder/placeholder.module.ts
index 73943ac9..50fc3dbc 100644
--- a/projects/coreui-angular/src/lib/placeholder/placeholder.module.ts
+++ b/projects/coreui-angular/src/lib/placeholder/placeholder.module.ts
@@ -1,16 +1,12 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { PlaceholderDirective } from './placeholder.directive';
import { PlaceholderAnimationDirective } from './placeholder-animation.directive';
@NgModule({
- declarations: [
+ imports: [
PlaceholderDirective,
PlaceholderAnimationDirective
],
- imports: [
- CommonModule
- ],
exports: [
PlaceholderDirective,
PlaceholderAnimationDirective
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 d0cbe224..74857979 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.spec.ts
@@ -1,17 +1,97 @@
-import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { ListenersService } from '../services/listeners.service';
+import { DOCUMENT } from '@angular/common';
+import {
+ ChangeDetectorRef,
+ Component,
+ ComponentRef,
+ DebugElement,
+ 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 directive = new PopoverDirective(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef);
- 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 b26e59fd..a0370f4e 100644
--- a/projects/coreui-angular/src/lib/popover/popover.directive.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.directive.ts
@@ -1,83 +1,116 @@
+import { DOCUMENT } from '@angular/common';
import {
+ AfterViewInit,
ChangeDetectorRef,
ComponentRef,
+ computed,
+ DestroyRef,
Directive,
+ effect,
ElementRef,
- HostBinding,
- Inject,
- Input,
- OnChanges,
+ inject,
+ input,
+ model,
OnDestroy,
OnInit,
Renderer2,
- SimpleChanges,
TemplateRef,
ViewContainerRef
} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+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';
@Directive({
selector: '[cPopover]',
exportAs: 'cPopover',
- providers: [ListenersService]
+ providers: [ListenersService, IntersectionService],
+ host: { '[attr.aria-describedby]': 'ariaDescribedBy' }
})
-export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
+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 = {
@@ -85,30 +118,19 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
{
name: 'offset',
options: {
- offset: [0, 8]
+ offset: [0, 9]
}
}
]
};
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private renderer: Renderer2,
- private hostElement: ElementRef,
- private viewContainerRef: ViewContainerRef,
- private listenersService: ListenersService,
- private changeDetectorRef: ChangeDetectorRef
- ) {}
-
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['visible']) {
- changes['visible'].currentValue ? this.addPopoverElement() : this.removePopoverElement();
- }
+ ngAfterViewInit(): void {
+ this.intersectionServiceSubscribe();
}
ngOnDestroy(): void {
this.clearListeners();
- this.destroyPopoverElement();
+ this.destroyTooltipElement();
}
ngOnInit(): void {
@@ -117,102 +139,116 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
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(): 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()
});
+
+ 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 removePopoverElement(): void {
- this.popoverId = '';
- if (!this.popoverRef) {
+ 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.module.ts b/projects/coreui-angular/src/lib/popover/popover.module.ts
index bc695d7e..4ea29a42 100644
--- a/projects/coreui-angular/src/lib/popover/popover.module.ts
+++ b/projects/coreui-angular/src/lib/popover/popover.module.ts
@@ -1,20 +1,15 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { PopoverDirective } from './popover.directive';
import { PopoverComponent } from './popover/popover.component';
-
@NgModule({
- declarations: [
- PopoverDirective,
- PopoverComponent
- ],
exports: [
PopoverDirective,
PopoverComponent
],
imports: [
- CommonModule
+ PopoverDirective,
+ PopoverComponent
]
})
-export class PopoverModule { }
+export class PopoverModule {}
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 4b620acf..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
@@ -8,9 +8,9 @@ describe('PopoverComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ PopoverComponent ]
+ imports: [PopoverComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 6b5e62ff..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,73 +1,68 @@
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';
@Component({
selector: 'c-popover',
templateUrl: './popover.component.html',
+ 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);
}
@@ -81,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 011b1245..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({
- declarations: [ 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 7dbb0e2c..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,117 +1,29 @@
-import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
-import { Colors } from '../coreui.types';
-import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
+import { Component, computed, inject } from '@angular/core';
+import { ProgressBarDirective } from './progress-bar.directive';
@Component({
selector: 'c-progress-bar',
- template: ''
+ 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 });
- static ngAcceptInputType_animated: BooleanInput;
- static ngAcceptInputType_value: NumberInput;
-
- /**
- * Use to animate the stripes right to left via CSS3 animations.
- * @type boolean
- */
- @Input()
- set animated(value: boolean) {
- this._animated = coerceBooleanProperty(value);
-
- }
- get animated() {
- return this._animated;
- }
- private _animated = 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() precision = 0;
- /**
- * The percent to progress the ProgressBar.
- */
- @Input()
- set value(value: number) {
- this._value = coerceNumberProperty(value);
- };
- get value() {
- return this._value;
- }
- private _value = 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..f1f7d393
--- /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 21cbcf35..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({
- declarations: [ 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 47026ae2..b38324f6 100644
--- a/projects/coreui-angular/src/lib/progress/progress.component.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.component.ts
@@ -1,66 +1,84 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
+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: ''
+ 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);
- static ngAcceptInputType_height: NumberInput;
- static ngAcceptInputType_thin: BooleanInput;
- static ngAcceptInputType_white: BooleanInput;
+ constructor() {
+ this.#progressService.stacked.set(this.#stacked);
+ }
+
+ readonly stacked = this.#progressService.stacked;
+ readonly percent = this.#progressService.percent;
+ readonly value = 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()
- set height(value: number) {
- this._height = coerceNumberProperty(value);
- }
- get height() {
- return this._height;
- }
- private _height: number = 0;
+ readonly height = input(0, { transform: numberAttribute });
/**
* Displays thin progress.
- * @type boolean
+ * @return boolean
*/
- @Input()
- set thin(value: boolean) {
- this._thin = coerceBooleanProperty(value);
- }
- get thin(): boolean {
- return this._thin;
- }
- private _thin = false;
+ readonly thin = input(false, { transform: booleanAttribute });
/**
* Change the default color to white.
- * @type boolean
+ * @return boolean
*/
- @Input()
- get white(): boolean {
- return this._white;
- }
- set white(value: boolean) {
- this._white = coerceBooleanProperty(value);
- }
- private _white = 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 e26fa2bc..5f91781f 100644
--- a/projects/coreui-angular/src/lib/progress/progress.module.ts
+++ b/projects/coreui-angular/src/lib/progress/progress.module.ts
@@ -1,16 +1,21 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { ProgressComponent } from './progress.component';
import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarDirective } from './progress-bar.directive';
+import { ProgressStackedComponent } from './progress-stacked.component';
@NgModule({
- declarations: [ProgressComponent, ProgressBarComponent],
exports: [
ProgressComponent,
- ProgressBarComponent
+ ProgressBarComponent,
+ ProgressBarDirective,
+ ProgressStackedComponent
],
imports: [
- CommonModule
+ ProgressComponent,
+ ProgressBarComponent,
+ ProgressBarDirective,
+ ProgressStackedComponent
]
})
-export class ProgressModule { }
+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 d870d2f9..9fe206a1 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,25 @@
-import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class ClassToggleService {
+ readonly #document = inject(DOCUMENT);
+ readonly #rendererFactory = inject(RendererFactory2);
- private renderer: Renderer2;
+ #renderer: Renderer2;
- constructor(
- @Inject(DOCUMENT) private document: any,
- 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..a3148a95
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/color-mode.service.ts
@@ -0,0 +1,87 @@
+import { DOCUMENT } from '@angular/common';
+import { afterNextRender, DestroyRef, 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 67508e28..72d9dfc7 100644
--- a/projects/coreui-angular/src/lib/services/intersection.service.ts
+++ b/projects/coreui-angular/src/lib/services/intersection.service.ts
@@ -1,22 +1,22 @@
-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';
-interface IIntersectionObserverInit {
+export interface IIntersectionObserverInit {
root?: Element | null;
rootMargin?: string;
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 6195aed7..abb95d06 100644
--- a/projects/coreui-angular/src/lib/services/listeners.service.ts
+++ b/projects/coreui-angular/src/lib/services/listeners.service.ts
@@ -1,62 +1,59 @@
-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(' ') ?? [];
+ 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));
}
}
clearListeners(): void {
this.listeners.forEach((unListen, key) => {
- unListen();
+ unListen();
});
this.listeners.forEach((unListen, key) => {
// @ts-ignore
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..a29ef3c3
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/local-storage.service.ts
@@ -0,0 +1,44 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { 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 c6a21265..3d3a0ac3 100644
--- a/projects/coreui-angular/src/lib/services/public_api.ts
+++ b/projects/coreui-angular/src/lib/services/public_api.ts
@@ -1,2 +1,8 @@
-export { IntersectionService } from './intersection.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..2752333f
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/rtl.service.ts
@@ -0,0 +1,17 @@
+import { inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RtlService {
+ readonly #document = inject(DOCUMENT);
+
+ isRTL(element?: HTMLElement | null): boolean {
+ if (element) {
+ return element.closest('[dir="rtl"]') !== null;
+ }
+
+ return this.#document?.documentElement?.dir === 'rtl' || this.#document?.body?.dir === '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..e200fdfe
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/script-injector.service.ts
@@ -0,0 +1,66 @@
+import { DOCUMENT } from '@angular/common';
+import { 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..16003de7
--- /dev/null
+++ b/projects/coreui-angular/src/lib/services/uid.service.ts
@@ -0,0 +1,18 @@
+import { inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@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 f58b7daa..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,51 +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, 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 8ffaa88f..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'
})
-export class HtmlAttributesDirective implements OnInit {
+export class HtmlAttributesDirective {
+ readonly cHtmlAttr = input>();
- // @ts-ignore
- @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): void {
- const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
- classArray.filter((element) => element.length > 0).forEach(element => {
- this.renderer.addClass(this.el.nativeElement, element );
- });
+ 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.#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 79e2aa62..cb545ddf 100644
--- a/projects/coreui-angular/src/lib/shared/shared.module.ts
+++ b/projects/coreui-angular/src/lib/shared/shared.module.ts
@@ -1,35 +1,18 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-// import { OutClickService } from './out-click.service';
-// import { OutClickDirective } from './out-click.directive';
+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: [
- CommonModule
- ],
- declarations: [
- // OutClickDirective,
- HtmlAttributesDirective,
- TemplateIdDirective
- ],
- exports: [
- // OutClickDirective,
- HtmlAttributesDirective,
- TemplateIdDirective
- ],
- providers: []
+ imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
+ exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
})
export class SharedModule {
-
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
- // providers: [
- // {provide: OutClickService}
- // ]
};
}
}
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..8915f2f9
--- /dev/null
+++ b/projects/coreui-angular/src/lib/shared/template-id.directive.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TemplateIdDirective } from './template-id.directive';
+import { Component, computed, DebugElement, TemplateRef, viewChild } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { NgTemplateOutlet } from '@angular/common';
+
+@Component({
+ imports: [TemplateIdDirective, NgTemplateOutlet],
+ template: `
+ Inner Text
+
+
+
+ `
+})
+class TestComponent {
+ readonly templateId = viewChild(TemplateIdDirective);
+
+ readonly id = computed(() => this.templateId()?.templateRef);
+}
+
+describe('TemplateIdDirective', () => {
+ let fixture: ComponentFixture;
+ let component: TestComponent;
+ let debugElement: DebugElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent],
+ providers: [TemplateRef]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TestComponent);
+ debugElement = fixture.debugElement.query(By.css('.test'));
+ component = fixture.componentInstance;
+
+ fixture.detectChanges();
+ });
+ it('should create an instance', () => {
+ TestBed.runInInjectionContext(() => {
+ const directive = new TemplateIdDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should create a template with innerText', () => {
+ expect(debugElement.nativeElement.innerText).toBe('Inner Text');
+ });
+
+ it('should get the template id', () => {
+ expect(component.templateId()?.id).toBe('test');
+ expect(component.templateId()?.templateRef).toEqual(jasmine.any(TemplateRef));
+ });
+});
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 c0025d76..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,12 +1,13 @@
-import { Directive, Input, TemplateRef } from '@angular/core';
+import { Directive, inject, input, TemplateRef } from '@angular/core';
@Directive({
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 504a2e04..f47fb468 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,4 +1,4 @@
-import { Host, Inject, Injectable, Renderer2 } from '@angular/core';
+import { inject, Injectable, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { SidebarService } from '../sidebar.service';
import { SidebarComponent } from '../sidebar/sidebar.component';
@@ -7,52 +7,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: any,
- // 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 5c07ff65..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,21 +1,23 @@
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';
-describe('HeaderBrandComponent', () => {
+describe('SidebarBrandComponent', () => {
let component: SidebarBrandComponent;
let fixture: ComponentFixture;
let router: Router;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [ RouterTestingModule.withRoutes([]) ],
- declarations: [ SidebarBrandComponent, HtmlAttributesDirective ]
+ imports: [
+ HtmlAttributesDirective,
+ SidebarBrandComponent
+ ],
+ providers: [provideRouter([])]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -28,4 +30,8 @@ describe('HeaderBrandComponent', () => {
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 8e22cd67..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,20 +1,20 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+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'
+ templateUrl: './sidebar-brand.component.html',
+ imports: [RouterLink, HtmlAttributesDirective, NgClass],
+ host: { class: 'sidebar-brand' }
})
-export class SidebarBrandComponent implements OnInit {
-
- @Input() brandFull?: any;
- @Input() brandNarrow?: any;
- @Input() routerLink?: any[] | string;
-
- @HostBinding('class.sidebar-brand') sidebarBrandClass = true;
+export class SidebarBrandComponent {
+ readonly brandFull = input();
+ readonly brandNarrow = input();
- brandImg = false;
+ readonly routerLink = input();
- 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.html b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.html
deleted file mode 100644
index 6dbc7430..00000000
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.scss b/projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.scss
deleted file mode 100644
index e69de29b..00000000
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 09afa8da..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
@@ -8,9 +8,9 @@ describe('SidebarFooterComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ SidebarFooterComponent ]
+ imports: [SidebarFooterComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 cdd4ba5b..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',
- templateUrl: './sidebar-footer.component.html',
- styleUrls: ['./sidebar-footer.component.scss']
+ 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.html b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.html
deleted file mode 100644
index 6dbc7430..00000000
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.scss b/projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.scss
deleted file mode 100644
index e69de29b..00000000
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 b7fd60b7..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
@@ -8,9 +8,9 @@ describe('SidebarHeaderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ SidebarHeaderComponent ]
+ imports: [SidebarHeaderComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 0d8466e1..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,17 +1,8 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'c-sidebar-header',
- templateUrl: './sidebar-header.component.html',
- styleUrls: ['./sidebar-header.component.scss']
+ template: '',
+ host: { class: 'sidebar-header' }
})
-export class SidebarHeaderComponent {
- constructor() {}
-
- @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 3cc8001c..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
@@ -4,7 +4,6 @@ import { Pipe, PipeTransform } from '@angular/core';
name: 'cSidebarNavBadge'
})
export class SidebarNavBadgePipe implements PipeTransform {
-
transform(item: any, args?: any): any {
const badge = item.badge;
return {
@@ -16,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 09545ff4..3f4c3896 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
@@ -1,6 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import {SidebarNavDividerComponent} from './sidebar-nav-divider.component';
+import { SidebarNavDividerComponent } from './sidebar-nav-divider.component';
describe('SidebarNavDividerComponent', () => {
let component: SidebarNavDividerComponent;
@@ -9,9 +9,9 @@ describe('SidebarNavDividerComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ SidebarNavDividerComponent ],
+ imports: [SidebarNavDividerComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
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 58afbe79..436bc9a6 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
@@ -6,8 +6,4 @@ import { Component, Input } from '@angular/core';
})
export class SidebarNavDividerComponent {
@Input() item: any;
-
- constructor() {
- }
-
}
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 2ee3ca3a..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
@@ -2,29 +2,38 @@
[cHtmlAttr]="item.attributes"
class="nav-link nav-group-toggle"
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 d7b04abd..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,16 +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 { SidebarNavDividerComponent } from './sidebar-nav-divider.component';
+import { provideRouter, Router } from '@angular/router';
import { SidebarNavGroupComponent } from './sidebar-nav.component';
-import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
-import { SidebarNavLinkComponent } from './sidebar-nav-link.component';
-import { SidebarNavTitleComponent } from './sidebar-nav-title.component';
-import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
-import { HtmlAttributesDirective } from '../../shared';
-import { SidebarModule } from '../sidebar.module';
describe('SidebarNavGroupComponent', () => {
let component: SidebarNavGroupComponent;
@@ -20,18 +11,13 @@ describe('SidebarNavGroupComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [ RouterTestingModule.withRoutes([]), SidebarModule, NoopAnimationsModule ],
- declarations: [
- SidebarNavDividerComponent,
- SidebarNavGroupComponent,
- SidebarNavLabelComponent,
- SidebarNavLinkComponent,
- SidebarNavTitleComponent,
- HtmlAttributesDirective,
- SidebarNavIconPipe,
+ imports: [
+ NoopAnimationsModule,
+ SidebarNavGroupComponent
],
+ providers: [provideRouter([])]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -39,7 +25,7 @@ describe('SidebarNavGroupComponent', () => {
router = TestBed.inject(Router);
component = fixture.componentInstance;
- item = {
+ item = {
name: 'Tables',
url: '/tables',
icon: 'icon-list',
@@ -57,7 +43,7 @@ describe('SidebarNavGroupComponent', () => {
name: 'Standard Tables',
url: '/tables/tables',
icon: 'icon-list'
- },
+ }
]
};
component.item = item;
@@ -68,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 c8883a2f..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
@@ -4,13 +4,11 @@ import { Pipe, PipeTransform } from '@angular/core';
name: 'cSidebarNavIcon'
})
export class SidebarNavIconPipe implements PipeTransform {
-
transform(item: any, args?: any): any {
const icon = item.icon;
- const classes = {
+ return {
'nav-icon': true,
[`${icon}`]: !!icon
};
- return classes;
}
}
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 864171d9..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,28 +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'
})
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..d814c644 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html
@@ -1,7 +1,11 @@
-
-
+
+ @if (helper.hasIcon(item)) {
+
+ }
{{ item.name }}
- {{ item.badge.text }}
+ @if (helper.hasBadge(item)) {
+ {{ item.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 17b68301..ae5954bb 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,7 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import {SidebarNavLabelComponent} from './sidebar-nav-label.component';
-import {SidebarNavHelper} from './sidebar-nav.service';
-import { SharedModule } from '../../shared';
+import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
+import { SidebarNavHelper } from './sidebar-nav.service';
// import {LayoutModule} from '../../shared/layout/index.ts_';
describe('SidebarNavLabelComponent', () => {
@@ -12,11 +11,10 @@ describe('SidebarNavLabelComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ SidebarNavLabelComponent ],
- providers: [ SidebarNavHelper ],
- imports: [ SharedModule ],
+ providers: [SidebarNavHelper],
+ imports: [SidebarNavLabelComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
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 af5d2958..062bda42 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,11 +1,18 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {SidebarNavHelper} from './sidebar-nav.service';
+import { Component, inject, Input, OnInit } 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';
@Component({
selector: 'c-sidebar-nav-label',
- templateUrl: './sidebar-nav-label.component.html'
+ templateUrl: './sidebar-nav-label.component.html',
+ imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
})
export class SidebarNavLabelComponent implements OnInit {
+ readonly helper = inject(SidebarNavHelper);
+
@Input() item: any;
private classes = {
@@ -14,10 +21,6 @@ export class SidebarNavLabelComponent implements OnInit {
};
private iconClasses = {};
- constructor(
- public helper: SidebarNavHelper
- ) { }
-
ngOnInit() {
this.iconClasses = this.helper.getIconClass(this.item);
}
@@ -28,6 +31,7 @@ export class SidebarNavLabelComponent implements OnInit {
this.classes[itemClass] = !!itemClass;
return this.classes;
}
+
getLabelIconClass() {
const variant = `text-${this.item.label.variant}`;
// @ts-ignore
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..921d6f39 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,62 @@
-
-
-
-
- {{ item.badge?.text }}
-
-
-
-
- {{ item.badge?.text }}
-
-
-
-
-
- {{ item.badge?.text }}
-
-
-
+@switch (linkType) {
+ @case ('disabled') {
+
+
+
+ @if (item.badge) {
+ {{ item.badge?.text }}
+ }
+
+ }
+ @case ('external') {
+
+
+
+ @if (item.badge) {
+ {{ item.badge?.text }}
+ }
+
+ }
+ @default {
+
+
+
+
+ @if (item.badge) {
+ {{ 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-link.component.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.spec.ts
index 1f6146f7..a1e66298 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
@@ -3,11 +3,7 @@ import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { SidebarNavLinkComponent } from './sidebar-nav-link.component';
-import { SidebarNavLinkPipe } from './sidebar-nav-link.pipe';
-import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
-import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
import { HtmlAttributesDirective } from '../../shared';
-import { SidebarModule } from '../sidebar.module';
describe('SidebarNavLinkComponent', () => {
let component: SidebarNavLinkComponent;
@@ -17,8 +13,10 @@ describe('SidebarNavLinkComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [RouterTestingModule.withRoutes([]), SidebarModule],
- declarations: [SidebarNavLinkComponent, HtmlAttributesDirective, SidebarNavLinkPipe, SidebarNavBadgePipe, SidebarNavIconPipe]
+ imports: [RouterTestingModule.withRoutes([]),
+ HtmlAttributesDirective,
+ SidebarNavLinkComponent
+ ]
})
.compileComponents();
}));
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 0614f3fe..561a65aa 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,82 +1,92 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
-import {Observable, Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Component, inject, Input, OnDestroy, OnInit, output } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { IconDirective } from '@coreui/icons-angular';
-import {SidebarNavHelper} from './sidebar-nav.service';
// import {SidebarService} from '../sidebar.service';
+import { HtmlAttributesDirective } from '../../shared';
+import { SidebarNavHelper } from './sidebar-nav.service';
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';
@Component({
selector: 'c-sidebar-nav-link-content',
template: `
-
- {{item?.name ?? ''}}
-
+ @if (true) {
+ {{ item?.name ?? '' }}
+ }
`,
- providers: [ SidebarNavHelper ]
+ providers: [SidebarNavHelper]
})
export class SidebarNavLinkContentComponent {
- @Input() item?: INavData;
+ readonly helper = inject(SidebarNavHelper);
- constructor(
- public helper: SidebarNavHelper
- ) { }
+ @Input() item?: INavData;
}
@Component({
selector: 'c-sidebar-nav-link',
templateUrl: './sidebar-nav-link.component.html',
- providers: [ SidebarNavHelper ]
+ providers: [SidebarNavHelper],
+ imports: [
+ RouterModule,
+ HtmlAttributesDirective,
+ IconDirective,
+ SidebarNavLinkContentComponent,
+ SidebarNavLinkPipe,
+ SidebarNavBadgePipe,
+ SidebarNavIconPipe,
+ NgTemplateOutlet,
+ NgClass
+ ]
})
export class SidebarNavLinkComponent implements OnInit, OnDestroy {
+ readonly router = inject(Router);
- // tslint:disable-next-line:variable-name
protected _item: INavData = {};
@Input()
set item(item: INavData) {
this._item = JSON.parse(JSON.stringify(item));
}
+
get item(): INavData {
return this._item;
}
- @Output() linkClick = new EventEmitter();
+ readonly linkClick = output();
- // @ts-ignore
- public linkType: string;
- // @ts-ignore
- public href: string;
- // @ts-ignore
- public linkActive: boolean;
- // @ts-ignore
- private url: string;
+ public linkType!: string;
+ public href!: string;
+ public linkActive!: boolean;
+ private url!: string;
private navigationEndObservable: Observable;
- // @ts-ignore
- private navSubscription: Subscription;
-
- constructor(
- public router: Router,
- // private renderer: Renderer2,
- // private hostElement: ElementRef,
- // private sidebarService: SidebarService
- ) {
+ private navSubscription!: Subscription;
+
+ constructor() {
+ const router = this.router;
+
this.navigationEndObservable = router.events.pipe(
- filter(event => {
+ filter((event) => {
return event instanceof NavigationEnd;
})
) 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)) ;
+ this.url =
+ typeof this.item.url === 'string'
+ ? this.item.url
+ : this.router.serializeUrl(this.router.createUrlTree((this.item.url as any[]) ?? ['']));
this.linkType = this.getLinkType();
- this.href = this.isDisabled() ? '' : (this.item.href || this.url);
+ this.href = this.isDisabled() ? '' : this.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]);
@@ -84,7 +94,7 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
- this.navSubscription.unsubscribe();
+ this.navSubscription?.unsubscribe();
}
public getLinkType(): string {
@@ -97,7 +107,7 @@ export class SidebarNavLinkComponent implements OnInit, OnDestroy {
public isExternalLink(): boolean {
const linkPath = Array.isArray(this.item.url) ? this.item.url[0] : this.item.url;
- return !!this.item.href || linkPath.substring(0, 4) === 'http';
+ return !!this.item.href || linkPath?.substring(0, 4) === 'http';
}
linkClicked(): void {
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts
index 2aaab10d..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
@@ -4,17 +4,14 @@ import { Pipe, PipeTransform } from '@angular/core';
name: 'cSidebarNavLink'
})
export class SidebarNavLinkPipe implements PipeTransform {
-
transform(item: any): any {
-
const disabled = item?.attributes?.disabled;
- const classes = {
+ return {
'nav-link': true,
disabled,
'btn-link': disabled,
[`nav-link-${item.variant}`]: !!item.variant
};
- return classes;
}
}
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 ebb584d0..987278ea 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
@@ -9,9 +9,9 @@ describe('SidebarNavTitleComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ SidebarNavTitleComponent ]
+ imports: [SidebarNavTitleComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
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 09e2ec78..cfa07af0 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,40 +1,38 @@
-import {Component, ElementRef, Input, OnInit, Renderer2} from '@angular/core';
+import { Component, ElementRef, inject, Input, OnInit, Renderer2 } from '@angular/core';
@Component({
selector: 'c-sidebar-nav-title',
- template: '',
+ template: ''
})
export class SidebarNavTitleComponent implements OnInit {
- @Input() item: any;
+ readonly #elementRef = inject(ElementRef);
+ readonly #renderer = inject(Renderer2);
- constructor(
- private el: ElementRef,
- private renderer: Renderer2,
- ) {}
+ @Input() item: any;
ngOnInit(): void {
- const nativeElement: HTMLElement = this.el.nativeElement;
- const name = this.renderer.createText(this.item.name);
+ const nativeElement: HTMLElement = this.#elementRef.nativeElement;
+ const name = this.#renderer.createText(this.item.name);
- if ( this.item.class ) {
+ if (this.item.class) {
const classes = this.item.class;
- this.renderer.addClass(nativeElement, classes);
+ this.#renderer.addClass(nativeElement, classes);
}
- if ( this.item.wrapper ) {
- const wrapper = this.renderer.createElement(this.item.wrapper.element);
+ 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);
+ this.#renderer.appendChild(wrapper, name);
+ this.#renderer.appendChild(nativeElement, wrapper);
} else {
- this.renderer.appendChild(nativeElement, name);
+ this.#renderer.appendChild(nativeElement, name);
}
}
- private addAttribs(attribs: { [x: string]: any; }, element: any): void {
+ private addAttribs(attribs: { [x: string]: any }, element: any): 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);
@@ -45,22 +43,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.scss b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.scss
deleted file mode 100644
index e69de29b..00000000
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 911bbb6b..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,42 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
-import { SidebarNavComponent, SidebarNavGroupComponent } from './sidebar-nav.component';
+import { SidebarNavComponent } from './sidebar-nav.component';
import { SidebarNavHelper } from './sidebar-nav.service';
// import { SidebarNavGroupComponent } from './sidebar-nav-group.component';
-import { SidebarNavDividerComponent } from './sidebar-nav-divider.component';
-import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
-import { SidebarNavLinkComponent } from './sidebar-nav-link.component';
-import { SidebarNavTitleComponent } from './sidebar-nav-title.component';
-import { HtmlAttributesDirective, SharedModule } from '../../shared';
describe('SidebarNavComponent', () => {
let component: SidebarNavComponent;
let fixture: ComponentFixture;
- let router: Router;
- let navItems: Array;
+ let navItems: any[];
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [ RouterTestingModule.withRoutes([]), SharedModule ],
- declarations: [
- SidebarNavComponent,
- SidebarNavGroupComponent,
- SidebarNavDividerComponent,
- SidebarNavLabelComponent,
- SidebarNavLinkComponent,
- SidebarNavTitleComponent,
- HtmlAttributesDirective
- ],
- providers: [ SidebarNavHelper ],
- })
- .compileComponents();
+ imports: [RouterTestingModule.withRoutes([]), SidebarNavComponent],
+ declarations: [],
+ providers: [SidebarNavHelper]
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarNavComponent);
- router = TestBed.inject(Router);
component = fixture.componentInstance;
// mock items supplied by the parent component
@@ -60,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 786533a1..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,18 +1,21 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
+ booleanAttribute,
Component,
ElementRef,
+ forwardRef,
HostBinding,
+ inject,
Input,
OnChanges,
OnDestroy,
OnInit,
- Optional,
Renderer2,
SimpleChanges,
ViewChild
} from '@angular/core';
-import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
@@ -21,85 +24,59 @@ import { SidebarComponent } from '../sidebar/sidebar.component';
import { INavData } from './sidebar-nav';
import { SidebarNavHelper } from './sidebar-nav.service';
import { SidebarNavGroupService } from './sidebar-nav-group.service';
-
-@Component({
- selector: 'c-sidebar-nav',
- templateUrl: './sidebar-nav.component.html',
- styleUrls: ['./sidebar-nav.component.scss']
-})
-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
- ) { }
-
- @Input() navItems?: INavData[] = [];
- @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
- @Input() groupItems?: boolean;
- @Input() compact?: boolean;
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'sidebar-nav': !this.groupItems,
- compact: !this.groupItems && !!this.compact
- };
- }
-
- @HostBinding('class.nav-group-items')
- get sidebarNavGroupItemsClass(): boolean {
- return !!this.groupItems;
- }
-
- @HostBinding('attr.role') role = 'nav';
-
- public navItemsArray: INavData[] = [];
-
- public ngOnChanges(changes: SimpleChanges): void {
- this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
- }
-
- public hideMobile(): void {
- // todo: proper scrollIntoView() after NavigationEnd
- if (this.sidebar && this.sidebar.sidebarState.mobile) {
- this.sidebarService.toggle({ toggle: 'visible', sidebar: this.sidebar });
- }
- }
-}
+import { HtmlAttributesDirective } from '../../shared';
+import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
+import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
+import { SidebarNavLinkComponent } from './sidebar-nav-link.component';
+import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
+import { SidebarNavTitleComponent } from './sidebar-nav-title.component';
+import { SidebarNavDividerComponent } from './sidebar-nav-divider.component';
+import { SidebarNavItemClassPipe } from './sidebar-nav-item-class.pipe';
+import { IconDirective } from '@coreui/icons-angular';
@Component({
selector: 'c-sidebar-nav-group',
templateUrl: './sidebar-nav-group.component.html',
styleUrls: ['./sidebar-nav-group.component.scss'],
- providers: [SidebarNavHelper],
+ providers: [SidebarNavHelper, SidebarNavGroupService],
+ imports: [
+ HtmlAttributesDirective,
+ IconDirective,
+ NgTemplateOutlet,
+ NgClass,
+ SidebarNavIconPipe,
+ SidebarNavBadgePipe,
+ forwardRef(() => SidebarNavComponent),
+ NgStyle
+ ],
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;
@@ -108,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 {
@@ -117,7 +95,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
};
}
- @ViewChild(SidebarNavComponent, { read: ElementRef }) sidebarNav!: ElementRef;
+ @ViewChild(forwardRef(() => SidebarNavComponent), { read: ElementRef }) sidebarNav!: ElementRef;
navigationEndObservable: Observable;
navSubscription!: Subscription;
@@ -128,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) => {
@@ -138,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;
}
@@ -174,31 +151,95 @@ 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 });
}
}
ngOnDestroy(): void {
- this.navSubscription.unsubscribe();
+ this.navSubscription?.unsubscribe();
}
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',
+ imports: [
+ NgClass,
+ HtmlAttributesDirective,
+ SidebarNavLinkComponent,
+ SidebarNavLabelComponent,
+ SidebarNavTitleComponent,
+ SidebarNavDividerComponent,
+ forwardRef(() => SidebarNavGroupComponent),
+ SidebarNavItemClassPipe,
+ RouterModule
+ ]
+})
+export class SidebarNavComponent implements OnChanges {
+ 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({ transform: booleanAttribute }) groupItems?: boolean;
+ @Input({ transform: booleanAttribute }) compact?: boolean;
+
+ @HostBinding('class')
+ get hostClasses(): any {
+ return {
+ 'sidebar-nav': !this.groupItems,
+ 'nav-group-items': this.groupItems,
+ compact: this.groupItems && this.compact
+ };
+ }
+
+ // @HostBinding('class.nav-group-items')
+ // get sidebarNavGroupItemsClass(): boolean {
+ // return !!this.groupItems;
+ // }
+
+ @HostBinding('attr.role')
+ @Input()
+ role = 'navigation';
+
+ public navItemsArray: INavData[] = [];
+
+ public ngOnChanges(changes: SimpleChanges): void {
+ this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
+ }
+
+ public hideMobile(): void {
+ // todo: proper scrollIntoView() after NavigationEnd
+ if (this.sidebar && this.sidebar.sidebarState.mobile) {
+ this.#sidebarService.toggle({ toggle: 'visible', sidebar: this.sidebar });
}
}
}
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
index 90fe7434..f0f2f887 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.service.spec.ts
@@ -1,6 +1,6 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import {Router, Routes} from '@angular/router';
+import { Router, Routes } from '@angular/router';
import { SidebarNavHelper } from './sidebar-nav.service';
@@ -8,14 +8,14 @@ describe('SidebarNavHelper', () => {
let service: SidebarNavHelper;
let router: RouterTestingModule;
const routes: Routes = [
- {path: 'dashboard', redirectTo: 'home', pathMatch: 'full'},
- {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
+ { path: 'dashboard', redirectTo: 'home', pathMatch: 'full' },
+ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
];
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes(routes)],
- providers: [SidebarNavHelper],
+ providers: [SidebarNavHelper]
});
router = TestBed.inject(Router);
@@ -26,40 +26,45 @@ describe('SidebarNavHelper', () => {
expect(service).toBeTruthy();
});
it('should return itemType', () => {
- expect(service.itemType({divider: true})).toEqual('divider');
- expect(service.itemType({title: true})).toEqual('title');
- expect(service.itemType({children: [{
- name: 'Dropdown',
- url: '/dashboard',
- }]})).toEqual('group');
- expect(service.itemType({label: { variant: 'info' }})).toEqual('label');
+ expect(service.itemType({ divider: true })).toEqual('divider');
+ expect(service.itemType({ title: true })).toEqual('title');
+ expect(service.itemType({
+ children: [{
+ name: 'Dropdown',
+ url: '/dashboard'
+ }]
+ })).toEqual('group');
+ expect(service.itemType({ label: { variant: 'info' } })).toEqual('label');
expect(service.itemType({})).toEqual('empty');
expect(service.itemType({
- name: 'Disabled',
- url: '/dashboard',
- icon: 'icon-ban',
- attributes: { disabled: true },
- }
+ name: 'Disabled',
+ url: '/dashboard',
+ icon: 'icon-ban',
+ attributes: { disabled: true }
+ }
)).toEqual('link');
});
it('should be active', () => {
- expect(service.isActive(router, {url: ''})).toBeTruthy();
- expect(service.isActive(router, {url: 'dashboard'})).toBeFalsy();
+ expect(service.isActive(router, { url: '' })).toBeTruthy();
+ expect(service.isActive(router, { url: 'dashboard' })).toBeFalsy();
});
it('item hasBadge', () => {
- expect(service.hasBadge({badge: {text: 'badge', color: 'info'}})).toBeTruthy();
+ expect(service.hasBadge({ badge: { text: 'badge', color: 'info' } })).toBeTruthy();
expect(service.hasBadge({})).toBeFalsy();
});
it('item hasIcon', () => {
- expect(service.hasIcon({icon: 'icon-ban'})).toBeTruthy();
+ expect(service.hasIcon({ icon: 'icon-ban' })).toBeTruthy();
expect(service.hasIcon({})).toBeFalsy();
});
it('should return icon class object', () => {
- expect(service.getIconClass({icon: 'icon-ban'})).toEqual(jasmine.objectContaining({ 'nav-icon': true, 'icon-ban': true}));
- expect(service.getIconClass({icon: 'icon-ban'})).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
- expect(service.getIconClass({icon: ''})).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
+ expect(service.getIconClass({ icon: 'icon-ban' })).toEqual(jasmine.objectContaining({
+ 'nav-icon': true,
+ 'icon-ban': true
+ }));
+ expect(service.getIconClass({ icon: 'icon-ban' })).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
+ expect(service.getIconClass({ icon: '' })).toEqual(jasmine.objectContaining({ 'nav-icon': true }));
});
});
diff --git a/projects/coreui-angular/src/lib/sidebar/sidebar-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 748ed2a4..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,36 +1,35 @@
-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.
*/
@Directive({
selector: '[cSidebarToggle]',
- exportAs: 'cSidebarToggle'
+ exportAs: 'cSidebarToggle',
+ 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 fa0321dd..00000000
--- a/projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
- selector: 'c-sidebar-toggler',
- template: ``,
-})
-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 3255d196..1cf1d4d1 100644
--- a/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts
+++ b/projects/coreui-angular/src/lib/sidebar/sidebar.module.ts
@@ -1,20 +1,14 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import { IconModule } from '@coreui/icons-angular';
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';
-import { SharedModule } from '../shared';
-
import {
SidebarNavBadgePipe,
SidebarNavComponent,
@@ -30,19 +24,16 @@ import {
SidebarNavTitleComponent
} from './sidebar-nav';
-
-
@NgModule({
- declarations: [
+ imports: [
SidebarComponent,
- SidebarTogglerComponent,
- SidebarToggleDirective,
SidebarBrandComponent,
- SidebarNavBadgePipe,
+ SidebarFooterComponent,
+ SidebarHeaderComponent,
SidebarNavComponent,
+ SidebarNavBadgePipe,
SidebarNavDividerComponent,
SidebarNavGroupComponent,
- // SidebarNavGroupToggleDirective,
SidebarNavIconPipe,
SidebarNavItemClassPipe,
SidebarNavLabelComponent,
@@ -50,28 +41,22 @@ import {
SidebarNavLinkContentComponent,
SidebarNavLinkPipe,
SidebarNavTitleComponent,
- SidebarHeaderComponent,
- SidebarFooterComponent,
- ],
- imports: [
- CommonModule,
- RouterModule,
- SharedModule,
- IconModule
+ SidebarToggleDirective,
+ SidebarTogglerDirective
],
exports: [
SidebarComponent,
SidebarToggleDirective,
- SidebarTogglerComponent,
+ SidebarTogglerDirective,
SidebarBrandComponent,
SidebarNavComponent,
SidebarHeaderComponent,
- SidebarFooterComponent,
+ SidebarFooterComponent
],
providers: [
SidebarService,
SidebarNavHelper,
SidebarNavGroupService
- ],
+ ]
})
-export class SidebarModule { }
+export class SidebarModule {}
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 1f932e20..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
@@ -8,9 +8,9 @@ describe('SidebarComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ SidebarComponent ]
+ imports: [SidebarComponent]
})
- .compileComponents();
+ .compileComponents();
});
beforeEach(() => {
@@ -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 fb4d07ad..7c73d812 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,
+ effect,
+ inject,
+ input,
+ linkedSignal,
OnChanges,
OnDestroy,
OnInit,
- Output,
+ output,
Renderer2,
+ 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,151 +24,186 @@ import { SidebarBackdropService } from '../sidebar-backdrop/sidebar-backdrop.ser
@Component({
selector: 'c-sidebar',
exportAs: 'cSidebar',
- template: '',
+ template: '',
+ host: {
+ class: 'sidebar',
+ '[class]': 'hostClasses()',
+ '[attr.inert]': '!this.sidebarState.visible || null'
+ }
})
export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
+ readonly #document = inject(DOCUMENT);
+ readonly #renderer = inject(Renderer2);
+ readonly #breakpointObserver = inject(BreakpointObserver);
+ readonly #sidebarService = inject(SidebarService);
+ readonly #backdropService = inject(SidebarBackdropService);
- static ngAcceptInputType_narrow: BooleanInput;
- static ngAcceptInputType_overlaid: BooleanInput;
- static ngAcceptInputType_unfoldable: BooleanInput;
- static ngAcceptInputType_visible: BooleanInput;
-
- private _narrow = false;
- private _overlaid = false;
- private _unfoldable = false;
- private _visible = false;
- private onMobile = false;
- private layoutChangeSubscription!: Subscription;
- private stateToggleSubscription!: Subscription;
+ #onMobile = false;
+ #layoutChangeSubscription!: Subscription;
+ #stateToggleSubscription!: Subscription;
- state: ISidebarAction = {
+ readonly state = signal({
sidebar: this
+ });
+
+ #stateInitial = {
+ narrow: false,
+ visible: false,
+ unfoldable: false
};
/**
- * Sets html attribute id. [docs]
- *
- * @type string
+ * Sets if the color of text should be colored for a light or dark background.
+ * @return 'dark' | 'light'
*/
- @Input() id?: string;
+ readonly colorScheme = input<'dark' | 'light'>();
/**
- * Make sidebar narrow. [docs]
- * @type boolean
+ * Sets html attribute id.
+ * @return string
*/
- @Input()
- set narrow(value: boolean) {
- this._narrow = coerceBooleanProperty(value);
+ readonly id = input();
+
+ /**
+ * Make sidebar narrow.
+ * @return boolean
+ * @default false
+ */
+ readonly narrowInput = input(false, { transform: booleanAttribute, alias: 'narrow' });
+
+ readonly #narrow = linkedSignal(this.narrowInput);
+
+ set narrow(value) {
+ this.#narrow.set(value);
}
+
get narrow() {
- return this._narrow;
+ return this.#narrow();
}
/**
* Set sidebar to overlaid variant.
- * @type boolean
+ * @return boolean
+ * @default false
*/
- @Input()
- set overlaid(value: boolean) {
- this._overlaid = coerceBooleanProperty(value);
- }
- get overlaid() {
- return this._overlaid;
- }
+ readonly overlaid = input(false, { transform: booleanAttribute });
+
+ /**
+ * Components placement, there’s no default placement.
+ * @return 'start' | 'end'
+ */
+ readonly placement = input<'start' | 'end'>();
/**
- * Place sidebar in non-static positions. [docs]
+ * Place sidebar in non-static positions.
+ * @return 'fixed' | 'sticky'
* @default 'fixed'
*/
- @Input() position: 'fixed' | 'sticky' = 'fixed';
+ readonly position = input<'fixed' | 'sticky'>('fixed');
/**
- * Size the component small, large, or extra large. [docs]
+ * Size the component small, large, or extra large.
+ * @return 'sm' | 'lg' | 'xl'
*/
- @Input() size?: 'sm' | 'lg' | 'xl';
+ readonly size = input<'sm' | 'lg' | 'xl'>();
/**
- * Expand narrowed sidebar on hover. [docs]
+ * Expand narrowed sidebar on hover.
+ * @type boolean
+ * @default false
*/
- @Input()
- set unfoldable(value: boolean) {
- this._unfoldable = coerceBooleanProperty(value);
- }
- get unfoldable() {
- return this._unfoldable;
- }
+ readonly unfoldableInput = input(false, { transform: booleanAttribute, alias: 'unfoldable' });
+
+ readonly unfoldable = linkedSignal({
+ source: this.unfoldableInput,
+ computation: (value) => value
+ });
/**
- * Toggle the visibility of sidebar component. [docs]
+ * Toggle the visibility of sidebar component.
+ * @type boolean
+ * @default false
*/
- @Input()
+ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+
+ readonly #visible = linkedSignal(this.visibleInput);
+
+ readonly #visibleEffect = effect(() => {
+ this.visibleChange.emit(this.#visible());
+ });
+
set visible(value: boolean) {
- this._visible = coerceBooleanProperty(value);
- this.visibleChange.emit(this._visible);
+ this.#visible.set(value);
}
+
get visible() {
- return this._visible;
+ return this.#visible();
}
/**
- * Event emitted on visibility change. [docs]
- * @type boolean
+ * Event emitted on visibility change.
+ * @return boolean
*/
- @Output() visibleChange = new EventEmitter();
+ readonly visibleChange = output();
set sidebarState(value: ISidebarAction) {
const newState = value;
if ('toggle' in newState) {
if (newState.toggle === 'visible') {
- newState.visible = !this.state.visible;
- this.visible = newState.visible && !this.overlaid;
+ newState.visible = !this.state().visible;
+ this.#visible.set(newState.visible);
} else if (newState.toggle === 'unfoldable') {
- newState.unfoldable = !this.state.unfoldable;
- this.unfoldable = newState.unfoldable;
+ newState.unfoldable = !this.state().unfoldable;
+ this.unfoldable.set(newState.unfoldable);
}
+ } else {
+ this.#visible.update((visible) => (newState.visible ?? visible) && !this.overlaid());
}
- this.state = {
- ...this.state,
- ...newState
- };
- this.state.mobile && this.state.visible ? this.backdropService.setBackdrop(this) : this.backdropService.clearBackdrop();
+ this.state.update((state) => ({ ...state, ...newState }));
+ this.state().mobile && this.state().visible
+ ? this.#backdropService.setBackdrop(this)
+ : this.#backdropService.clearBackdrop();
}
get sidebarState(): ISidebarAction {
- return this.state;
+ return { ...this.state() };
}
get getMobileBreakpoint(): string {
- const element = this.document.firstElementChild;
- const mobileBreakpoint = getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint') || 'md';
- const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`) || '768px';
- return `${parseFloat(breakpointValue.trim()) - .02}px` || '767.98px';
+ const element: Element = this.#document.documentElement;
+ const mobileBreakpoint =
+ this.#document.defaultView?.getComputedStyle(element)?.getPropertyValue('--cui-mobile-breakpoint') ?? 'md';
+ const breakpointValue =
+ this.#document.defaultView
+ ?.getComputedStyle(element)
+ ?.getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`) ?? '768px';
+ return `${parseFloat(breakpointValue.trim()) - 0.02}px`;
}
- constructor(
- @Inject(DOCUMENT) private document: any,
- private renderer: Renderer2,
- private breakpointObserver: BreakpointObserver,
- private sidebarService: SidebarService,
- private backdropService: SidebarBackdropService
- ) {
- this.backdropService.renderer = renderer;
+ constructor() {
+ this.#backdropService.renderer = this.#renderer;
}
- @HostBinding('class')
- get getClasses(): any {
- const {mobile, unfoldable, visible} = this.sidebarState;
+ readonly hostClasses = computed(() => {
+ const { mobile, visible } = { ...this.sidebarState };
+ const unfoldable = this.unfoldable();
+ const placement = this.placement();
+ const colorScheme = this.colorScheme();
+ const size = this.size();
return {
sidebar: true,
- 'sidebar-fixed': this.position === 'fixed' && !mobile,
- 'sidebar-narrow': this.narrow && !this.unfoldable,
+ 'sidebar-fixed': this.position() === 'fixed' && !mobile,
+ 'sidebar-narrow': this.#narrow() && !unfoldable,
'sidebar-narrow-unfoldable': unfoldable,
- 'sidebar-overlaid': this.overlaid,
- [`sidebar-${this.size}`]: !!this.size,
- show: visible && this.onMobile,
- hide: !visible && !this.onMobile
+ 'sidebar-overlaid': this.overlaid(),
+ [`sidebar-${placement}`]: !!placement,
+ [`sidebar-${colorScheme}`]: !!colorScheme,
+ [`sidebar-${size}`]: !!size,
+ show: visible,
+ // show: visible && this.#onMobile, //todo: check
+ hide: !visible
};
- }
+ });
ngOnInit(): void {
this.setInitialState();
@@ -180,7 +217,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
}
ngOnChanges(changes: SimpleChanges): void {
- const oldStateMap = new Map(Object.entries(this.state));
+ const oldStateMap = new Map(Object.entries(this.state()));
const newStateMap = new Map();
newStateMap.set('sidebar', this);
@@ -189,7 +226,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
for (const propName in changes) {
if (propList.includes(propName)) {
if (changes[propName] && !changes[propName].firstChange) {
- const value = coerceBooleanProperty(changes[propName].currentValue);
+ const value = booleanAttribute(changes[propName].currentValue);
if (oldStateMap.get(propName) !== value) {
newStateMap.set(propName, value);
}
@@ -199,28 +236,31 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
if (newStateMap.size > 1) {
const state = Object.fromEntries(newStateMap.entries());
- this.sidebarService.toggle(state);
+ this.#sidebarService.toggle(state);
}
}
setInitialState(): void {
- this.sidebarService.toggle({
- narrow: this.narrow,
- visible: this.visible,
- unfoldable: this.unfoldable,
+ this.#stateInitial = {
+ narrow: this.#narrow(),
+ visible: this.#visible(),
+ unfoldable: this.unfoldable()
+ };
+ this.#sidebarService.toggle({
+ ...this.#stateInitial,
sidebar: this
});
}
private stateToggleSubscribe(subscribe: boolean = true): void {
if (subscribe) {
- this.stateToggleSubscription = this.sidebarService.sidebarState$.subscribe((state) => {
- if (this === state.sidebar || this.id === state.id) {
- this.sidebarState = state;
+ this.#stateToggleSubscription = this.#sidebarService.sidebarState$.subscribe((state) => {
+ if (this === state.sidebar || this.id() === state.id) {
+ this.sidebarState = { ...state };
}
});
} else {
- this.stateToggleSubscription.unsubscribe();
+ this.#stateToggleSubscription?.unsubscribe();
}
}
@@ -228,22 +268,23 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
const onMobile = `(max-width: ${this.getMobileBreakpoint})`;
if (subscribe) {
- const layoutChanges = this.breakpointObserver.observe([onMobile]);
+ const layoutChanges = this.#breakpointObserver.observe([onMobile]);
- this.layoutChangeSubscription = layoutChanges.subscribe((result: BreakpointState) => {
+ this.#layoutChangeSubscription = layoutChanges.subscribe((result: BreakpointState) => {
const isOnMobile = result.breakpoints[onMobile];
- if (this.onMobile !== isOnMobile) {
- this.onMobile = isOnMobile;
- this.sidebarService.toggle({
+ const isUnfoldable = isOnMobile ? false : this.unfoldable();
+ if (this.#onMobile !== isOnMobile) {
+ this.#onMobile = isOnMobile;
+ this.#sidebarService.toggle({
mobile: isOnMobile,
- unfoldable: isOnMobile ? false : this.unfoldable,
- visible: isOnMobile ? false : this.visible,
+ unfoldable: isUnfoldable,
+ visible: isOnMobile ? !isOnMobile : this.#stateInitial.visible,
sidebar: this
});
}
});
} else {
- this.layoutChangeSubscription.unsubscribe();
+ this.#layoutChangeSubscription?.unsubscribe();
}
}
}
diff --git a/projects/coreui-angular/src/lib/spinner/spinner.component.html b/projects/coreui-angular/src/lib/spinner/spinner.component.html
index bcf7f99a..9cc351e5 100644
--- a/projects/coreui-angular/src/lib/spinner/spinner.component.html
+++ b/projects/coreui-angular/src/lib/spinner/spinner.component.html
@@ -1 +1,3 @@
-{{label}}
+
+ {{ label() }}
+
diff --git a/projects/coreui-angular/src/lib/spinner/spinner.component.spec.ts b/projects/coreui-angular/src/lib/spinner/spinner.component.spec.ts
index f80aad8f..43d9fff9 100644
--- a/projects/coreui-angular/src/lib/spinner/spinner.component.spec.ts
+++ b/projects/coreui-angular/src/lib/spinner/spinner.component.spec.ts
@@ -8,9 +8,9 @@ describe('SpinnerComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ SpinnerComponent ]
+ imports: [SpinnerComponent]
})
- .compileComponents();
+ .compileComponents();
}));
beforeEach(() => {
@@ -22,4 +22,8 @@ describe('SpinnerComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should have css classes', () => {
+ expect(fixture.nativeElement).toHaveClass('spinner-border');
+ });
});
diff --git a/projects/coreui-angular/src/lib/spinner/spinner.component.ts b/projects/coreui-angular/src/lib/spinner/spinner.component.ts
index 9bf5657c..10df157c 100644
--- a/projects/coreui-angular/src/lib/spinner/spinner.component.ts
+++ b/projects/coreui-angular/src/lib/spinner/spinner.component.ts
@@ -1,48 +1,54 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
import { Colors } from '../coreui.types';
@Component({
selector: 'c-spinner',
templateUrl: './spinner.component.html',
+ host: {
+ '[attr.role]': 'role()',
+ '[class]': 'hostClasses()'
+ }
})
export class SpinnerComponent {
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
* @type Colors
*/
- @Input() color?: Colors;
+ readonly color = input();
/**
* Label for accessibility.
* @type string
* @default 'Loading...'
*/
- @Input() label: string = "Loading...";
+ readonly label = input('Loading...');
/**
* Size the component small.
* @type string
* @values 'sm'
*/
- @Input() size?: 'sm';
+ readonly size = input<'sm'>();
/**
* Set the button variant to an outlined button or a ghost button.
* @values 'border' | 'grow'
* @default 'border'
*/
- @Input() variant?: 'border' | 'grow' = 'border';
-
- @Input()
- @HostBinding('attr.role') role = 'status';
+ readonly variant = input<'border' | 'grow'>('border');
+ /**
+ * Default role attr for Spinner. [docs]
+ * @type string
+ * @default 'status'
+ */
+ readonly role = input('status');
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
- [`spinner-${this.variant}`]: true,
- [`text-${this.color}`]: !!this.color,
- [`spinner-${this.variant}-${this.size}`]: !!this.size
- };
- }
+ [`spinner-${this.variant()}`]: true,
+ [`text-${this.color()}`]: !!this.color(),
+ [`spinner-${this.variant()}-${this.size()}`]: !!this.size()
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/spinner/spinner.module.ts b/projects/coreui-angular/src/lib/spinner/spinner.module.ts
index 62711164..4dceeaef 100644
--- a/projects/coreui-angular/src/lib/spinner/spinner.module.ts
+++ b/projects/coreui-angular/src/lib/spinner/spinner.module.ts
@@ -1,19 +1,13 @@
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
import { SpinnerComponent } from './spinner.component';
-import {SharedModule} from '../shared';
@NgModule({
- declarations: [
- SpinnerComponent
- ],
exports: [
SpinnerComponent
],
imports: [
- CommonModule,
- SharedModule
+ SpinnerComponent
]
})
-export class SpinnerModule { }
+export class SpinnerModule {}
diff --git a/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts b/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
index 244f205b..0dc9649f 100644
--- a/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/table/table-active.directive.spec.ts
@@ -1,8 +1,48 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { TableActiveDirective } from './table-active.directive';
+@Component({
+ imports: [TableActiveDirective],
+ template: ` |
`
+})
+class TestComponent {
+ active = false;
+}
+
describe('TableActiveDirective', () => {
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
+ let directive: TableActiveDirective;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestComponent]
+ });
+ fixture = TestBed.createComponent(TestComponent);
+ debugElement = fixture.debugElement.query(By.directive(TableActiveDirective));
+ directive = debugElement.injector.get(TableActiveDirective);
+ fixture.detectChanges();
+ });
+
it('should create an instance', () => {
- const directive = new TableActiveDirective();
expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new TableActiveDirective();
+ expect(directive).toBeTruthy();
+ });
+ });
+
+ it('should add class "table-active" when active is true', () => {
+ fixture.componentInstance.active = true;
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.classList).toContain('table-active');
+ });
+
+ it('should not add class "table-active" when active is false', () => {
+ fixture.componentInstance.active = false;
+ fixture.detectChanges();
+ expect(debugElement.nativeElement.classList).not.toContain('table-active');
});
});
diff --git a/projects/coreui-angular/src/lib/table/table-active.directive.ts b/projects/coreui-angular/src/lib/table/table-active.directive.ts
index 74e6803b..25397c75 100644
--- a/projects/coreui-angular/src/lib/table/table-active.directive.ts
+++ b/projects/coreui-angular/src/lib/table/table-active.directive.ts
@@ -1,34 +1,16 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
@Directive({
- selector: '[cTableActive]'
+ selector: '[cTableActive]',
+ exportAs: 'cTableActive',
+ host: {
+ '[class.table-active]': 'active()'
+ }
})
export class TableActiveDirective {
-
- static ngAcceptInputType_active: BooleanInput;
-
/**
* Highlight a table row or cell
- * @type boolean
+ * @return boolean
*/
- @Input('cTableActive')
- set active(value: boolean) {
- this._active = coerceBooleanProperty(value);
- };
- get active() {
- return this._active;
- };
-
- private _active = false;
-
- @HostBinding('class')
- get hostClasses(): any {
- return {
- 'table-active': this.active,
- };
- }
-
- constructor() { }
-
+ readonly active = input(false, { alias: "cTableActive", transform: booleanAttribute });
}
diff --git a/projects/coreui-angular/src/lib/table/table-color.directive.spec.ts b/projects/coreui-angular/src/lib/table/table-color.directive.spec.ts
index f2807dc1..ee2664b2 100644
--- a/projects/coreui-angular/src/lib/table/table-color.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/table/table-color.directive.spec.ts
@@ -1,8 +1,11 @@
+import { TestBed } from '@angular/core/testing';
import { TableColorDirective } from './table-color.directive';
describe('TableColorDirective', () => {
it('should create an instance', () => {
- const directive = new TableColorDirective();
- expect(directive).toBeTruthy();
+ TestBed.runInInjectionContext(() => {
+ const directive = new TableColorDirective();
+ expect(directive).toBeTruthy();
+ });
});
});
diff --git a/projects/coreui-angular/src/lib/table/table-color.directive.ts b/projects/coreui-angular/src/lib/table/table-color.directive.ts
index 0e3392d7..6223252a 100644
--- a/projects/coreui-angular/src/lib/table/table-color.directive.ts
+++ b/projects/coreui-angular/src/lib/table/table-color.directive.ts
@@ -1,21 +1,24 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
import { Colors } from '../coreui.types';
@Directive({
- selector: '[cTableColor]'
+ selector: '[cTableColor]',
+ exportAs: 'cTableColor',
+ host: {
+ '[class]': 'hostClasses()'
+ }
})
export class TableColorDirective {
-
/**
* Use contextual color for tables, table rows or individual cells.
- * @type Colors
+ * @return Colors
*/
- @Input('cTableColor') color?: Colors;
+ readonly color = input(undefined, { alias: 'cTableColor' });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const color = this.color();
return {
- [`table-${this.color}`]: !!this.color,
- };
- }
+ [`table-${color}`]: !!color
+ } as Record
