feat(modal): add cssClass to modal options

Can pass one cssClass or multiple (same as out other overlays). Added a
cssClass to the basic test which adds 2 classes and styles the font
color of the content blue.

Closes #10020

Author: brandyscarney

src/components/modal/modal-component.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
 
 import { KEY_ESCAPE } from '../../platform/key';
 import { NavParams } from '../../navigation/nav-params';
@@ -30,6 +30,7 @@ export class ModalCmp {
   constructor(
     public _cfr: ComponentFactoryResolver,
     public _renderer: Renderer,
+    public _elementRef: ElementRef,
     public _navParams: NavParams,
     public _viewCtrl: ViewController,
     gestureCtrl: GestureController,
@@ -43,6 +44,13 @@ export class ModalCmp {
       disable: [GESTURE_MENU_SWIPE, GESTURE_GO_BACK_SWIPE]
     });
     this._bdDismiss = opts.enableBackdropDismiss;
+
+    if (opts.cssClass) {
+      opts.cssClass.split(' ').forEach((cssClass: string) => {
+        // Make sure the class isn't whitespace, otherwise it throws exceptions
+        if (cssClass.trim() !== '') _renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
+      });
+    }
   }
 
   ionViewPreLoad() {

src/components/modal/modal-options.ts

@@ -4,4 +4,5 @@ export interface ModalOptions {
   enableBackdropDismiss?: boolean;
   enterAnimation?: string;
   leaveAnimation?: string;
+  cssClass?: string;
 }

src/components/modal/test/basic/pages/modal-pass-data/modal-pass-data.scss

@@ -0,0 +1,3 @@
+.my-modal.my-blue-modal ion-content {
+  color: blue;
+}

src/components/modal/test/basic/pages/page-one/page-one.ts

@@ -43,7 +43,8 @@ export class PageOne {
   presentModal() {
     let modal = this.modalCtrl.create('ModalPassData', { userId: 8675309 }, {
       enterAnimation: 'modal-slide-in',
-      leaveAnimation: 'modal-slide-out'
+      leaveAnimation: 'modal-slide-out',
+      cssClass: 'my-modal my-blue-modal'
     });
     modal.present();