diff --git a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts index b52f4237..32c03ed2 100644 --- a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts +++ b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts @@ -9,8 +9,7 @@ describe('ModalBodyComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ModalBodyComponent] - }) - .compileComponents(); + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts index 98d1adf6..cb0f4aaf 100644 --- a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts +++ b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts @@ -7,11 +7,10 @@ import { Component, HostBinding } from '@angular/core'; standalone: true }) export class ModalBodyComponent { - @HostBinding('class') get hostClasses(): any { return { - 'modal-body': true, + 'modal-body': true }; } } diff --git a/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts index ac6dad05..ef006d95 100644 --- a/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts +++ b/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts @@ -9,8 +9,7 @@ describe('ModalContentComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ModalContentComponent] - }) - .compileComponents(); + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts index 8a064e29..bf1d06d2 100644 --- a/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts +++ b/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts @@ -9,8 +9,7 @@ describe('ModalDialogComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ModalDialogComponent] - }) - .compileComponents(); + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts index 9c4d0279..045091bb 100644 --- a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts +++ b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts @@ -9,8 +9,7 @@ describe('ModalFooterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ModalFooterComponent] - }) - .compileComponents(); + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts index eca43fba..8cebd49b 100644 --- a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts +++ b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts @@ -6,12 +6,10 @@ import { Component, HostBinding } from '@angular/core'; standalone: true }) export class ModalFooterComponent { - @HostBinding('class') get hostClasses(): any { return { - 'modal-footer': true, + 'modal-footer': true }; } - } diff --git a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts index 4c259a4b..6c4bbf41 100644 --- a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts +++ b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts @@ -9,8 +9,7 @@ describe('ModalHeaderComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ModalHeaderComponent] - }) - .compileComponents(); + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts index 15ff2149..66f10340 100644 --- a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts +++ b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts @@ -6,12 +6,10 @@ import { Component, HostBinding } from '@angular/core'; standalone: true }) export class ModalHeaderComponent { - @HostBinding('class') get hostClasses(): any { return { 'modal-header': true }; } - } 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 4ef8e491..892492e9 100644 --- a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts +++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts @@ -54,7 +54,6 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component'; imports: [ModalDialogComponent, ModalContentComponent, A11yModule] }) export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { - #destroyRef = inject(DestroyRef); #focusMonitor = inject(FocusMonitor); @@ -64,7 +63,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { private hostElement: ElementRef, private modalService: ModalService, private backdropService: BackdropService - ) { } + ) {} /** * Align the modal in the center or top of the screen. @@ -110,14 +109,15 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { * @type boolean * @default null */ - @Input() @HostBinding('attr.aria-modal') + @Input() + @HostBinding('attr.aria-modal') set ariaModal(value: boolean | null) { this.#ariaModal = value; } get ariaModal(): boolean | null { return this.visible || this.#ariaModal ? true : null; - }; + } #ariaModal: boolean | null = null; @@ -154,8 +154,12 @@ export class ModalComponent implements OnInit, OnDestroy, 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])'); - this.#focusMonitor.focusVia(focusable[0], 'keyboard'); + 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)) { @@ -191,7 +195,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { @HostBinding('attr.aria-hidden') get ariaHidden(): boolean | null { return this.visible ? null : true; - }; + } @HostBinding('attr.tabindex') get tabIndex(): string | null { @@ -255,7 +259,6 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { @HostListener('click', ['$event']) public onClickHandler($event: MouseEvent): void { - if (this.mouseDownTarget !== $event.target) { this.mouseDownTarget = null; return; @@ -263,7 +266,6 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { const targetElement = $event.target; if (targetElement === this.hostElement.nativeElement) { - if (this.backdrop === 'static') { this.setStaticBackdrop(); return; @@ -289,27 +291,23 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { } 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 { - if (this.visible) { - this.visible = false; - } - } + 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 { + if (this.visible) { + this.visible = false; } - ); + } + }); } private setBackdrop(setBackdrop: boolean): void { - this.#activeBackdrop = setBackdrop ? this.backdropService.setBackdrop('modal') : this.backdropService.clearBackdrop(this.#activeBackdrop); + this.#activeBackdrop = setBackdrop + ? this.backdropService.setBackdrop('modal') + : this.backdropService.clearBackdrop(this.#activeBackdrop); } private setBodyStyles(open: boolean): void {