fix(modal): attempt to focus when there is no focusable element on modal dialog

Author: xidedix

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(() => {
@@ -22,4 +21,8 @@ describe('ModalBodyComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('modal-body');
+  });
 });

projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts

@@ -2,16 +2,15 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-modal-body',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./modal-body.component.scss'],
   standalone: true
 })
 export class ModalBodyComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'modal-body': true,
+      'modal-body': true
     };
   }
 }

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(() => {
@@ -22,4 +21,8 @@ describe('ModalContentComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('modal-content');
+  });
 });

projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-modal-content',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class ModalContentComponent {

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(() => {
@@ -22,4 +21,8 @@ describe('ModalDialogComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('modal-dialog');
+  });
 });

projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-modal-dialog',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./modal-dialog.component.scss'],
   standalone: true
 })

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(() => {
@@ -22,4 +21,8 @@ describe('ModalFooterComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('modal-footer');
+  });
 });

projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts

@@ -2,16 +2,14 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-modal-footer',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class ModalFooterComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'modal-footer': true,
+      'modal-footer': true
     };
   }
-
 }

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(() => {
@@ -22,4 +21,8 @@ describe('ModalHeaderComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(fixture.nativeElement).toHaveClass('modal-header');
+  });
 });

projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts

@@ -2,16 +2,14 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-modal-header',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class ModalHeaderComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'modal-header': true
     };
   }
-
 }