refactor(modal): signal inputs, host bindings, cleanup, tests

Author: xidedix

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

@@ -1,21 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentRef } from '@angular/core';
 
 import { ModalDialogComponent } from './modal-dialog.component';
 
 describe('ModalDialogComponent', () => {
   let component: ModalDialogComponent;
+  let componentRef: ComponentRef<ModalDialogComponent>;
   let fixture: ComponentFixture<ModalDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalDialogComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ModalDialogComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     fixture.detectChanges();
   });
 
@@ -26,4 +28,54 @@ describe('ModalDialogComponent', () => {
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('modal-dialog');
   });
+
+  it('should have css classes for alignment prop', () => {
+    componentRef.setInput('alignment', 'center');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('modal-dialog-centered');
+    componentRef.setInput('alignment', 'top');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('modal-dialog-centered');
+    expect(fixture.nativeElement).toHaveClass('modal-dialog');
+  });
+
+  it('should have css classes for fullscreen prop', () => {
+    componentRef.setInput('fullscreen', true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('modal-fullscreen');
+    for (const size of ['sm', 'md', 'lg', 'xl', 'xxl']) {
+      componentRef.setInput('fullscreen', size);
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveClass(`modal-fullscreen-${size}-down`);
+    }
+    componentRef.setInput('fullscreen', false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('modal-fullscreen');
+    expect(fixture.nativeElement).toHaveClass('modal-dialog');
+  });
+
+  it('should have css classes for scrollable prop', () => {
+    expect(fixture.nativeElement).not.toHaveClass('modal-dialog-scrollable');
+    componentRef.setInput('scrollable', true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('modal-dialog-scrollable');
+    componentRef.setInput('scrollable', false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('modal-dialog-scrollable');
+    expect(fixture.nativeElement).toHaveClass('modal-dialog');
+  });
+
+  it('should have css classes for size prop', () => {
+    for (const size of ['sm', 'lg', 'xl']) {
+      componentRef.setInput('size', size);
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveClass(`modal-${size}`);
+    }
+    componentRef.setInput('size', undefined);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('modal-sm');
+    expect(fixture.nativeElement).not.toHaveClass('modal-lg');
+    expect(fixture.nativeElement).not.toHaveClass('modal-xl');
+    expect(fixture.nativeElement).toHaveClass('modal-dialog');
+  });
 });

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

@@ -1,41 +1,48 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'c-modal-dialog',
   template: '<ng-content />',
   styleUrls: ['./modal-dialog.component.scss'],
-  host: { class: 'modal-dialog' }
+  host: { class: 'modal-dialog', '[class]': 'hostClasses()' }
 })
 export class ModalDialogComponent {
   /**
    * Align the modal in the center or top of the screen.
-   * @type {'top' | 'center'}
+   * @default undefined
    */
-  @Input() alignment?: 'top' | 'center';
+  readonly alignment = input<'top' | 'center'>();
+
   /**
    * Set modal to covers the entire user viewport.
-   * @type {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
+   * @return {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
    */
-  @Input() fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  readonly fullscreen = input<boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
+
   /**
    * Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
-   * @type boolean
+   * @default false
+   * @return {boolean}
    */
-  @Input() scrollable?: boolean;
+  readonly scrollable = input(false, { transform: booleanAttribute });
+
   /**
    * Size the component small, large, or extra large.
+   * @default undefined
+   * @return {'sm' | 'lg' | 'xl'}
    */
-  @Input() size?: 'sm' | 'lg' | 'xl';
+  readonly size = input<'sm' | 'lg' | 'xl'>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const fullscreen = this.fullscreen();
+    const size = this.size();
     return {
       'modal-dialog': true,
-      'modal-dialog-centered': this.alignment === 'center',
-      'modal-fullscreen': this.fullscreen === true,
-      [`modal-fullscreen-${this.fullscreen}-down`]: this.fullscreen,
-      'modal-dialog-scrollable': this.scrollable,
-      [`modal-${this.size}`]: this.size
+      'modal-dialog-centered': this.alignment() === 'center',
+      'modal-fullscreen': fullscreen === true,
+      [`modal-fullscreen-${fullscreen}-down`]: typeof fullscreen === 'string',
+      'modal-dialog-scrollable': this.scrollable(),
+      [`modal-${size}`]: !!size
     };
-  }
+  });
 }

projects/coreui-angular/src/lib/modal/modal-dismiss/modal-toggle.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostListener, inject, Input } from '@angular/core';
+import { Directive, HostListener, inject, input } from '@angular/core';
 
 import { ModalService } from '../modal.service';
 
@@ -10,12 +10,13 @@ export class ModalToggleDirective {
 
   /**
    * Html id attr of modal to dismiss.
+   * @default undefined
    */
-  @Input('cModalToggle') id: string | undefined;
+  readonly toggle = input<string>(undefined, { alias: 'cModalToggle' });
 
   @HostListener('click', ['$event'])
   dismiss($event: any): void {
     $event.preventDefault();
-    this.#modalService.toggle({ show: 'toggle', id: this.id });
+    this.#modalService.toggle({ show: 'toggle', id: this.toggle() });
   }
 }

projects/coreui-angular/src/lib/modal/modal.service.ts

@@ -12,10 +12,10 @@ export interface IModalAction {
   providedIn: 'root'
 })
 export class ModalService {
-  private modalState = new Subject<any>();
-  modalState$ = this.modalState.asObservable();
+  readonly #modalState = new Subject<any>();
+  readonly modalState$ = this.#modalState.asObservable();
 
   toggle(action: IModalAction): void {
-    this.modalState.next(action);
+    this.#modalState.next(action);
   }
 }

projects/coreui-angular/src/lib/modal/modal/modal.component.html

@@ -1,8 +1,8 @@
 <c-modal-dialog
-  [alignment]="alignment"
-  [fullscreen]="fullscreen"
-  [scrollable]="scrollable"
-  [size]="size">
+  [alignment]="alignment()"
+  [fullscreen]="fullscreen()"
+  [scrollable]="scrollable()"
+  [size]="size()">
   <c-modal-content>
     <div [cdkTrapFocus]="visible" [cdkTrapFocusAutoCapture]="visible" style="display: contents;" #modalContentRef>
       <ng-content />