feat(alert): add ability to set the mode on alert

Author: Srecko Smodis

src/components/alert/alert-component.ts

@@ -78,6 +78,7 @@ export class AlertCmp {
     message?: string;
     title?: string;
     subTitle?: string;
+    mode?: string;
     buttons?: any[];
     inputs?: any[];
     enableBackdropDismiss?: boolean;
@@ -104,7 +105,7 @@ export class AlertCmp {
     // gesture blocker is used to disable gestures dynamically
     this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
-    this.mode = config.get('mode');
+    this.mode = this.d.mode || config.get('mode');
     _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
 
     if (this.d.cssClass) {

src/components/alert/alert-options.ts

@@ -4,6 +4,7 @@ export interface AlertOptions {
   subTitle?: string;
   message?: string;
   cssClass?: string;
+  mode?: string;
   inputs?: Array<AlertInputOptions>;
   buttons?: Array<any>;
   enableBackdropDismiss?: boolean;

src/components/alert/alert.ts

@@ -74,6 +74,13 @@ export class Alert extends ViewController {
     this.data.cssClass = cssClass;
   }
 
+  /**
+   * @param {string} mode Set the mode of the alert (ios, md, wp).
+   */
+  setMode(mode: string) {
+    this.data.mode = mode;
+  }
+
   /**
    * Present the alert instance.
    *
@@ -220,6 +227,7 @@ export class Alert extends ViewController {
  *  | subTitle              | `string`  | The subtitle for the alert.                                               |
  *  | message               | `string`  | The message for the alert.                                                |
  *  | cssClass              | `string`  | Additional classes for custom styles, separated by spaces.                |
+ *  | mode                  | `string`  | Set alert mode (ios, md, wp).                                             |
  *  | inputs                | `array`   | An array of inputs for the alert. See input options.                      |
  *  | buttons               | `array`   | An array of buttons for the alert. See buttons options.                   |
  *  | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop.            |

src/components/alert/test/basic/app.module.ts

@@ -283,6 +283,16 @@ export class E2EPage {
     alert.present();
   }
 
+  doAlertWithMode(alertMode: string) {
+    let alert = this.alertCtrl.create({
+      title: 'Alert!',
+      mode: alertMode,
+      buttons: ['OK']
+    });
+
+    alert.present();
+  }
+
   ionViewDidLeave() {
     console.log('E2EPage, ionViewDidLeave');
   }

src/components/alert/test/basic/e2e.ts

@@ -74,3 +74,11 @@ it('should open disabled backdrop alert', function() {
 it('should close with button click', function() {
   element(by.css('.alert-button:last-child')).click();
 });
+
+it('should open alert with mode', function() {
+  element(by.css('.e2eAlertMode')).click();
+});
+
+it('should close with button click', function() {
+  element(by.css('.alert-button:last-child')).click();
+});

src/components/alert/test/basic/main.html

@@ -19,6 +19,9 @@
   <button ion-button block class="e2eOpenCheckbox" (click)="doCheckbox()">Checkbox</button>
   <button ion-button block class="e2eFastClose" (click)="doFastClose()">Fast Close</button>
   <button ion-button block class="e2eDisabledBackdrop" (click)="doDisabledBackdropAlert()">Disabled Backdrop Click</button>
+  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('md')">md Mode</button>
+  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('ios')">ios Mode</button>
+  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('wp')">wp Mode</button>
 
   <pre>
     Confirm Opened: {{testConfirmOpen}}