sweetalert: ported to sweetalert2 and simplified code. (#465)

No styling changes besides making the "primary" button-text bold (aligned with desktop app)

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import * as jq from 'jquery';
-import * as _swal from 'sweetalert';
-import { SweetAlert } from 'sweetalert/typings/core';
+import Swal from 'sweetalert2/src/sweetalert2.js';
 
 import {
     BodyOutputType,
@@ -53,8 +52,6 @@ import { ConstantsService } from 'jslib/services/constants.service';
 import { RouterService } from './services/router.service';
 
 const BroadcasterSubscriptionId = 'AppComponent';
-// Hack due to Angular 5.2 bug
-const swal: SweetAlert = _swal as any;
 const IdleTimeout = 60000 * 10; // 10 minutes
 
 @Component({
@@ -165,7 +162,7 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
 
                 if (document.querySelector('.swal-modal') != null) {
-                    swal.close(undefined);
+                    Swal.close(undefined);
                 }
             }
         });

src/scss/plugins.scss

@@ -1,6 +1,7 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome.scss";
 @import "~angular2-toaster/toaster";
+@import "~sweetalert2/src/sweetalert2.scss";
 
 #toast-container {
     &.toast-top-right {
@@ -86,41 +87,31 @@ $fa-font-path: "~font-awesome/fonts";
     }
 }
 
-// SweetAlert
+// SweetAlert2
 
-.swal-overlay {
+.swal2-container {
     background-color: rgba(0,0,0,.3);
 }
 
-.swal-modal {
+.swal2-popup {
+    padding: 0;
     background-color: $modal-content-bg;
     color: $body-color;
     border: $modal-content-border-width solid #9a9a9a;
     @include border-radius($modal-content-border-radius);
+    width: 34em; // slightly bigger than the hardcoded 478px in v1.
 
-    .swal-icon {
+    .swal2-icon {
         margin: 15px auto 0 auto;
+        width: auto;
+        height: auto;
+        border: none;
     }
 
-    .swal-content {
-        margin: 0;
-        padding: 15px 0;
+    .swal2-content {
+        padding-bottom: 15px;
         font-size: $font-size-base;
         border-bottom: $modal-footer-border-width solid $modal-footer-border-color;
-
-        .swal-text {
-            &:last-child {
-                margin-bottom: 0;
-            }
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-
-        .swal-title, .swal-text {
-            padding-left: 0;
-            padding-right: 0;
-        }
     }
 
     i.swal-custom-icon {
@@ -129,36 +120,38 @@ $fa-font-path: "~font-awesome/fonts";
         font-size: 35px;
     }
 
-    .swal-title {
+    .swal2-title {
         padding: 10px 10px 15px 10px;
         margin: 0;
         font-size: $font-size-lg;
         color: $body-color;
     }
 
-    .swal-text {
+    .swal2-content {
         font-size: $font-size-base;
         color: $body-color;
     }
 
-    .swal-footer {
+    .swal2-actions {
         padding: 15px 10px 10px 10px;
         margin: 0;
         background-color: $input-bg;
         @include border-radius($modal-content-border-radius);
         display: flex; 
-        flex-direction: row-reverse;
-        justify-content: flex-end;
+        flex-direction: row;
+        justify-content: flex-start;
         font-size: $font-size-base;
 
-        button.swal-button {
+        button {
+            margin-left: 10px;
             @extend .btn;
 
-            &.swal-button--confirm {
+            &.swal2-confirm {
                 @extend .btn-primary;
+                font-weight: bold;
             }
-    
-            &.swal-button--cancel {
+
+            &.swal2-cancel {
                 @extend .btn-outline-secondary;
                 background-color: #ffffff;
             }

src/services/webPlatformUtils.service.ts

@@ -1,5 +1,4 @@
-import * as _swal from 'sweetalert';
-import { SweetAlert } from 'sweetalert/typings/core';
+import Swal, { SweetAlertIcon } from 'sweetalert2/src/sweetalert2.js';
 
 import { DeviceType } from 'jslib/enums/deviceType';
 
@@ -9,9 +8,6 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { Utils } from 'jslib/misc/utils';
 
-// Hack due to Angular 5.2 bug
-const swal: SweetAlert = _swal as any;
-
 export class WebPlatformUtilsService implements PlatformUtilsService {
     identityClientId: string = 'web';
 
@@ -182,58 +178,42 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
     }
 
     async showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) {
-        const buttons = [confirmText == null ? this.i18nService.t('ok') : confirmText];
-        if (cancelText != null) {
-            buttons.unshift(cancelText);
-        }
-
-        const contentDiv = document.createElement('div');
+        let iconClasses = null;
         if (type != null) {
-            const icon = document.createElement('i');
-            icon.classList.add('swal-custom-icon');
+            // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
             switch (type) {
                 case 'success':
-                    icon.classList.add('fa', 'fa-check', 'text-success');
+                    iconClasses = 'fa-check text-success';
                     break;
                 case 'warning':
-                    icon.classList.add('fa', 'fa-warning', 'text-warning');
+                    iconClasses = 'fa-warning text-warning';
                     break;
                 case 'error':
-                    icon.classList.add('fa', 'fa-bolt', 'text-danger');
+                    iconClasses = 'fa-bolt text-danger';
                     break;
                 case 'info':
-                    icon.classList.add('fa', 'fa-info-circle', 'text-info');
+                    iconClasses = 'fa-info-circle text-info';
                     break;
                 default:
                     break;
             }
-            if (icon.classList.contains('fa')) {
-                contentDiv.appendChild(icon);
-            }
         }
 
-        if (title != null) {
-            const titleDiv = document.createElement('div');
-            titleDiv.classList.add('swal-title');
-            titleDiv.appendChild(document.createTextNode(title));
-            contentDiv.appendChild(titleDiv);
-        }
-
-        if (text != null) {
-            const textDiv = document.createElement('div');
-            textDiv.classList.add('swal-text');
-            textDiv.appendChild(document.createTextNode(text));
-            contentDiv.appendChild(textDiv);
-        }
-
-        const confirmed = buttons.length > 1 ? await swal({
-            content: { element: contentDiv },
-            buttons: buttons,
-        }) : await (swal as any)({
-            content: { element: contentDiv },
-            button: buttons[0],
+        const iconHtmlStr = iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined;
+        const confirmed = await Swal.fire({
+            heightAuto: false,
+            buttonsStyling: false,
+            icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
+            iconHtml: iconHtmlStr,
+            text: text,
+            title: title,
+            showCancelButton: (cancelText != null),
+            cancelButtonText: cancelText,
+            showConfirmButton: true,
+            confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText,
         });
-        return confirmed;
+
+        return confirmed.value;
     }
 
     eventTrack(action: string, label?: string, options?: any) {