@wertzui/ngx-restworld-client 4.2.0 → 4.2.1

package/fesm2020/wertzui-ngx-restworld-client.mjs

@@ -25,10 +25,11 @@ import * as i4 from 'ngx-image-cropper';
 import { ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
 import * as i2 from 'primeng/fileupload';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import * as i3 from 'primeng/dialog';
+import { Dialog, DialogModule } from 'primeng/dialog';
+import { firstValueFrom } from 'rxjs';
 import * as i1$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3 from 'primeng/dialog';
-import { DialogModule } from 'primeng/dialog';
 import * as i5 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i3$1 from '@angular/common';
@@ -608,7 +609,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
 
 class RESTWorldImageViewComponent {
     constructor() {
-        this._dialogHasBeenOpenedBefore = false;
         this.disabled = false;
         this.displayCropDialog = false;
     }
@@ -624,14 +624,23 @@ class RESTWorldImageViewComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    ngOnInit() {
+        // If no background color is set, we set it to white.
+        // Otherwise the color picker would show red, the input would be empty and the image cropper would show transparent.
+        if (!this.backgroundColor)
+            this.backgroundColor = '#ffffff';
+    }
+    ngAfterViewInit() {
+        // We need to trigger onResize one time, after the opening animation of the dialog has been completed.
+        // Otherwise the image cropper thinks that the image size is 0x0,
+        // because the opening animation hast just begun when the image cropper is first shown.
+        this.dialogs?.forEach(async (d) => {
+            await firstValueFrom(d.onShow);
+            this.imageCroppers?.forEach(i => i.onResize());
+        });
+    }
     showCropDialog() {
         this.displayCropDialog = true;
-        // The image cropper has a bug that stops the image from being visible otherwise.
-        // Changing the image or resizing the window would also cause the image to appear.
-        if (!this._dialogHasBeenOpenedBefore) {
-            this._dialogHasBeenOpenedBefore = true;
-            this.imageCroppers?.forEach(i => i.onResize());
-        }
     }
     imageChanged(event) {
         this.tempImageFile = event.files[0];
@@ -655,7 +664,7 @@ RESTWorldImageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RESTWorldImageViewComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], components: [{ type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i2.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", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }, { type: i3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }, { type: i5.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.InputText, selector: "[pInputText]" }, { type: i10.Ripple, selector: "[pRipple]" }], pipes: { "safeUrl": SafeUrlPipe } });
+        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true }, { propertyName: "dialogs", predicate: Dialog, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], components: [{ type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i2.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", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }, { type: i3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }, { type: i5.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.InputText, selector: "[pInputText]" }, { type: i10.Ripple, selector: "[pRipple]" }], pipes: { "safeUrl": SafeUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTWorldImageViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-image', providers: [{
@@ -715,6 +724,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
             }], imageCroppers: [{
                 type: ViewChildren,
                 args: [ImageCropperComponent]
+            }], dialogs: [{
+                type: ViewChildren,
+                args: [Dialog]
             }] } });
 
 class RESTWorldFileViewComponent {