npm - ngx-wapp-components - Versions diffs - 1.1.0 → 1.2.0 - Mend

ngx-wapp-components 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/esm2020/lib/file/w-image-cropper/w-image-cropper.component.mjs CHANGED Viewed

@@ -218,10 +218,10 @@ export class WImageCropperComponent {
     }
 }
 WImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, deps: [{ token: i1.DynamicDialogRef }, { token: i2.ModalService }, { token: i1.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
-WImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WImageCropperComponent, selector: "w-image-cropper", inputs: { dimensionsInput: "dimensionsInput", translationsImageCropper: "translationsImageCropper", blob: "blob" }, outputs: { imageCroppedFinal: "imageCroppedFinal", imageB64: "imageB64" }, ngImport: i0, template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n    <div class=\"flex flex-1\" ></div>    \r\n    <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n        <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n            <p-fileUpload #fileUploader\r\n                class=\"w-file-button bg-white\"\r\n                chooseIcon=\"pi pi-image\"\r\n                chooseLabel=\"Choose\"\r\n                (onSelect)=\"myUploader($event)\"\r\n                name=\"filesToUpload[]\" \r\n                [auto]=\"true\"\r\n                [multiple]=\"false\"\r\n                accept=\"image/*\"\r\n                mode=\"basic\"\r\n                accept=\"image/*\" \r\n                [maxFileSize]=\"maxFileSize\">\r\n            </p-fileUpload>\r\n        </span>\r\n    </div>\r\n    <ng-template #imageCropper>\r\n        <div class=\"flex flex-column w-full\">\r\n            <div class=\"flex flex-row align-content-center\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n                    <image-cropper\r\n                            [imageFile]=\"blob\"\r\n                            [imageURL]=\"imageURL\"\r\n                            [maintainAspectRatio]=\"true\"\r\n                            [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n                            [aspectRatio]=\"aspectRatio\"\r\n                            [resizeToWidth]= \"dimensions.width\"\r\n                            [resizeToHeight]=\"dimensions.height\"\r\n                            [cropperMinWidth]=\"128\"\r\n                            [onlyScaleDown]=\"true\"\r\n                            [roundCropper]=\"false\"\r\n                            [canvasRotation]=\"canvasRotation\"\r\n                            [(transform)]=\"transform\"\r\n                            [alignImage]=\"'center'\"\r\n                            [style.display]=\"showCropper ? null : 'none'\"\r\n                            [allowMoveImage]=\"allowMoveImage\"\r\n                            [hidden]=\"hidden\"\r\n                            backgroundColor=\"blue\"\r\n                            format=\"png\"\r\n                            [roundCropper]=\"roundedCropper\"\r\n                            (imageCropped)=\"imageCropped($event)\"\r\n                            (imageLoaded)=\"imageLoaded()\"\r\n                            (cropperReady)=\"cropperReady($event)\"\r\n                            (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n                </div>\r\n                <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n                    <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n                                icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n                                type=\"text\"></w-button>\r\n                        <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n                                icon=\"pi pi-search-minus\" \r\n                                (click)=\"zoomOut()\"\r\n                                type=\"text\"></w-button> \r\n                </div>\r\n                <div class=\"flex flex-1\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n                    <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n                            (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n                            [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1  wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-replay\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n                            (click)=\"rotateLeft()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            icon=\"pi pi-refresh\"\r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n                            (click)=\"rotateRight()\"></w-button>\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-arrows-h\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n                            (click)=\"flipHorizontal()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n                            icon=\"pi pi-arrows-v\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"flipVertical()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.restore\"\r\n                            icon=\"pi pi-history\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"resetImage()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.preview\"\r\n                            icon=\"pi pi-eye\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"viewCrop()\"></w-button>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n        </div>\r\n        \r\n    </ng-template>\r\n    <div class=\"flex flex-1\" ></div>\r\n    <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n        <w-button *ngIf=\"blob\"\r\n            (onClick)=\"deleteBlob()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-trash\"\r\n            [label]=\"translationsImageCropper.delete\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            *ngIf=\"fromModal\"\r\n            (onClick)=\"cancelDialog()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-times\"\r\n            [label]=\"translationsImageCropper.cancel\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            icon=\"pi-save\"\r\n            (click)=\"saveImageCropped()\"\r\n            [disabled]=\"!blob\"\r\n            [label]=\"translationsImageCropper.save\"\r\n            class=\"flex align-content-center align-items-center\"\r\n            type=\"text\">\r\n        </w-button>\r\n    </div>    \r\n</div>\r\n    \r\n    ", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:400}.heading5{font-size:1.5rem;line-height:1.8333333333rem;font-weight:600}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:400}.subtitle1,.w-tab-text,.w-panel-title-text,.w-sidebar-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:600}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:600}.body,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:400}.caption,.w-input-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.text846{color:#2e3134}.text700{color:#5f6368}.text500{color:#9aa0a6}.textWhite{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-tertiary-label-text,.w-button-small-text-label-text{color:#2e3134}.w-button-small-icon-text,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:12px}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:400;line-height:16px}.w-button-medium-tertiary-label-text{color:#2e3134}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:400;line-height:24px}.w-button-large-tertiary-label-text{color:#2e3134}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text,.w-view-small-value-text{color:#2e3134}.w-input-no-label-height{height:36px}.w-input-disabled{background-color:#f1f3f4;border-color:#e8eaed;opacity:1}.w-input-small-label-text,.w-input-small-label-disabled{color:#2e3134}.w-input-small-label-disabled{color:#9aa0a6}.w-input-small-placeholder-text,.w-input-small-placeholder-text-only-color{color:#2e3134}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6368}.w-input-small-text-icon,.w-input-small-select-options-text{color:#2e3134}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#2e3134}.w-input-medium-label-disabled{color:#9aa0a6}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#2e3134}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6368}.w-input-medium-text-icon{color:#2e3134}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#2e3134}.w-input-success-alert-text{color:#00db5d;padding:8px;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:8px;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px;margin-top:0}.w-input-alert-message-height{height:32px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#2e3134}.w-panel-content{color:#5f6368}.w-tab-text,.w-chip-text{color:#2e3134}.w-badge-text{font-size:8px;font-weight:700;line-height:8px}.w-table-th-text{color:#2e3134}.w-table-td-text{color:#5f6368}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:32px;padding:7px 15px;border-radius:8px;border-width:1px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:1px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i7.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i9.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
+WImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WImageCropperComponent, selector: "w-image-cropper", inputs: { dimensionsInput: "dimensionsInput", translationsImageCropper: "translationsImageCropper", blob: "blob" }, outputs: { imageCroppedFinal: "imageCroppedFinal", imageB64: "imageB64" }, ngImport: i0, template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n    <div class=\"flex flex-1\" ></div>    \r\n    <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n        <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n            <p-fileUpload #fileUploader\r\n                class=\"w-file-button bg-white\"\r\n                chooseIcon=\"pi pi-image\"\r\n                chooseLabel=\"Choose\"\r\n                (onSelect)=\"myUploader($event)\"\r\n                name=\"filesToUpload[]\" \r\n                [auto]=\"true\"\r\n                [multiple]=\"false\"\r\n                accept=\"image/*\"\r\n                mode=\"basic\"\r\n                accept=\"image/*\" \r\n                [maxFileSize]=\"maxFileSize\">\r\n            </p-fileUpload>\r\n        </span>\r\n    </div>\r\n    <ng-template #imageCropper>\r\n        <div class=\"flex flex-column w-full\">\r\n            <div class=\"flex flex-row align-content-center\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n                    <image-cropper\r\n                            [imageFile]=\"blob\"\r\n                            [imageURL]=\"imageURL\"\r\n                            [maintainAspectRatio]=\"true\"\r\n                            [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n                            [aspectRatio]=\"aspectRatio\"\r\n                            [resizeToWidth]= \"dimensions.width\"\r\n                            [resizeToHeight]=\"dimensions.height\"\r\n                            [cropperMinWidth]=\"128\"\r\n                            [onlyScaleDown]=\"true\"\r\n                            [roundCropper]=\"false\"\r\n                            [canvasRotation]=\"canvasRotation\"\r\n                            [(transform)]=\"transform\"\r\n                            [alignImage]=\"'center'\"\r\n                            [style.display]=\"showCropper ? null : 'none'\"\r\n                            [allowMoveImage]=\"allowMoveImage\"\r\n                            [hidden]=\"hidden\"\r\n                            backgroundColor=\"blue\"\r\n                            format=\"png\"\r\n                            [roundCropper]=\"roundedCropper\"\r\n                            (imageCropped)=\"imageCropped($event)\"\r\n                            (imageLoaded)=\"imageLoaded()\"\r\n                            (cropperReady)=\"cropperReady($event)\"\r\n                            (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n                </div>\r\n                <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n                    <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n                                icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n                                type=\"text\"></w-button>\r\n                        <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n                                icon=\"pi pi-search-minus\" \r\n                                (click)=\"zoomOut()\"\r\n                                type=\"text\"></w-button> \r\n                </div>\r\n                <div class=\"flex flex-1\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n                    <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n                            (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n                            [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1  wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-replay\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n                            (click)=\"rotateLeft()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            icon=\"pi pi-refresh\"\r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n                            (click)=\"rotateRight()\"></w-button>\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-arrows-h\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n                            (click)=\"flipHorizontal()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n                            icon=\"pi pi-arrows-v\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"flipVertical()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.restore\"\r\n                            icon=\"pi pi-history\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"resetImage()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.preview\"\r\n                            icon=\"pi pi-eye\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"viewCrop()\"></w-button>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n        </div>\r\n        \r\n    </ng-template>\r\n    <div class=\"flex flex-1\" ></div>\r\n    <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n        <w-button *ngIf=\"blob\"\r\n            (onClick)=\"deleteBlob()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-trash\"\r\n            [label]=\"translationsImageCropper.delete\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            *ngIf=\"fromModal\"\r\n            (onClick)=\"cancelDialog()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-times\"\r\n            [label]=\"translationsImageCropper.cancel\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            icon=\"pi-save\"\r\n            (click)=\"saveImageCropped()\"\r\n            [disabled]=\"!blob\"\r\n            [label]=\"translationsImageCropper.save\"\r\n            class=\"flex align-content-center align-items-center\"\r\n            type=\"text\">\r\n        </w-button>\r\n    </div>    \r\n</div>\r\n    \r\n    ", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:400}.heading5{font-size:1.5rem;line-height:1.8333333333rem;font-weight:600}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:400}.subtitle1,.w-tab-text,.w-panel-title-text,.w-sidebar-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:600}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:600}.body,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:400}.caption,.w-input-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.text846{color:#2e3134}.text700{color:#5f6368}.text500{color:#9aa0a6}.textWhite{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-tertiary-label-text,.w-button-small-text-label-text{color:#2e3134}.w-button-small-icon-text,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:12px}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:400;line-height:16px}.w-button-medium-tertiary-label-text{color:#2e3134}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:400;line-height:24px}.w-button-large-tertiary-label-text{color:#2e3134}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text,.w-view-small-value-text{color:#2e3134}.w-input-no-label-height{height:36px}.w-input-disabled{background-color:#f1f3f4;border-color:#e8eaed;opacity:1}.w-input-small-label-text,.w-input-small-label-disabled{color:#2e3134}.w-input-small-label-disabled{color:#9aa0a6}.w-input-small-label-text-content{padding:12px 8px 8px 0;margin:0}.w-input-small-placeholder-text,.w-input-small-placeholder-text-only-color{color:#2e3134}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6368}.w-input-small-text-icon,.w-input-small-select-options-text{color:#2e3134}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#2e3134}.w-input-medium-label-disabled{color:#9aa0a6}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#2e3134}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6368}.w-input-medium-text-icon{color:#2e3134}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#2e3134}.w-input-success-alert-text{color:#00db5d;padding:8px 8px 0;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#2e3134}.w-panel-content{color:#5f6368}.w-tab-text,.w-chip-text{color:#2e3134}.w-badge-text{font-size:8px;font-weight:700;line-height:8px}.w-table-th-text{color:#2e3134}.w-table-td-text{color:#5f6368}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:32px;padding:7px 15px;border-radius:8px;border-width:1px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:1px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i7.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i9.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-image-cropper', template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n    <div class=\"flex flex-1\" ></div>    \r\n    <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n        <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n            <p-fileUpload #fileUploader\r\n                class=\"w-file-button bg-white\"\r\n                chooseIcon=\"pi pi-image\"\r\n                chooseLabel=\"Choose\"\r\n                (onSelect)=\"myUploader($event)\"\r\n                name=\"filesToUpload[]\" \r\n                [auto]=\"true\"\r\n                [multiple]=\"false\"\r\n                accept=\"image/*\"\r\n                mode=\"basic\"\r\n                accept=\"image/*\" \r\n                [maxFileSize]=\"maxFileSize\">\r\n            </p-fileUpload>\r\n        </span>\r\n    </div>\r\n    <ng-template #imageCropper>\r\n        <div class=\"flex flex-column w-full\">\r\n            <div class=\"flex flex-row align-content-center\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n                    <image-cropper\r\n                            [imageFile]=\"blob\"\r\n                            [imageURL]=\"imageURL\"\r\n                            [maintainAspectRatio]=\"true\"\r\n                            [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n                            [aspectRatio]=\"aspectRatio\"\r\n                            [resizeToWidth]= \"dimensions.width\"\r\n                            [resizeToHeight]=\"dimensions.height\"\r\n                            [cropperMinWidth]=\"128\"\r\n                            [onlyScaleDown]=\"true\"\r\n                            [roundCropper]=\"false\"\r\n                            [canvasRotation]=\"canvasRotation\"\r\n                            [(transform)]=\"transform\"\r\n                            [alignImage]=\"'center'\"\r\n                            [style.display]=\"showCropper ? null : 'none'\"\r\n                            [allowMoveImage]=\"allowMoveImage\"\r\n                            [hidden]=\"hidden\"\r\n                            backgroundColor=\"blue\"\r\n                            format=\"png\"\r\n                            [roundCropper]=\"roundedCropper\"\r\n                            (imageCropped)=\"imageCropped($event)\"\r\n                            (imageLoaded)=\"imageLoaded()\"\r\n                            (cropperReady)=\"cropperReady($event)\"\r\n                            (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n                </div>\r\n                <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n                    <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n                                icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n                                type=\"text\"></w-button>\r\n                        <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n                                icon=\"pi pi-search-minus\" \r\n                                (click)=\"zoomOut()\"\r\n                                type=\"text\"></w-button> \r\n                </div>\r\n                <div class=\"flex flex-1\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n                    <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n                            (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n                            [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1  wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-replay\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n                            (click)=\"rotateLeft()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            icon=\"pi pi-refresh\"\r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n                            (click)=\"rotateRight()\"></w-button>\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-arrows-h\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n                            (click)=\"flipHorizontal()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n                            icon=\"pi pi-arrows-v\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"flipVertical()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.restore\"\r\n                            icon=\"pi pi-history\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"resetImage()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.preview\"\r\n                            icon=\"pi pi-eye\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"viewCrop()\"></w-button>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n        </div>\r\n        \r\n    </ng-template>\r\n    <div class=\"flex flex-1\" ></div>\r\n    <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n        <w-button *ngIf=\"blob\"\r\n            (onClick)=\"deleteBlob()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-trash\"\r\n            [label]=\"translationsImageCropper.delete\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            *ngIf=\"fromModal\"\r\n            (onClick)=\"cancelDialog()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-times\"\r\n            [label]=\"translationsImageCropper.cancel\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            icon=\"pi-save\"\r\n            (click)=\"saveImageCropped()\"\r\n            [disabled]=\"!blob\"\r\n            [label]=\"translationsImageCropper.save\"\r\n            class=\"flex align-content-center align-items-center\"\r\n            type=\"text\">\r\n        </w-button>\r\n    </div>    \r\n</div>\r\n    \r\n    ", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:400}.heading5{font-size:1.5rem;line-height:1.8333333333rem;font-weight:600}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:400}.subtitle1,.w-tab-text,.w-panel-title-text,.w-sidebar-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:600}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:600}.body,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:400}.caption,.w-input-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.text846{color:#2e3134}.text700{color:#5f6368}.text500{color:#9aa0a6}.textWhite{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-tertiary-label-text,.w-button-small-text-label-text{color:#2e3134}.w-button-small-icon-text,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:12px}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:400;line-height:16px}.w-button-medium-tertiary-label-text{color:#2e3134}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:400;line-height:24px}.w-button-large-tertiary-label-text{color:#2e3134}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text,.w-view-small-value-text{color:#2e3134}.w-input-no-label-height{height:36px}.w-input-disabled{background-color:#f1f3f4;border-color:#e8eaed;opacity:1}.w-input-small-label-text,.w-input-small-label-disabled{color:#2e3134}.w-input-small-label-disabled{color:#9aa0a6}.w-input-small-placeholder-text,.w-input-small-placeholder-text-only-color{color:#2e3134}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6368}.w-input-small-text-icon,.w-input-small-select-options-text{color:#2e3134}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#2e3134}.w-input-medium-label-disabled{color:#9aa0a6}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#2e3134}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6368}.w-input-medium-text-icon{color:#2e3134}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#2e3134}.w-input-success-alert-text{color:#00db5d;padding:8px;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:8px;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px;margin-top:0}.w-input-alert-message-height{height:32px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#2e3134}.w-panel-content{color:#5f6368}.w-tab-text,.w-chip-text{color:#2e3134}.w-badge-text{font-size:8px;font-weight:700;line-height:8px}.w-table-th-text{color:#2e3134}.w-table-td-text{color:#5f6368}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:32px;padding:7px 15px;border-radius:8px;border-width:1px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:1px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\n"] }]
+            args: [{ selector: 'w-image-cropper', template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n    <div class=\"flex flex-1\" ></div>    \r\n    <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n        <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n            <p-fileUpload #fileUploader\r\n                class=\"w-file-button bg-white\"\r\n                chooseIcon=\"pi pi-image\"\r\n                chooseLabel=\"Choose\"\r\n                (onSelect)=\"myUploader($event)\"\r\n                name=\"filesToUpload[]\" \r\n                [auto]=\"true\"\r\n                [multiple]=\"false\"\r\n                accept=\"image/*\"\r\n                mode=\"basic\"\r\n                accept=\"image/*\" \r\n                [maxFileSize]=\"maxFileSize\">\r\n            </p-fileUpload>\r\n        </span>\r\n    </div>\r\n    <ng-template #imageCropper>\r\n        <div class=\"flex flex-column w-full\">\r\n            <div class=\"flex flex-row align-content-center\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n                    <image-cropper\r\n                            [imageFile]=\"blob\"\r\n                            [imageURL]=\"imageURL\"\r\n                            [maintainAspectRatio]=\"true\"\r\n                            [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n                            [aspectRatio]=\"aspectRatio\"\r\n                            [resizeToWidth]= \"dimensions.width\"\r\n                            [resizeToHeight]=\"dimensions.height\"\r\n                            [cropperMinWidth]=\"128\"\r\n                            [onlyScaleDown]=\"true\"\r\n                            [roundCropper]=\"false\"\r\n                            [canvasRotation]=\"canvasRotation\"\r\n                            [(transform)]=\"transform\"\r\n                            [alignImage]=\"'center'\"\r\n                            [style.display]=\"showCropper ? null : 'none'\"\r\n                            [allowMoveImage]=\"allowMoveImage\"\r\n                            [hidden]=\"hidden\"\r\n                            backgroundColor=\"blue\"\r\n                            format=\"png\"\r\n                            [roundCropper]=\"roundedCropper\"\r\n                            (imageCropped)=\"imageCropped($event)\"\r\n                            (imageLoaded)=\"imageLoaded()\"\r\n                            (cropperReady)=\"cropperReady($event)\"\r\n                            (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n                </div>\r\n                <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n                    <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n                                icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n                                type=\"text\"></w-button>\r\n                        <w-button \r\n                                class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n                                [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n                                icon=\"pi pi-search-minus\" \r\n                                (click)=\"zoomOut()\"\r\n                                type=\"text\"></w-button> \r\n                </div>\r\n                <div class=\"flex flex-1\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n                    <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n                            (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n                            [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n    \r\n            <div class=\"flex flex-1\">\r\n                <div class=\"w-3\"></div>\r\n                <div class=\"flex flex-1  wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-replay\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n                            (click)=\"rotateLeft()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            icon=\"pi pi-refresh\"\r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n                            (click)=\"rotateRight()\"></w-button>\r\n                    <w-button\r\n                            type=\"text\"\r\n                            icon=\"pi pi-arrows-h\" \r\n                            tooltipPosition=\"bottom\"\r\n                            [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n                            (click)=\"flipHorizontal()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n                            icon=\"pi pi-arrows-v\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"flipVertical()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.restore\"\r\n                            icon=\"pi pi-history\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"resetImage()\"></w-button>\r\n                    <w-button \r\n                            type=\"text\"\r\n                            [pTooltip]=\"translationsImageCropper.preview\"\r\n                            icon=\"pi pi-eye\"\r\n                            tooltipPosition=\"bottom\"\r\n                            (click)=\"viewCrop()\"></w-button>\r\n                </div>\r\n                <div class=\"w-3 align-items-end\"></div>\r\n            </div>\r\n        </div>\r\n        \r\n    </ng-template>\r\n    <div class=\"flex flex-1\" ></div>\r\n    <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n        <w-button *ngIf=\"blob\"\r\n            (onClick)=\"deleteBlob()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-trash\"\r\n            [label]=\"translationsImageCropper.delete\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            *ngIf=\"fromModal\"\r\n            (onClick)=\"cancelDialog()\"\r\n            class=\"flex align-content-center align-items-center \"\r\n            icon=\"pi-times\"\r\n            [label]=\"translationsImageCropper.cancel\"\r\n            type=\"text\">\r\n        </w-button>\r\n        <w-button \r\n            icon=\"pi-save\"\r\n            (click)=\"saveImageCropped()\"\r\n            [disabled]=\"!blob\"\r\n            [label]=\"translationsImageCropper.save\"\r\n            class=\"flex align-content-center align-items-center\"\r\n            type=\"text\">\r\n        </w-button>\r\n    </div>    \r\n</div>\r\n    \r\n    ", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:400}.heading5{font-size:1.5rem;line-height:1.8333333333rem;font-weight:600}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:400}.subtitle1,.w-tab-text,.w-panel-title-text,.w-sidebar-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:600}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:600}.body,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.3333333333rem;font-weight:400}.caption,.w-input-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.text846{color:#2e3134}.text700{color:#5f6368}.text500{color:#9aa0a6}.textWhite{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-tertiary-label-text,.w-button-small-text-label-text{color:#2e3134}.w-button-small-icon-text,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:12px}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:400;line-height:16px}.w-button-medium-tertiary-label-text{color:#2e3134}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:400;line-height:24px}.w-button-large-tertiary-label-text{color:#2e3134}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text,.w-view-small-value-text{color:#2e3134}.w-input-no-label-height{height:36px}.w-input-disabled{background-color:#f1f3f4;border-color:#e8eaed;opacity:1}.w-input-small-label-text,.w-input-small-label-disabled{color:#2e3134}.w-input-small-label-disabled{color:#9aa0a6}.w-input-small-label-text-content{padding:12px 8px 8px 0;margin:0}.w-input-small-placeholder-text,.w-input-small-placeholder-text-only-color{color:#2e3134}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6368}.w-input-small-text-icon,.w-input-small-select-options-text{color:#2e3134}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#2e3134}.w-input-medium-label-disabled{color:#9aa0a6}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#2e3134}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6368}.w-input-medium-text-icon{color:#2e3134}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#2e3134}.w-input-success-alert-text{color:#00db5d;padding:8px 8px 0;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#2e3134}.w-panel-content{color:#5f6368}.w-tab-text,.w-chip-text{color:#2e3134}.w-badge-text{font-size:8px;font-weight:700;line-height:8px}.w-table-th-text{color:#2e3134}.w-table-td-text{color:#5f6368}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:32px;padding:7px 15px;border-radius:8px;border-width:1px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:1px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DynamicDialogRef }, { type: i2.ModalService }, { type: i1.DynamicDialogConfig }]; }, propDecorators: { dimensionsInput: [{
                 type: Input
             }], translationsImageCropper: [{