@wertzui/ngx-restworld-client 16.1.6 → 16.3.0

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

@@ -1829,11 +1829,11 @@ class RestWorldDisplayTemplateComponent {
     */
     value = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayTemplateComponent, isStandalone: true, selector: "rw-display-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\n}", styles: [""], dependencies: [{ kind: "component", type: RestWorldDisplayElementComponent, selector: "rw-display-element", inputs: ["apiName", "property", "value"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayTemplateComponent, isStandalone: true, selector: "rw-display-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\r\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\r\n}", styles: [""], dependencies: [{ kind: "component", type: RestWorldDisplayElementComponent, selector: "rw-display-element", inputs: ["apiName", "property", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-display-template', standalone: true, imports: [RestWorldDisplayElementComponent], template: "@for (property of template().properties; track property) {\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\n}" }]
+            args: [{ selector: 'rw-display-template', standalone: true, imports: [RestWorldDisplayElementComponent], template: "@for (property of template().properties; track property) {\r\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\r\n}" }]
         }] });
 
 /**
@@ -1911,16 +1911,20 @@ class RestWorldFileComponent {
         const reader = new FileReader();
         reader.onload = () => {
             this.uri.set(reader.result);
-            this.onChange?.(this.uri);
+            this.onChange?.(this.uri());
         };
         reader.readAsDataURL(file);
     }
+    deleteFile() {
+        this.uri.set(undefined);
+        this.onChange?.(this.uri());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldFileComponent, isStandalone: true, selector: "rw-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RestWorldFileComponent),
                 multi: true
-            }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
+            }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n    @if (uri()) {\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteFile()\"/>\r\n    }\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFileComponent, decorators: [{
             type: Component,
@@ -1928,7 +1932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RestWorldFileComponent),
                             multi: true
-                        }], imports: [ButtonModule, FileUploadModule, SafeUrlPipe], template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
+                        }], imports: [ButtonModule, FileUploadModule, SafeUrlPipe], template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n    @if (uri()) {\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteFile()\"/>\r\n    }\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
         }] });
 
 /**
@@ -2034,7 +2038,7 @@ class RestWorldImageComponent {
     }
     acceptCroppedImage() {
         this.uri.set(this.tempCroppedUri);
-        this.onChange?.(this.uri);
+        this.onChange?.(this.uri());
         this.closeCropDialog();
     }
     closeCropDialog() {
@@ -2044,6 +2048,10 @@ class RestWorldImageComponent {
     croppedImageChanged(event) {
         this.tempCroppedUri = event.base64 ?? undefined;
     }
+    deleteImage() {
+        this.uri.set(undefined);
+        this.onChange?.(this.uri());
+    }
     imageChanged(event) {
         this.tempImageFile.set(event.files[0]);
         this.showCropDialog();
@@ -2068,7 +2076,7 @@ class RestWorldImageComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RestWorldImageComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "dialogs", predicate: Dialog, descendants: true, isSignal: true }, { propertyName: "fileUploads", predicate: FileUpload, descendants: true, isSignal: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n    }\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()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\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}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+            }], viewQueries: [{ propertyName: "dialogs", predicate: Dialog, descendants: true, isSignal: true }, { propertyName: "fileUploads", predicate: FileUpload, descendants: true, isSignal: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail mr-1\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteImage()\"/>\r\n    }\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()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\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}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldImageComponent, decorators: [{
             type: Component,
@@ -2076,7 +2084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RestWorldImageComponent),
                             multi: true
-                        }], imports: [SafeUrlPipe, ButtonModule, ImageCropperComponent, FileUploadModule, DialogModule, ColorPickerModule, FormsModule], template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n    }\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()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\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}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
+                        }], imports: [SafeUrlPipe, ButtonModule, ImageCropperComponent, FileUploadModule, DialogModule, ColorPickerModule, FormsModule], template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail mr-1\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteImage()\"/>\r\n    }\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()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\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}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2249,8 +2257,14 @@ class PropertyAttributes {
                 this.renderer.setAttribute(nativeElement, "step", property.step.toString());
             if (property.required)
                 this.renderer.setAttribute(nativeElement, "required", "true");
-            if (property.readOnly)
-                this.renderer.addClass(nativeElement, "p-disabled");
+            if (property.readOnly) {
+                // If the element is a textarea, we set the disabled property, otherwise we add the p-disabled class.
+                // This is because the p-disabled class prevents scrolling and resizing of the textarea, which is not desired.
+                if (nativeElement instanceof HTMLTextAreaElement)
+                    this.renderer.setAttribute(nativeElement, "disabled", "disabled");
+                else
+                    this.renderer.addClass(nativeElement, "p-disabled");
+            }
             if (property.cols)
                 this.renderer.setAttribute(nativeElement, "cols", property.cols.toString());
             if (property.rows)
@@ -2868,7 +2882,7 @@ class RestWorldInputSimpleComponent extends RestWorldInputBaseComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RestWorldInputSimpleComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "_inputChild", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_controlChild", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@switch(property().type) {\n    @case (PropertyType.Textarea) {\n        @if (useTemplateDrivenForms()){\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n        @else {\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n    }\n    @case (PropertyType.Date) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Month) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Time) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.DatetimeLocal) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Number) {\n        @if (useTemplateDrivenForms()) {\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n        @else {\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n    }\n    @case (PropertyType.Bool) {\n        @if (useTemplateDrivenForms()) {\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\n        }\n        @else {\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\n        }\n    }\n    @case (PropertyType.DatetimeOffset) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Duration) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Image) {\n        @if (useTemplateDrivenForms()) {\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n        @else {\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n    }\n    @case (PropertyType.File) {\n        @if (useTemplateDrivenForms()) {\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n        @else {\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n    }\n    @default {\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\n        @if (useTemplateDrivenForms()) {\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\n        }\n        @else {\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\n        }\n    }\n}\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: TriStateCheckbox, selector: "p-tri-state-checkbox, p-tri-state-checkBox, p-tri-state-check-box, rw-tri-state-checkbox, rw-tri-state-checkBox, rw-tri-state-check-box", inputs: ["value", "name", "disabled", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "model", "variant"], outputs: ["disabledChange", "modelChange", "onChange", "onFocus", "onBlur"] }, { kind: "component", type: RestWorldImageComponent, selector: "rw-image", inputs: ["property", "backgroundColor", "displayCropDialog"], outputs: ["backgroundColorChange", "displayCropDialogChange"] }, { kind: "component", type: RestWorldFileComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: DefaultPropertyValueAccessor, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]" }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyInputNumberAttributes, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+            }], viewQueries: [{ propertyName: "_inputChild", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_controlChild", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: TriStateCheckbox, selector: "p-tri-state-checkbox, p-tri-state-checkBox, p-tri-state-check-box, rw-tri-state-checkbox, rw-tri-state-checkBox, rw-tri-state-check-box", inputs: ["value", "name", "disabled", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "model", "variant"], outputs: ["disabledChange", "modelChange", "onChange", "onFocus", "onBlur"] }, { kind: "component", type: RestWorldImageComponent, selector: "rw-image", inputs: ["property", "backgroundColor", "displayCropDialog"], outputs: ["backgroundColorChange", "displayCropDialogChange"] }, { kind: "component", type: RestWorldFileComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: DefaultPropertyValueAccessor, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]" }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyInputNumberAttributes, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputSimpleComponent, decorators: [{
             type: Component,
@@ -2876,7 +2890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RestWorldInputSimpleComponent),
                             multi: true
-                        }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [DatePicker, InputNumber, TriStateCheckbox, RestWorldImageComponent, RestWorldFileComponent, InputText, HalFormsModule, FormsModule], template: "@switch(property().type) {\n    @case (PropertyType.Textarea) {\n        @if (useTemplateDrivenForms()){\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n        @else {\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n    }\n    @case (PropertyType.Date) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Month) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Time) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.DatetimeLocal) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Number) {\n        @if (useTemplateDrivenForms()) {\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n        @else {\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n    }\n    @case (PropertyType.Bool) {\n        @if (useTemplateDrivenForms()) {\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\n        }\n        @else {\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\n        }\n    }\n    @case (PropertyType.DatetimeOffset) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Duration) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Image) {\n        @if (useTemplateDrivenForms()) {\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n        @else {\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n    }\n    @case (PropertyType.File) {\n        @if (useTemplateDrivenForms()) {\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n        @else {\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n    }\n    @default {\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\n        @if (useTemplateDrivenForms()) {\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\n        }\n        @else {\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\n        }\n    }\n}\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"] }]
+                        }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [DatePicker, InputNumber, TriStateCheckbox, RestWorldImageComponent, RestWorldFileComponent, InputText, HalFormsModule, FormsModule], template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"] }]
         }], ctorParameters: () => [] });
 /**
  * A collection of `<rw-form>` elements automatically created from a template.
@@ -2899,11 +2913,11 @@ class RestWorldInputTemplateComponent {
      */
     template = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldInputTemplateComponent, isStandalone: true, selector: "rw-input-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\n}\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldInputTemplateComponent, isStandalone: true, selector: "rw-input-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-input-template', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [RestWorldFormElementComponent], template: "@for (property of template().properties; track property) {\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\n}\n" }]
+            args: [{ selector: 'rw-input-template', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [RestWorldFormElementComponent], template: "@for (property of template().properties; track property) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n" }]
         }] });
 
 /**
@@ -3744,11 +3758,11 @@ class RestWorldTableColumnFilterElementComponent {
         this._formValueChangesSubscription?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, deps: [{ token: i1$1.FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: RestWorldTableColumnFilterElementComponent, isStandalone: true, selector: "rw-table-column-filter-element", inputs: { filterConstraint: { classPropertyName: "filterConstraint", publicName: "filterConstraint", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"form()\">\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: RestWorldTableColumnFilterElementComponent, isStandalone: true, selector: "rw-table-column-filter-element", inputs: { filterConstraint: { classPropertyName: "filterConstraint", publicName: "filterConstraint", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-table-column-filter-element', imports: [RestWorldInputComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form()\">\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\n</form>\n" }]
+            args: [{ selector: 'rw-table-column-filter-element', imports: [RestWorldInputComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormService }] });
 
 /**
@@ -4104,7 +4118,7 @@ class RestWorldTableComponent {
         return Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${prefix}${key}`, value]));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldTableComponent, deps: [{ token: i2$3.ControlContainer }, { token: i1$1.FormService }, { token: i3$4.Router }, { token: i3$4.ActivatedRoute }, { token: i4$2.PrimeNG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldTableComponent, isStandalone: true, selector: "rw-table", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, cellStyleClass: { classPropertyName: "cellStyleClass", publicName: "cellStyleClass", isSignal: true, isRequired: false, transformFunction: null }, editTemplate: { classPropertyName: "editTemplate", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, oDataParameters: { classPropertyName: "oDataParameters", publicName: "oDataParameters", isSignal: true, isRequired: false, transformFunction: null }, reflectParametersInUrl: { classPropertyName: "reflectParametersInUrl", publicName: "reflectParametersInUrl", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowMenu: { classPropertyName: "rowMenu", publicName: "rowMenu", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: true, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuAsColumn: { classPropertyName: "showRowMenuAsColumn", publicName: "showRowMenuAsColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuOnRightClick: { classPropertyName: "showRowMenuOnRightClick", publicName: "showRowMenuOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, urlParameterPrefix: { classPropertyName: "urlParameterPrefix", publicName: "urlParameterPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { oDataParameters: "oDataParametersChange", selectedRows: "selectedRowsChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table\n  #table\n  [value]=\"rows()\"\n  [columns]=\"columns()\"\n  [lazy]=\"true\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"true\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n  [rows]=\"rowsPerPage()\"\n  [totalRecords]=\"totalRecords()\"\n  [loading]=\"isLoading()\"\n  sortMode=\"multiple\"\n  [multiSortMeta]=\"multiSortMeta()\"\n  [styleClass]=\"styleClass()\"\n  [tableStyle]=\"tableStyle()\"\n  [scrollable]=\"scrollable()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [selectionMode]=\"selectionMode()\"\n  [rowHover]=\"rowHover()\"\n  [(selection)]=\"selectedRows\"\n  [filters]=\"$any(filters())\"\n  [first]=\"rowsBeforeCurrentPage()\"\n  >\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        @for (col of columns; track col) {\n            <th [pSortableColumn]=\"col.name\">\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\n                    {{col.prompt}}\n                    @if(!col.readOnly) {\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                        <p-columnFilter #f\n                            [type]=\"toColumnFilterType(col.type)\"\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\n                            matchMode=\"noFilter\"\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\n                            [showMatchModes]=\"true\"\n                            [field]=\"col.name\"\n                            display=\"menu\"\n                            [maxConstraints]=\"100\"\n                            [class.has-filter]=\"f.hasFilter\">\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\n                        </ng-template>\n                        </p-columnFilter>\n                    }\n                </div>\n            </th>\n        }\n        @if (showMenuColumn()) {\n            <th>\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\n            </th>\n        }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\n        @for (col of columns; track col) {\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\n                @let fomrArray = formArray();\n                @if (showInputField(col) && fomrArray) {\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\n                    </ng-container>\n                }\n                @else {\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\n                }\n            </td>\n        }\n        @if (showMenuColumn()) {\n            <td>\n                @if (showRowMenuAsColumn()) {\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\n                }\n            </td>\n        }\n    </tr>\n  </ng-template>\n</p-table>\n\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: ["items"] }, { kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldTableColumnFilterElementComponent, selector: "rw-table-column-filter-element", inputs: ["filterConstraint", "property", "apiName", "value"] }], viewProviders: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldTableComponent, isStandalone: true, selector: "rw-table", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, cellStyleClass: { classPropertyName: "cellStyleClass", publicName: "cellStyleClass", isSignal: true, isRequired: false, transformFunction: null }, editTemplate: { classPropertyName: "editTemplate", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, oDataParameters: { classPropertyName: "oDataParameters", publicName: "oDataParameters", isSignal: true, isRequired: false, transformFunction: null }, reflectParametersInUrl: { classPropertyName: "reflectParametersInUrl", publicName: "reflectParametersInUrl", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowMenu: { classPropertyName: "rowMenu", publicName: "rowMenu", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: true, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuAsColumn: { classPropertyName: "showRowMenuAsColumn", publicName: "showRowMenuAsColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuOnRightClick: { classPropertyName: "showRowMenuOnRightClick", publicName: "showRowMenuOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, urlParameterPrefix: { classPropertyName: "urlParameterPrefix", publicName: "urlParameterPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { oDataParameters: "oDataParametersChange", selectedRows: "selectedRowsChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"true\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  responsiveLayout=\"scroll\"\r\n  [paginator]=\"true\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [styleClass]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        <p-columnFilter #f\r\n                            [type]=\"toColumnFilterType(col.type)\"\r\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                            matchMode=\"noFilter\"\r\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                            [showMatchModes]=\"true\"\r\n                            [field]=\"col.name\"\r\n                            display=\"menu\"\r\n                            [maxConstraints]=\"100\"\r\n                            [class.has-filter]=\"f.hasFilter\">\r\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                        </ng-template>\r\n                        </p-columnFilter>\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\r\n        @for (col of columns; track col) {\r\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\r\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                    </ng-container>\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: ["items"] }, { kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldTableColumnFilterElementComponent, selector: "rw-table-column-filter-element", inputs: ["filterConstraint", "property", "apiName", "value"] }], viewProviders: [{
                 provide: ControlContainer,
                 deps: [[Optional, FormArrayName]],
                 useFactory: (arrayName) => arrayName,
@@ -4116,7 +4130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                             provide: ControlContainer,
                             deps: [[Optional, FormArrayName]],
                             useFactory: (arrayName) => arrayName,
-                        }], imports: [TableModule, RestWorldMenuButtonComponent, RestWorldInputComponent, RestWorldDisplayComponent, ReactiveFormsModule, ContextMenuModule, RestWorldTableColumnFilterElementComponent, RestWorldTableColumnFilterElementComponent], template: "<p-table\n  #table\n  [value]=\"rows()\"\n  [columns]=\"columns()\"\n  [lazy]=\"true\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"true\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n  [rows]=\"rowsPerPage()\"\n  [totalRecords]=\"totalRecords()\"\n  [loading]=\"isLoading()\"\n  sortMode=\"multiple\"\n  [multiSortMeta]=\"multiSortMeta()\"\n  [styleClass]=\"styleClass()\"\n  [tableStyle]=\"tableStyle()\"\n  [scrollable]=\"scrollable()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [selectionMode]=\"selectionMode()\"\n  [rowHover]=\"rowHover()\"\n  [(selection)]=\"selectedRows\"\n  [filters]=\"$any(filters())\"\n  [first]=\"rowsBeforeCurrentPage()\"\n  >\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        @for (col of columns; track col) {\n            <th [pSortableColumn]=\"col.name\">\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\n                    {{col.prompt}}\n                    @if(!col.readOnly) {\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                        <p-columnFilter #f\n                            [type]=\"toColumnFilterType(col.type)\"\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\n                            matchMode=\"noFilter\"\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\n                            [showMatchModes]=\"true\"\n                            [field]=\"col.name\"\n                            display=\"menu\"\n                            [maxConstraints]=\"100\"\n                            [class.has-filter]=\"f.hasFilter\">\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\n                        </ng-template>\n                        </p-columnFilter>\n                    }\n                </div>\n            </th>\n        }\n        @if (showMenuColumn()) {\n            <th>\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\n            </th>\n        }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\n        @for (col of columns; track col) {\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\n                @let fomrArray = formArray();\n                @if (showInputField(col) && fomrArray) {\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\n                    </ng-container>\n                }\n                @else {\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\n                }\n            </td>\n        }\n        @if (showMenuColumn()) {\n            <td>\n                @if (showRowMenuAsColumn()) {\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\n                }\n            </td>\n        }\n    </tr>\n  </ng-template>\n</p-table>\n\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"] }]
+                        }], imports: [TableModule, RestWorldMenuButtonComponent, RestWorldInputComponent, RestWorldDisplayComponent, ReactiveFormsModule, ContextMenuModule, RestWorldTableColumnFilterElementComponent, RestWorldTableColumnFilterElementComponent], template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"true\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  responsiveLayout=\"scroll\"\r\n  [paginator]=\"true\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [styleClass]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        <p-columnFilter #f\r\n                            [type]=\"toColumnFilterType(col.type)\"\r\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                            matchMode=\"noFilter\"\r\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                            [showMatchModes]=\"true\"\r\n                            [field]=\"col.name\"\r\n                            display=\"menu\"\r\n                            [maxConstraints]=\"100\"\r\n                            [class.has-filter]=\"f.hasFilter\">\r\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                        </ng-template>\r\n                        </p-columnFilter>\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\r\n        @for (col of columns; track col) {\r\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\r\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                    </ng-container>\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.ControlContainer }, { type: i1$1.FormService }, { type: i3$4.Router }, { type: i3$4.ActivatedRoute }, { type: i4$2.PrimeNG }] });
 var ColumnFilterType;
 (function (ColumnFilterType) {