@wizishop/img-manager 0.2.103 → 0.2.108

package/fesm5/wizishop-img-manager.js

@@ -2046,7 +2046,7 @@ var ImgEditorComponent = /** @class */ (function () {
     ImgEditorComponent = __decorate([
         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
             ]
@@ -2422,8 +2422,9 @@ var CropperComponent = /** @class */ (function () {
         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 Subject();
+        this.skipNextImgCropped = 1;
         this.imageChangedEvent = '';
         this.croppedImage = '';
         this.canvasRotation = 0;
@@ -2524,8 +2525,22 @@ var CropperComponent = /** @class */ (function () {
         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();
@@ -2566,7 +2581,7 @@ var CropperComponent = /** @class */ (function () {
         this.imageChangedEvent = event;
     };
     CropperComponent.prototype.imageCropped = function (event) {
-        this.detectImgCropperChange();
+        this.imgCropperChange.next();
         this.currentCroppedImage = event.base64;
         this.currentCroppedImageChange.emit(this.currentCroppedImage);
     };
@@ -2586,10 +2601,13 @@ var CropperComponent = /** @class */ (function () {
         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();
     };
@@ -2611,8 +2629,16 @@ var CropperComponent = /** @class */ (function () {
         }
     };
     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 () {
@@ -2679,7 +2705,7 @@ var CropperComponent = /** @class */ (function () {
     CropperComponent = __decorate([
         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
             ]
@@ -4340,7 +4366,7 @@ var AlertComponent = /** @class */ (function () {
         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);