feat(modal): allow any string as modal size option

Size type now incudes 'string' and changes to `size?: 'sm' | 'lg' | 'xl' | string;`

Fixes #3013

demo/src/app/components/modal/demos/options/modal-options.ts

@@ -39,7 +39,9 @@ export class NgbdModalOptions {
     this.modalService.open(content, { size: 'lg' });
   }
 
-  openXl(content) { this.modalService.open(content, {size: 'xl'}); }
+  openXl(content) {
+    this.modalService.open(content, { size: 'xl' });
+  }
 
   openVerticallyCentered(content) {
     this.modalService.open(content, { centered: true });

src/modal/modal-config.ts

@@ -70,7 +70,7 @@ export interface NgbModalOptions {
   /**
    * Size of a new modal window.
    */
-  size?: 'sm' | 'lg' | 'xl';
+  size?: 'sm' | 'lg' | 'xl' | string;
 
   /**
    * A custom class to append to the modal window.
@@ -103,7 +103,7 @@ export class NgbModalConfig implements Required<NgbModalOptions> {
   injector: Injector;
   keyboard = true;
   scrollable: boolean;
-  size: 'sm' | 'lg' | 'xl';
+  size: 'sm' | 'lg' | 'xl' | string;
   windowClass: string;
   backdropClass: string;
 }

src/modal/modal.spec.ts

@@ -482,6 +482,17 @@ describe('ngb-modal', () => {
         expect(fixture.nativeElement).not.toHaveModal();
       });
 
+      it('should accept any strings as modal size', () => {
+        const modalInstance = fixture.componentInstance.open('foo', {size: 'ginormous'});
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveModal('foo');
+        expect(document.querySelector('.modal-dialog')).toHaveCssClass('modal-ginormous');
+
+        modalInstance.close();
+        fixture.detectChanges();
+        expect(fixture.nativeElement).not.toHaveModal();
+      });
+
     });
 
     describe('window custom class options', () => {