From 2b60f4b6618bb9c636fbf02b71a9a0938448fac8 Mon Sep 17 00:00:00 2001
From: Stefano Cappa <stefano.cappa@mail.polimi.it>
Date: Mon, 22 Oct 2018 00:33:01 +0200
Subject: [PATCH] fix(): many fixes fot IE11 with legacyIE11Mode enabled #144

---
 package-lock.json                             | 36 ++++++++++++-------
 .../carousel-previews.component.ts            |  6 ++--
 .../carousel-previews/carousel-previews.html  | 11 +++---
 .../components/carousel/carousel.component.ts |  6 ++--
 .../src/lib/components/carousel/carousel.html |  2 +-
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66661c93..737da0c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8523,17 +8523,17 @@
       "integrity": "sha1-pp8ObKWB4DkapXlBlw4XwwjdSGk=",
       "dev": true,
       "requires": {
-        "colors": "^1.3.2",
+        "colors": "latest",
         "connect": "3.4.x",
-        "cors": "^2.8.4",
-        "event-stream": "^4.0.1",
+        "cors": "latest",
+        "event-stream": "latest",
         "faye-websocket": "0.11.x",
         "http-auth": "2.4.x",
         "morgan": "^1.6.1",
-        "object-assign": "^4.1.1",
-        "opn": "^5.4.0",
-        "proxy-middleware": "^0.15.0",
-        "send": "^0.16.2",
+        "object-assign": "latest",
+        "opn": "latest",
+        "proxy-middleware": "latest",
+        "send": "latest",
         "serve-index": "^1.7.2",
         "watchr": "2.6.x"
       },
@@ -9418,9 +9418,9 @@
       "dev": true
     },
     "ng-packagr": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.3.1.tgz",
-      "integrity": "sha512-OQLrGBnkUH1BDM0KV1Z9X8XPqwHqPdlY824irf6G+yFMfRwB9CO45OfMgJBeXdX3fnBb9CjOfQte1JvNMnHA7A==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.4.0.tgz",
+      "integrity": "sha512-dLpC/kmQsdbkL96ZclGjNRhq/J4MwpPKwPYNom74lvXqFC2jbbT/fnwmxX9WKXjvE8MEGsg2D2x8MsRURiNscg==",
       "dev": true,
       "requires": {
         "@ngtools/json-schema": "^1.1.0",
@@ -9443,6 +9443,7 @@
         "rimraf": "^2.6.1",
         "rollup": "^0.66.0",
         "rollup-plugin-commonjs": "^9.1.3",
+        "rollup-plugin-json": "^3.1.0",
         "rollup-plugin-node-resolve": "^3.0.0",
         "rollup-plugin-sourcemaps": "^0.4.2",
         "rxjs": "^6.0.0",
@@ -11625,6 +11626,15 @@
         }
       }
     },
+    "rollup-plugin-json": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-3.1.0.tgz",
+      "integrity": "sha512-BlYk5VspvGpjz7lAwArVzBXR60JK+4EKtPkCHouAWg39obk9S61hZYJDBfMK+oitPdoe11i69TlxKlMQNFC/Uw==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^2.3.1"
+      }
+    },
     "rollup-plugin-node-resolve": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz",
@@ -13748,9 +13758,9 @@
       }
     },
     "terser": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-3.10.1.tgz",
-      "integrity": "sha512-GE0ShECt1/dZUZt9Kyr/IC6xXG46pTbm1C1WfzQbbnRB5LhdJlF8p5NBZ38RjspD7hEM9O5ud8aIcOFY6evl4A==",
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-3.10.2.tgz",
+      "integrity": "sha512-+QrFoqBImmsQGB4c/HvaqgZynmbNvNBwoBxuu7fYXtq5EEtlLUzph+WimDj+xMkuqawXPMl2lgCIz81CdXvt+w==",
       "dev": true,
       "requires": {
         "commander": "~2.17.1",
diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
index a6a5889a..db21e1c4 100644
--- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
+++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
@@ -314,9 +314,9 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
     return item.id;
   }
 
