ngx-wapp-components 1.0.37 → 1.0.38
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.
|
@@ -217,7 +217,7 @@ export class WImageCropperComponent {
|
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
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 });
|
|
220
|
-
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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", "cropperFrameAriaLabel", "output", "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"] }] });
|
|
220
|
+
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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"] }] });
|
|
221
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, decorators: [{
|
|
222
222
|
type: Component,
|
|
223
223
|
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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"] }]
|
|
@@ -2574,7 +2574,7 @@ class WImageCropperComponent {
|
|
|
2574
2574
|
}
|
|
2575
2575
|
}
|
|
2576
2576
|
WImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, deps: [{ token: i1$5.DynamicDialogRef }, { token: ModalService }, { token: i1$5.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
2577
|
-
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: i6.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$1.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$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "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$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
|
|
2577
|
+
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: i6.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$1.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$1.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$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
|
|
2578
2578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, decorators: [{
|
|
2579
2579
|
type: Component,
|
|
2580
2580
|
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:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{font-size:16px}.icon-large-size{font-size:24px}.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:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.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:40px;padding:12px 20px;border-radius:8px;border-width:2px}: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:2px 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"] }]
|