@wizishop/img-manager 0.2.104 → 0.2.109

package/bundles/wizishop-img-manager.umd.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@ngx-translate/core'), require('@wizishop/ng-wizi-bulma'), require('rxjs/operators'), require('@angular/animations'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event'), require('ngx-image-cropper'), require('@angular/cdk/table'), require('@angular/cdk/drag-drop'), require('uuid'), require('ngx-perfect-scrollbar')) :
     typeof define === 'function' && define.amd ? define('@wizishop/img-manager', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@ngx-translate/core', '@wizishop/ng-wizi-bulma', 'rxjs/operators', '@angular/animations', '@angular/router', '@angular/common', '@angular/forms', 'ngx-scrollbar', 'ngx-scrollbar/reached-event', 'ngx-image-cropper', '@angular/cdk/table', '@angular/cdk/drag-drop', 'uuid', 'ngx-perfect-scrollbar'], factory) :
-    (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global['~9']['0']['3'], global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk['drag-drop'], global.uuid, global['^10']['1']['1']));
+    (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global['~9']['0']['3'], global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk.dragDrop, global.uuid, global['^10']['1']['1']));
 }(this, (function (exports, core, rxjs, http, core$1, ngWiziBulma, operators, animations, router, common, forms, ngxScrollbar, reachedEvent, ngxImageCropper, table, dragDrop, uuid, ngxPerfectScrollbar) { 'use strict';
 
     /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+    Copyright (c) Microsoft Corporation.
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
     /* global Reflect, Promise */
 
@@ -109,8 +109,13 @@
         }
     }
 
+    function __createBinding(o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+    }
+
     function __exportStar(m, exports) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
     }
 
     function __values(o) {
@@ -346,7 +351,7 @@
             this.imgSelectedList.splice(toIndex, 0, this.imgSelectedList.splice(fromIndex, 1)[0]);
             this.emitImgSelectionChange();
         };
-        ImgSelectionService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgSelectionService_Factory() { return new ImgSelectionService(); }, token: ImgSelectionService, providedIn: "root" });
+        ImgSelectionService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgSelectionService_Factory() { return new ImgSelectionService(); }, token: ImgSelectionService, providedIn: "root" });
         ImgSelectionService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -489,7 +494,7 @@
         ImgManagerService.ctorParameters = function () { return [
             { type: http.HttpClient }
         ]; };
-        ImgManagerService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgManagerService_Factory() { return new ImgManagerService(core["ɵɵinject"](http.HttpClient)); }, token: ImgManagerService, providedIn: "root" });
+        ImgManagerService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgManagerService_Factory() { return new ImgManagerService(core.ɵɵinject(http.HttpClient)); }, token: ImgManagerService, providedIn: "root" });
         ImgManagerService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -519,7 +524,7 @@
                 return elem.match(/_(\w+)_/)[1];
             });
         };
-        ImgCDNService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgCDNService_Factory() { return new ImgCDNService(); }, token: ImgCDNService, providedIn: "root" });
+        ImgCDNService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgCDNService_Factory() { return new ImgCDNService(); }, token: ImgCDNService, providedIn: "root" });
         ImgCDNService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -566,7 +571,7 @@
             { type: ImgManagerService },
             { type: ImgCDNService }
         ]; };
-        ImgManagerConfigService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgManagerConfigService_Factory() { return new ImgManagerConfigService(core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](ImgCDNService)); }, token: ImgManagerConfigService, providedIn: "root" });
+        ImgManagerConfigService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgManagerConfigService_Factory() { return new ImgManagerConfigService(core.ɵɵinject(ImgManagerService), core.ɵɵinject(ImgCDNService)); }, token: ImgManagerConfigService, providedIn: "root" });
         ImgManagerConfigService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -593,7 +598,7 @@
             var value = localStorage.getItem(this.userdisplayPreference);
             return value == 'true';
         };
-        UserSettingsService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function UserSettingsService_Factory() { return new UserSettingsService(); }, token: UserSettingsService, providedIn: "root" });
+        UserSettingsService.ɵprov = core.ɵɵdefineInjectable({ factory: function UserSettingsService_Factory() { return new UserSettingsService(); }, token: UserSettingsService, providedIn: "root" });
         UserSettingsService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -646,7 +651,7 @@
             { type: ngWiziBulma.NwbAlertService },
             { type: core$1.TranslateService }
         ]; };
