+ @let isVisible = visible();
+
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 35f0b0f4..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
@@ -27,4 +27,14 @@ describe('ModalComponent', () => {
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 3242badd..f5829c03 100644
--- a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
+++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
@@ -1,27 +1,27 @@
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { DOCUMENT } from '@angular/common';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
import {
AfterViewInit,
booleanAttribute,
Component,
+ computed,
DestroyRef,
+ DOCUMENT,
effect,
ElementRef,
- EventEmitter,
- HostBinding,
- HostListener,
inject,
- Input,
+ input,
+ linkedSignal,
OnDestroy,
OnInit,
- Output,
+ output,
Renderer2,
signal,
- ViewChild,
- WritableSignal
+ untracked,
+ viewChild
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { ModalService } from '../modal.service';
import { BackdropService } from '../../backdrop/backdrop.service';
@@ -50,9 +50,27 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component';
templateUrl: './modal.component.html',
exportAs: 'cModal',
imports: [ModalDialogComponent, ModalContentComponent, A11yModule],
- host: { class: 'modal' }
+ 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, AfterViewInit {
+ static ngAcceptInputType_ariaModalInput: BooleanInput;
+ static ngAcceptInputType_scrollable: BooleanInput;
+ static ngAcceptInputType_visibleInput: BooleanInput;
+
readonly #document = inject
(DOCUMENT);
readonly #renderer = inject(Renderer2);
readonly #hostElement = inject(ElementRef);
@@ -64,187 +82,188 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
/**
* 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({ transform: booleanAttribute }) keyboard: boolean = true;
+ readonly keyboard = input(true, { transform: booleanAttribute });
+
+ readonly attrId = input(undefined, { alias: 'id' });
- @Input() id?: string;
+ 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({ transform: booleanAttribute }) 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: string = 'dialog';
+ readonly role = input('dialog');
/**
- * Set aria-modal html attr for modal. [docs]
+ * Set aria-modal html attr for modal
* @type boolean
* @default null
*/
- @Input()
- @HostBinding('attr.aria-modal')
- set ariaModal(value: boolean | null) {
- this.#ariaModal = value;
- }
-
- get ariaModal(): boolean | null {
- return this.visible || this.#ariaModal ? true : null;
- }
+ readonly ariaModalInput = input(false, { transform: booleanAttribute, alias: 'ariaModal' });
- #ariaModal: boolean | null = null;
+ 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({ transform: booleanAttribute }) scrollable: boolean = false;
+ readonly scrollable = input(false, { transform: booleanAttribute });
/**
* Toggle the visibility of modal component.
- * @type boolean
+ * @return boolean
+ * @default false
*/
- @Input({ transform: booleanAttribute })
- set visible(value: boolean) {
- if (this.#visible() !== value) {
- this.#visible.set(value);
- this.setBackdrop(this.backdrop !== false && value);
- this.setBodyStyles(value);
- this.visibleChange.emit(value);
- }
- }
+ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
- get visible(): boolean {
- return this.#visible();
- }
+ readonly visible = linkedSignal(this.visibleInput);
- readonly #visible: WritableSignal = signal(false);
+ readonly #visibleInputEffect = effect(() => {
+ const visible = this.visible();
+ untracked(() => {
+ this.setBodyStyles(visible);
+ this.setBackdrop(this.backdrop() !== false && visible);
+ this.visibleChange?.emit(visible);
+ });
+ });
- #activeElement: HTMLElement | null = null;
+ readonly #activeElement = signal(null);
readonly #visibleEffect = effect(() => {
- if (this.#visible() && this.#afterViewInit()) {
- this.#activeElement = 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 {
- if (this.#document.contains(this.#activeElement)) {
+ const visible = this.visible();
+ const afterViewInit = this.#afterViewInit();
+ untracked(() => {
+ if (visible && afterViewInit) {
+ this.#activeElement.set(this.#document.activeElement as HTMLElement);
+ // this.#activeElement()?.blur();
setTimeout(() => {
- this.#activeElement?.focus();
- this.#activeElement = null;
+ 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;
- @ViewChild('modalContentRef', { read: ElementRef }) modalContentRef!: ElementRef;
+ // @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;
+ return this.visible() ? null : true;
}
- @HostBinding('attr.tabindex')
- get tabIndex(): string | null {
- return '-1';
- }
-
- @HostBinding('@showHide')
- get animateTrigger(): string {
- return this.visible ? 'visible' : 'hidden';
- }
+ readonly animateTrigger = computed(() => {
+ return this.visible() ? 'visible' : 'hidden';
+ });
get show(): boolean {
- return this.visible && this._show;
+ return this.visible() && this.#show();
}
set show(value: boolean) {
- this._show = value;
+ this.#show.set(value);
}
- private _show = true;
+ readonly #show = signal(true);
- @HostListener('@showHide.start', ['$event'])
animateStart(event: AnimationEvent) {
if (event.toState === 'visible') {
this.#backdropService.hideScrollbar();
this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'block');
} else {
- if (!this.transition) {
+ 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.#backdropService.resetScrollbar();
}
});
- this.show = this.visible;
+ 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 });
@@ -254,12 +273,10 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
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;
@@ -268,7 +285,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
const targetElement = $event.target;
if (targetElement === this.#hostElement.nativeElement) {
- if (this.backdrop === 'static') {
+ if (this.backdrop() === 'static') {
this.setStaticBackdrop();
return;
}
@@ -296,11 +313,11 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
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;
+ this.visible.update((visible) => (action?.show === 'toggle' ? !visible : action.show));
}
} else {
- if (this.visible) {
- this.visible = false;
+ if (this.visible()) {
+ this.visible.set(false);
}
}
});
@@ -314,7 +331,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
private setBodyStyles(open: boolean): void {
if (open) {
- if (this.backdrop === true) {
+ if (this.backdrop() === true) {
this.#renderer.addClass(this.#document.body, 'modal-open');
}
} else {
@@ -323,7 +340,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
}
private setStaticBackdrop(): void {
- if (this.transition) {
+ if (this.transition()) {
this.#renderer.addClass(this.#hostElement.nativeElement, 'modal-static');
this.#renderer.setStyle(this.#hostElement.nativeElement, 'overflow-y', 'hidden');
setTimeout(() => {
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 8e7617a5..3d83d3fd 100644
--- a/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
+++ b/projects/coreui-angular/src/lib/nav/nav-link.directive.ts
@@ -1,58 +1,65 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, effect, input, numberAttribute } from '@angular/core';
+import { BooleanInput } from '../coreui.types';
@Directive({
- selector: '[cNavLink]'
+ 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_disabled: BooleanInput;
+
/**
* Sets .nav-link class to the host. [docs]
- * @type boolean
* @default true
*/
- @Input({ transform: booleanAttribute }) cNavLink: string | boolean = true;
+ readonly cNavLink = input(true, { transform: booleanAttribute });
/**
* Toggle the active state for the component. [docs]
- * @type boolean
+ * @default undefined
*/
- @Input() active?: boolean;
+ readonly active = input();
+
/**
* Set disabled attr for the host element. [docs]
- * @type boolean
+ * @default false
*/
- @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
+ readonly disabled = input(false, { transform: booleanAttribute });
- @HostBinding('attr.aria-current')
- get ariaCurrent(): string | null {
- return this.active ? 'page' : null;
- }
-
- @HostBinding('attr.aria-disabled')
- get isDisabled(): boolean | null {
- return this.disabled || null;
- }
+ /**
+ * The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
+ */
+ readonly tabindex = input(undefined, { transform: numberAttribute });
- @HostBinding('attr.disabled')
- get attrDisabled() {
- return this.disabled ? '' : null;
- }
+ readonly ariaCurrent = computed(() => {
+ return this.active() ? 'page' : null;
+ });
- @HostBinding('attr.tabindex')
- get getTabindex(): string | null {
- return this.disabled ? '-1' : null;
- }
+ ariaDisabled: boolean | null = null;
+ attrDisabled: boolean | string | null = null;
+ attrTabindex: number | null = null;
+ styleCursor: 'pointer' | null = null;
- @HostBinding('style.cursor')
- get getCursorStyle(): string | null {
- return this.disabled ? null : 'pointer';
- }
+ readonly #disabledEffect = effect(() => {
+ const disabled = this.disabled();
+ this.ariaDisabled = disabled || null;
+ this.attrDisabled = disabled ? '' : null;
+ this.attrTabindex = disabled ? -1 : (this.tabindex() ?? null);
+ this.styleCursor = disabled ? null : 'pointer';
+ });
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
return {
- 'nav-link': this.cNavLink,
- disabled: this.disabled,
- active: this.active
- };
- }
+ 'nav-link': this.cNavLink(),
+ disabled: this.disabled(),
+ active: this.active()
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/nav/nav.component.spec.ts b/projects/coreui-angular/src/lib/nav/nav.component.spec.ts
index f5bf5388..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,21 +1,23 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NavComponent } from './nav.component';
+import { ComponentRef } from '@angular/core';
describe('NavComponent', () => {
let component: NavComponent;
let fixture: ComponentFixture;
+ let componentRef: ComponentRef;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NavComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavComponent);
component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
fixture.detectChanges();
});
@@ -26,4 +28,60 @@ describe('NavComponent', () => {
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 48f87dbd..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'],
- host: { class: 'nav' }
+ 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' | 'underline-border'
+ * @default undefined
*/
- @Input() variant?: '' | 'tabs' | 'pills' | 'underline' | 'underline-border';
+ readonly variant = input<'tabs' | 'pills' | 'underline' | 'underline-border' | ''>();
- @HostBinding('class')
- get hostClasses(): any {
+ readonly hostClasses = computed(() => {
+ const layout = this.layout();
+ const variant = this.variant();
return {
nav: true,
- [`nav-${this.layout}`]: !!this.layout,
- [`nav-${this.variant}`]: !!this.variant
- };
- }
+ [`nav-${layout}`]: !!layout,
+ [`nav-${variant}`]: !!variant
+ } as Record;
+ });
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
index 357c5ab7..4ed6e32c 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts
@@ -1,12 +1,38 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { NavbarTogglerDirective } from './navbar-toggler.directive';
+import { By } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { CollapseDirective } from '../../collapse';
+
+class MockElementRef extends ElementRef {}
+
+@Component({
+ imports: [NavbarTogglerDirective, CollapseDirective],
+ template: `
+
+ test
+ `
+})
+class TestComponent {}
describe('NavbarTogglerDirective', () => {
+ let component: TestComponent;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
+ let debugElementCollapse: DebugElement;
+
beforeEach(() => {
TestBed.configureTestingModule({
- providers: [Renderer2, { provide: ElementRef, useValue: { nativeElement: document.createElement('button') } }]
- });
+ 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', () => {
@@ -15,4 +41,35 @@ describe('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 d0814ee3..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,4 +1,4 @@
-import { afterNextRender, Directive, ElementRef, HostListener, inject, input, Renderer2 } from '@angular/core';
+import { afterNextRender, Directive, ElementRef, inject, input, Renderer2 } from '@angular/core';
import { CollapseDirective } from '../../collapse';
@Directive({
@@ -6,7 +6,8 @@ import { CollapseDirective } from '../../collapse';
host: {
'[attr.aria-label]': 'ariaLabel()',
'[attr.type]': 'type()',
- class: 'navbar-toggler'
+ class: 'navbar-toggler',
+ '(click)': 'handleClick($event)'
}
})
export class NavbarTogglerDirective {
@@ -45,8 +46,7 @@ export class NavbarTogglerDirective {
*/
readonly ariaLabel = input('Toggle navigation');
- @HostListener('click', ['$event'])
- handleClick() {
+ handleClick($event: MouseEvent): void {
const collapseRef = this.collapseRef();
collapseRef?.toggle(!collapseRef?.visible());
}
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.html b/projects/coreui-angular/src/lib/navbar/navbar.component.html
index 86c946dd..65f69925 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.html
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.html
@@ -1,7 +1,7 @@
-
+
diff --git a/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts b/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
index 1a84402c..fbf41b8f 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.spec.ts
@@ -9,8 +9,7 @@ describe('NavbarComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [NavbarComponent]
- })
- .compileComponents();
+ }).compileComponents();
}));
beforeEach(() => {
@@ -26,4 +25,12 @@ describe('NavbarComponent', () => {
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 11c037e8..397d186b 100644
--- a/projects/coreui-angular/src/lib/navbar/navbar.component.ts
+++ b/projects/coreui-angular/src/lib/navbar/navbar.component.ts
@@ -1,32 +1,33 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
import {
AfterContentInit,
- afterRender,
+ afterEveryRender,
Component,
computed,
contentChild,
+ DOCUMENT,
ElementRef,
inject,
input,
OnDestroy,
signal
} from '@angular/core';
-import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
-import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgTemplateOutlet } from '@angular/common';
+import { Subscription } from 'rxjs';
import { CollapseDirective } from '../collapse';
import { Colors } from '../coreui.types';
import { ThemeDirective } from '../shared';
-import { Subscription } from 'rxjs';
// todo: fix container prop issue not rendering children
// todo: workaround - use
component directly in template
@Component({
- selector: 'c-navbar',
- templateUrl: './navbar.component.html',
- imports: [NgClass, NgTemplateOutlet],
- hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
- host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
+ selector: 'c-navbar',
+ templateUrl: './navbar.component.html',
+ imports: [NgTemplateOutlet],
+ hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
+ host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
})
export class NavbarComponent implements AfterContentInit, OnDestroy {
readonly #breakpointObserver = inject(BreakpointObserver);
@@ -78,7 +79,7 @@ export class NavbarComponent implements AfterContentInit, OnDestroy {
readonly computedStyle = signal('');
- readonly afterNextRenderFn = afterRender({
+ readonly #afterEveryRenderFn = afterEveryRender({
read: () => {
const expand = this.expand();
if (typeof expand === 'string') {
diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas-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-toggle/offcanvas-toggle.directive.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts
index da035e94..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,7 +1,8 @@
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';
@@ -10,22 +11,22 @@ import { OffcanvasService } from '../offcanvas.service';
template: ` `,
imports: [OffcanvasToggleDirective]
})
-class TestButtonComponent {}
+class TestComponent {}
describe('OffcanvasToggleDirective', () => {
- let component: TestButtonComponent;
- let fixture: ComponentFixture;
- let buttonEl: DebugElement;
+ let component: TestComponent;
+ let fixture: ComponentFixture;
+ let debugElement: DebugElement;
let service: OffcanvasService;
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [NoopAnimationsModule, OffcanvasToggleDirective, 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
});
@@ -36,4 +37,11 @@ describe('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 5978e76c..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,22 +1,24 @@
-import { Directive, HostListener, inject, 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;
+ 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/offcanvas.component.spec.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
index f1de0be9..d568c256 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.spec.ts
@@ -1,22 +1,24 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef, DOCUMENT } from '@angular/core';
+import { ComponentFixture, fakeAsync, flushMicrotasks, TestBed, tick } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OffcanvasComponent } from './offcanvas.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('OffcanvasComponent', () => {
let component: OffcanvasComponent;
+ let componentRef: ComponentRef;
let fixture: ComponentFixture;
+ let document: Document;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NoopAnimationsModule, OffcanvasComponent]
- })
- .compileComponents();
- });
+ }).compileComponents();
- beforeEach(() => {
fixture = TestBed.createComponent(OffcanvasComponent);
component = fixture.componentInstance;
+ componentRef = fixture.componentRef;
+ document = TestBed.inject(DOCUMENT);
fixture.detectChanges();
});
@@ -26,5 +28,48 @@ describe('OffcanvasComponent', () => {
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 b25cdcb5..2c410796 100644
--- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
+++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts
@@ -1,24 +1,25 @@
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { A11yModule } from '@angular/cdk/a11y';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { isPlatformBrowser } from '@angular/common';
import {
booleanAttribute,
Component,
+ computed,
DestroyRef,
+ DOCUMENT,
+ effect,
ElementRef,
- EventEmitter,
- HostBinding,
- HostListener,
inject,
- Input,
+ input,
+ linkedSignal,
OnDestroy,
OnInit,
- Output,
+ output,
PLATFORM_ID,
Renderer2
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { A11yModule } from '@angular/cdk/a11y';
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
@@ -52,7 +53,19 @@ let nextId = 0;
exportAs: 'cOffcanvas',
imports: [A11yModule],
hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
- host: { ngSkipHydration: 'true' }
+ host: {
+ ngSkipHydration: 'true',
+ '[@showHide]': 'this.visible() ? "visible" : "hidden"',
+ '[attr.id]': 'id()',
+ '[attr.inert]': 'ariaHidden() || null',
+ '[attr.role]': 'role()',
+ '[attr.aria-modal]': 'ariaModal()',
+ '[attr.tabindex]': 'tabIndex',
+ '[class]': 'hostClasses()',
+ '(@showHide.start)': 'animateStart($event)',
+ '(@showHide.done)': 'animateDone($event)',
+ '(document:keydown)': 'onKeyDownHandler($event)'
+ }
})
export class OffcanvasComponent implements OnInit, OnDestroy {
readonly #document = inject(DOCUMENT);
@@ -66,138 +79,133 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
/**
* Apply a backdrop on body while offcanvas is open.
- * @type boolean | 'static'
+ * @return boolean | 'static'
* @default true
*/
- @Input() backdrop: boolean | 'static' = true;
+ readonly backdrop = input(true);
/**
* Closes the offcanvas when escape key is pressed [docs]
- * @type boolean
+ * @return boolean
* @default true
*/
- @Input({ transform: booleanAttribute }) keyboard = true;
+ readonly keyboard = input(true, { transform: booleanAttribute });
/**
* Components placement, there’s no default placement.
- * @type {'start' | 'end' | 'top' | 'bottom'}
+ * @return {'start' | 'end' | 'top' | 'bottom'}
* @default 'start'
*/
- @Input() placement: string | 'start' | 'end' | 'top' | 'bottom' = 'start';
+ readonly placement = input('start');
/**
* Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
- * @type boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ * @return boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
* @default true
* @since 4.3.10
*/
- @Input() responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = true;
- @Input() id = `offcanvas-${this.placement}-${nextId++}`;
+ readonly responsive = input<(boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl') | undefined>(true);
+ readonly id = input(`offcanvas-${this.placement()}-${nextId++}`);
+
/**
* Default role for offcanvas. [docs]
- * @type string
+ * @return string
* @default 'dialog'
*/
- @Input() @HostBinding('attr.role') role = 'dialog';
+ readonly role = input