-  sanitizeStyle(unsafeStyle: string): SafeStyle {
-    // Method used only  to sanitize style before add it to background property when legacyIE11Mode is enabled
-    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle);
+  sanitizeUrlBgStyle(unsafeStyle: string): SafeStyle {
+    // Method used only to sanitize background-image style before add it to background property when legacyIE11Mode is enabled
+    return this.sanitizer.bypassSecurityTrustStyle('url(' + unsafeStyle + ')');
   }
 
   /**
diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html
index b90520f5..c6a61572 100644
--- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html
+++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html
@@ -14,7 +14,7 @@
 
   <div class="preview-inner-container">
     <ng-container *ngFor="let preview of previews; trackBy: trackById; let index = index">
-      <ng-container *ngIf="carouselConfig?.legacyIE11Mode; else legacyMode">
+      <ng-container *ngIf="!carouselConfig?.legacyIE11Mode; else legacyMode">
         <img *ngIf="preview?.modal?.img"
              class="inside preview-image {{isActive(preview) ? 'active' : ''}}{{!configPreview.clickable ? ' unclickable' : ''}}"
              [src]="preview.plain?.img ? preview.plain.img : preview.modal.img"
@@ -29,24 +29,21 @@
              (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"/>
       </ng-container>
       <ng-template #legacyMode>
-        <img *ngIf="preview?.modal?.img"
+        <div *ngIf="preview?.modal?.img"
              [style.background-color]="'transparent'"
-             [style.background-image]="sanitizeStyle('url(' + preview.plain?.img ? preview.plain.img : preview.modal.img + ')')"
+             [style.background-image]="sanitizeUrlBgStyle(preview.plain?.img ? preview.plain.img : preview.modal.img)"
              [style.background-position]="'center center'"
              [style.background-size]="carouselConfig?.maxWidth + ' ' + (carouselConfig?.maxWidth === '100%' ? 'auto' : carouselConfig?.maxHeight)"
              [style.background-repeat]="'no-repeat'"
              [style.background-attachment]="'scroll'"
-             class="inside preview-image {{isActive(preview) ? 'active' : ''}}{{!configPreview.clickable ? ' unclickable' : ''}}"
-             [src]="preview.plain?.img ? preview.plain.img : preview.modal.img"
              ksSize [sizeConfig]="{width: configPreview?.size?.width,
                                  height: configPreview?.size?.height}"
              ksMargin [marginLeft]="carouselConfig?.maxWidth !== '100%' ? '0px' : '2px'"
              [marginRight]="carouselConfig?.maxWidth !== '100%' ? '0px' : '2px'"
              [attr.aria-label]="preview.modal.ariaLabel ? preview.modal.ariaLabel : ''"
              [title]="preview.modal.title ? preview.modal.title : ''"
-             alt="{{preview.modal.alt ? preview.modal.alt : ''}}"
              [tabindex]="0" role="img"
-             (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"/>
+             (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"></div>
       </ng-template>
     </ng-container>
   </div>
diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
index e6d6bcdf..2f4c807f 100644
--- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
+++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
@@ -358,9 +358,9 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
     }
   }
 
-  sanitizeStyle(unsafeStyle: string): SafeStyle {
-    // Method used only  to sanitize style before add it to background property when legacyIE11Mode is enabled
-    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle);
+  sanitizeUrlBgStyle(unsafeStyle: string): SafeStyle {
+    // Method used only to sanitize background-image style before add it to background property when legacyIE11Mode is enabled
+    return this.sanitizer.bypassSecurityTrustStyle('url(' + unsafeStyle + ')');
   }
 
   /**
diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html
index 3a858869..8bf4618c 100644
--- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html
+++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html
@@ -78,7 +78,7 @@
 
       <div id="current-image-legacy"
            [style.background-color]="'transparent'"
-           [style.background-image]="sanitizeStyle('url(' + currentImage.modal.img + ')')"
+           [style.background-image]="sanitizeUrlBgStyle(currentImage.modal.img + '')"
            [style.background-position]="'center center'"
            [style.background-size]="configCarousel?.maxWidth + ' ' + (configCarousel?.maxWidth === '100%' ? 'auto' : configCarousel?.maxHeight)"
            [style.background-repeat]="'no-repeat'"