-        AlertService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function AlertService_Factory() { return new AlertService(core["ɵɵinject"](ngWiziBulma.NwbAlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
+        AlertService.ɵprov = core.ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(core.ɵɵinject(ngWiziBulma.NwbAlertService), core.ɵɵinject(core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
         AlertService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -688,7 +693,7 @@
         ImgEventService.prototype.getlistDisplayedChange = function () {
             return this.listDisplayedChange.asObservable();
         };
-        ImgEventService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
+        ImgEventService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
         ImgEventService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -849,7 +854,7 @@
             { type: AlertService },
             { type: core$1.TranslateService }
         ]; };
-        CanvaService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function CanvaService_Factory() { return new CanvaService(core["ɵɵinject"](ImgManagerConfigService), core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](ImgEventService), core["ɵɵinject"](AlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: CanvaService, providedIn: "root" });
+        CanvaService.ɵprov = core.ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(core.ɵɵinject(ImgManagerConfigService), core.ɵɵinject(ImgManagerService), core.ɵɵinject(ImgEventService), core.ɵɵinject(AlertService), core.ɵɵinject(core$1.TranslateService)); }, token: CanvaService, providedIn: "root" });
         CanvaService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -888,7 +893,7 @@
                 _this.documentScrollSource.next(window);
             };
         };
-        DomService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function DomService_Factory() { return new DomService(); }, token: DomService, providedIn: "root" });
+        DomService.ɵprov = core.ɵɵdefineInjectable({ factory: function DomService_Factory() { return new DomService(); }, token: DomService, providedIn: "root" });
         DomService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -1324,7 +1329,7 @@
             { type: ImgManagerService },
             { type: AlertService }
         ]; };
