feat(modal): add method to change modal window class (valor-software#…

…4811)

Fixes valor-software#2824

* fix(test): increase code coverage

* Update modal-backdrop.component.spec.ts

* feat(modal-backdrop): added tests to modal-backdrop component

* Update modal-backdrop.component.spec.ts

* Update modal-backdrop.component.spec.ts

* Update modal-backdrop.component.spec.ts

* Update modal-backdrop.component.spec.ts

* Update modal-backdrop.component.spec.ts

* fix(files): clean up

demo/src/app/components/+modal/demos/index.ts

@@ -17,6 +17,7 @@ import { DemoModalServiceConfirmWindowComponent } from './service-confirm-window
 import { DemoModalScrollingLongContentComponent } from './scrolling-long-content/scrolling-long-content';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 import { DemoModalWithPopupsComponent } from './modal-with-popups/modal-with-popups';
+import { DemoModalServiceChangeClassComponent } from './service-options/change-class/change-class';
 
 export const DEMO_COMPONENTS = [
   DemoModalSizesComponent,
@@ -36,5 +37,6 @@ export const DEMO_COMPONENTS = [
   DemoModalServiceConfirmWindowComponent,
   DemoModalScrollingLongContentComponent,
   DemoAccessibilityComponent,
+  DemoModalServiceChangeClassComponent,
   DemoModalWithPopupsComponent
 ];

demo/src/app/components/+modal/demos/service-options/change-class/change-class.html

@@ -0,0 +1,14 @@
+<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
+
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">Modal</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    This is a modal.
+  </div>
+  <button type="button" class="btn" (click)="setModalClass()">Change width</button>
+</ng-template>

demo/src/app/components/+modal/demos/service-options/change-class/change-class.ts

@@ -0,0 +1,26 @@
+import { Component, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+
+@Component({
+  selector: 'demo-modal-change-class',
+  templateUrl: './change-class.html'
+})
+export class DemoModalServiceChangeClassComponent {
+  modalRef: BsModalRef;
+  valueWidth = false;
+  constructor(private modalService: BsModalService) {}
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(
+      template,
+      Object.assign({}, { class: 'modal-sm' })
+    );
+  }
+
+  setModalClass() {
+    this.valueWidth = !this.valueWidth;
+    const modalWidth = this.valueWidth ? 'modal-lg' : 'modal-sm';
+    this.modalRef.setClass(modalWidth);
+  }
+}

demo/src/app/components/+modal/modal-section.list.ts

@@ -7,6 +7,7 @@ import { DemoModalServiceCustomCSSClassComponent } from './demos/service-options
 import { DemoModalServiceDisableEscClosingComponent } from './demos/service-options/disable-esc-closing/disable-esc-closing';
 import { DemoModalServiceDisableBackdropComponent } from './demos/service-options/disable-backdrop/disable-backdrop';
 import { DemoModalServiceConfirmWindowComponent } from './demos/service-confirm-window/service-confirm-window';
+import { DemoModalServiceChangeClassComponent } from './demos/service-options/change-class/change-class';
 
 import { DemoModalStaticComponent } from './demos/static/static';
 import { DemoModalSizesComponent } from './demos/sizes/sizes';
@@ -146,6 +147,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/service-options/disable-backdrop/disable-backdrop.html'),
         description: `<p>There is backdrop options that you can configure.</p>`,
         outlet: DemoModalServiceDisableBackdropComponent
+      },
+      {
+        title: 'Change class',
+        anchor: 'change-class',
+        component: require('!!raw-loader?lang=typescript!./demos/service-options/change-class/change-class.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/service-options/change-class/change-class.html'),
+        description: `<p>Calling setClass method to change modal's window class</p>`,
+        outlet: DemoModalServiceChangeClassComponent
       }
     ]
   },

src/modal/bs-modal-ref.service.ts

@@ -12,4 +12,8 @@ export class BsModalRef {
    * Hides the modal
    */
   hide: () => void = Function;
+  /**
+   * Sets new class to modal window
+   */
+  setClass: (newClass: string) => void = Function;
 }

src/modal/bs-modal.service.ts

@@ -121,6 +121,9 @@ export class BsModalService {
       modalContainerRef.instance.hide();
     };
     bsModalRef.content = modalLoader.getInnerComponent() || null;
+    bsModalRef.setClass = (newClass: string) => {
+      modalContainerRef.instance.config.class = newClass;
+    };
 
     return bsModalRef;
   }

src/spec/modal-backdrop.component.spec.ts

@@ -0,0 +1,31 @@
+import { ModalBackdropComponent } from '../modal';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('ModalBackdropComponent tests', () => {
+  let fixture: ComponentFixture<ModalBackdropComponent>;
+  let component: ModalBackdropComponent;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ModalBackdropComponent]
+    });
+    fixture = TestBed.createComponent(ModalBackdropComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should get and set isAnimated correctly', () => {
+    component.isAnimated = true;
+    expect(component.isAnimated).toBeTruthy();
+  });
+
+  it('isShown() tests', () => {
+    component.isShown = true;
+    fixture.detectChanges();
+    let modalClass = component.element.nativeElement.classList.contains('in');
+    expect(modalClass).toBeTruthy();
+    component.isShown = false;
+    fixture.detectChanges();
+    modalClass = component.element.nativeElement.classList.contains('in');
+    expect(modalClass).toBeFalsy();
+  });
+});