-        RenamePictureService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function RenamePictureService_Factory() { return new RenamePictureService(core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](AlertService)); }, token: RenamePictureService, providedIn: "root" });
+        RenamePictureService.ɵprov = core.ɵɵdefineInjectable({ factory: function RenamePictureService_Factory() { return new RenamePictureService(core.ɵɵinject(ImgManagerService), core.ɵɵinject(AlertService)); }, token: RenamePictureService, providedIn: "root" });
         RenamePictureService = __decorate([
             core.Injectable({ providedIn: 'root' }),
             __metadata("design:paramtypes", [ImgManagerService,
@@ -1671,7 +1676,7 @@
             { type: ImgManagerConfigService },
             { type: core$1.TranslateService }
         ]; };
-        PexelsService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function PexelsService_Factory() { return new PexelsService(core["ɵɵinject"](http.HttpClient), core["ɵɵinject"](ImgManagerConfigService), core["ɵɵinject"](core$1.TranslateService)); }, token: PexelsService, providedIn: "root" });
+        PexelsService.ɵprov = core.ɵɵdefineInjectable({ factory: function PexelsService_Factory() { return new PexelsService(core.ɵɵinject(http.HttpClient), core.ɵɵinject(ImgManagerConfigService), core.ɵɵinject(core$1.TranslateService)); }, token: PexelsService, providedIn: "root" });
         PexelsService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -2247,7 +2252,7 @@
         ImgEditorComponent = __decorate([
             core.Component({
                 selector: 'img-editor',
-                template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <perfect-scrollbar\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <button\n                      class=\"button img-editor__infoSection__actions__cancel\"\n                      (click)=\"onCancel()\"\n                      [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n                    >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <div\n                        class=\"button danger button img-editor__infoSection__actions__save\"\n                        [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n                        (click)=\"onSave()\"\n                    >\n                        {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n                        <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </perfect-scrollbar>\n</div>\n",
+                template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <perfect-scrollbar\n        [config]=\"{suppressScrollX: true}\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </perfect-scrollbar>\n</div>\n",
                 animations: [
                     easeInOut
                 ]
@@ -2623,8 +2628,9 @@
             this.currentCroppedImage = ''; // Img modified return in base64
             this.isCropped = false;
             this.isLoading = false;
-            this.isImgCropped = false;
-            this.isImgCroppedInitilized = false;
+            this._isImgCropped = false;
+            this.imgCropperChange = new rxjs.Subject();
+            this.skipNextImgCropped = 1;
             this.imageChangedEvent = '';
             this.croppedImage = '';
             this.canvasRotation = 0;
@@ -2725,8 +2731,22 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(CropperComponent.prototype, "isImgCropped", {
+            get: function () {
+                return this._isImgCropped;
+            },
+            set: function (isImgCropped) {
+                var _this = this;
+                setTimeout(function () {
+                    _this._isImgCropped = isImgCropped;
+                }, 0);
+            },
+            enumerable: true,
+            configurable: true
+        });
         CropperComponent.prototype.ngOnInit = function () {
             this.init();
+            this.detectImgCropperChange();
         };
         CropperComponent.prototype.init = function () {
             this.imgRoute = this.getRAWImgRoute();
@@ -2767,7 +2787,7 @@
             this.imageChangedEvent = event;
         };
         CropperComponent.prototype.imageCropped = function (event) {
-            this.detectImgCropperChange();
+            this.imgCropperChange.next();
             this.currentCroppedImage = event.base64;
             this.currentCroppedImageChange.emit(this.currentCroppedImage);
         };
@@ -2787,10 +2807,13 @@
             this.setCropperProperties(config);
         };
         CropperComponent.prototype.confirmCrop = function () {
-            this.imgRoute = null;
-            this.croppedImage = this.currentCroppedImage;
-            this.isImgCropped = false;
-            this.isImgCroppedInitilized = false;
+            var _this = this;
+            setTimeout(function () {
+                _this.imgRoute = null;
+                _this.croppedImage = _this.currentCroppedImage;
+                _this.skipNextImgCropped = 2;
+                _this.isImgCropped = false;
+            }, 0);
             this.resetConfCropper();
             this.onImgModified();
         };
@@ -2812,8 +2835,16 @@
             }
         };
         CropperComponent.prototype.detectImgCropperChange = function () {
-            this.isImgCropped = this.isImgCroppedInitilized;
-            this.isImgCroppedInitilized = true;
+            var _this = this;
+            this.imgCropperChange
+                .subscribe(function () {
+                _this.skipNextImgCropped--;
+                if (_this.skipNextImgCropped >= 0) {
+                    return;
+                }
+                _this.skipNextImgCropped = 0;
+                _this.isImgCropped = true;
+            });
         };
         /* Rotations functions */
         CropperComponent.prototype.rotateLeft = function () {
@@ -2880,7 +2911,7 @@
         CropperComponent = __decorate([
             core.Component({
                 selector: 'cropper',
-                template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL] = \"imgRoute\"\n        [imageBase64] = \"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n</div>\n",
+                template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL]=\"imgRoute\"\n        [imageBase64]=\"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n</div>\n",
                 animations: [
                     insertRemove
                 ]
@@ -3571,7 +3602,7 @@
         FiltersTableService.ctorParameters = function () { return [
             { type: ngWiziBulma.NwbFilterRoutingBuilder }
         ]; };
-        FiltersTableService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function FiltersTableService_Factory() { return new FiltersTableService(core["ɵɵinject"](ngWiziBulma.NwbFilterRoutingBuilder)); }, token: FiltersTableService, providedIn: "root" });
+        FiltersTableService.ɵprov = core.ɵɵdefineInjectable({ factory: function FiltersTableService_Factory() { return new FiltersTableService(core.ɵɵinject(ngWiziBulma.NwbFilterRoutingBuilder)); }, token: FiltersTableService, providedIn: "root" });
         FiltersTableService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -4541,7 +4572,7 @@
             core.Component({
                 selector: 'wz-alert',
                 template: "<div class=\"wz-alert\" [ngClass]=\"{ success: success, warning: warning }\">\n  <i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i>\n  <p><ng-content></ng-content></p>\n</div>\n",
-                styles: [".wz-alert{width:100%;background-color:rgba(82,174,205,.15);color:#52aecd;border-radius:3px;display:-webkit-box;display:flex;flex-wrap:nowrap;-webkit-box-pack:justify;justify-content:space-between;padding:20px}.wz-alert.success{background-color:rgba(46,204,113,.15)}.wz-alert.success p,.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:rgba(233,86,86,.15)}.wz-alert.warning p,.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}"]
+                styles: [".wz-alert{width:100%;background-color:rgba(82,174,205,.15);color:#52aecd;border-radius:3px;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:20px}.wz-alert.success{background-color:rgba(46,204,113,.15)}.wz-alert.success p,.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:rgba(233,86,86,.15)}.wz-alert.warning p,.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}"]
             }),
             __metadata("design:paramtypes", [])
         ], AlertComponent);