@wertzui/ngx-restworld-client 1.0.2 → 2.0.0

package/fesm2015/wertzui-ngx-restworld-client.js

@@ -1,48 +1,66 @@
 import * as _ from 'lodash';
-import * as i1 from '@wertzui/ngx-hal-client';
-import { Resource, PagedListResource } from '@wertzui/ngx-hal-client';
+import * as i1$1 from '@wertzui/ngx-hal-client';
+import { Resource, PropertyType, PagedListResource, Link, FormsResource, Template } from '@wertzui/ngx-hal-client';
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ContentChild, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Pipe, Injectable, Input, forwardRef, Component, ViewChildren, ContentChild, APP_INITIALIZER, NgModule } from '@angular/core';
+import * as i1 from '@angular/platform-browser';
+import * as i14 from '@angular/forms';
+import { FormGroup, FormArray, FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { __awaiter } from 'tslib';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
-import * as i13 from '@angular/forms';
-import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from 'primeng/api';
+import * as i2$1 from 'primeng/api';
 import { FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
-import * as i3 from '@angular/common';
+import * as i4$1 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i5$1 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i6 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
+import * as i7$1 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i8 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i9$1 from 'primeng/tristatecheckbox';
+import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import * as i2 from 'primeng/fileupload';
+import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import * as i1$3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i3 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i4 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import * as i5 from 'primeng/colorpicker';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/router';
+import * as i7 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i9 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i10 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i12 from 'ngx-valdemort';
+import { ValdemortModule } from 'ngx-valdemort';
+import * as i17 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i4$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i5 from 'primeng/tabview';
+import * as i7$2 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
-import * as i6 from 'primeng/skeleton';
+import * as i8$1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i7 from 'primeng/calendar';
-import { CalendarModule } from 'primeng/calendar';
-import * as i8 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
-import * as i9 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import * as i10 from 'primeng/progressspinner';
+import * as i10$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i11 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i12 from 'primeng/confirmdialog';
+import * as i12$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i14 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i15 from 'primeng/button';
-import * as i16 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i4$1 from 'primeng/table';
+import * as i4$3 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i5$1 from 'primeng/avatar';
+import * as i5$2 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i6$1 from 'primeng/tristatecheckbox';
-import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
-import * as i10$1 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MessagesModule } from 'primeng/messages';
 import { PanelModule } from 'primeng/panel';
@@ -62,7 +80,7 @@ class ProblemDetails extends Resource {
         return resource instanceof ProblemDetails;
     }
     static containsProblemDetailsInformation(resource) {
-        return resource && (resource instanceof ProblemDetails || (resource instanceof Resource && resource.hasOwnProperty('status') && _.isNumber(resource.status) && resource.status >= 100 && resource.status < 600));
+        return resource && (resource instanceof ProblemDetails || (resource instanceof Resource && 'status' in resource && _.isNumber(resource['status']) && resource['status'] >= 100 && resource['status'] < 600));
     }
     static fromResource(resource) {
         if (!ProblemDetails.containsProblemDetailsInformation(resource))
@@ -80,9 +98,51 @@ class RESTworldOptions {
     }
 }
 
+class SafeUrlPipe {
+    constructor(_domSanitizer) {
+        this._domSanitizer = _domSanitizer;
+    }
+    transform(url) {
+        if (_.isString(url))
+            throw new Error(`The given url '${url}' is not a string.`);
+        return this._domSanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
+SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SafeUrlPipe, name: "safeUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeUrl'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+
+/**
+ * Cast super type into type using generics
+ * Return Type obtained by optional @param type OR assignment type.
+ */
+class AsPipe {
+    /**
+     * Cast (S: SuperType) into (T: Type) using @Generics.
+     * @param value (S: SuperType) obtained from input type.
+     * @optional @param type (T CastingType)
+     * type?: { new (): T }
+     * type?: new () => T
+     */
+    transform(value, type) {
+        return value;
+    }
+}
+AsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: AsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: AsPipe, name: "as" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: AsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'as' }]
+        }] });
+
 class AvatarGenerator {
     constructor() {
-        this.getImageOverride = (nameOrEmail) => '';
+        this.getImageOverride = () => '';
     }
     getImage(nameOrEmail) {
         let uri = AvatarGenerator._imageCache.get(nameOrEmail);
@@ -175,6 +235,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImpo
                 type: Input
             }] } });
 
+class FormService {
+    createFormGroupsFromTemplates(templates) {
+        const tabs = Object.fromEntries(Object.entries(templates).map(([name, template]) => [
+            name,
+            this.createFormGroupFromTemplate(template)
+        ]));
+        return tabs;
+    }
+    createFormGroupFromTemplates(templates, ignoredProperties) {
+        const controls = Object.fromEntries(Object.entries(templates)
+            .filter(([key,]) => !ignoredProperties.some(p => key === p))
+            .map(([name, template]) => [
+            name,
+            this.createFormGroupFromTemplate(template)
+        ]));
+        const formGroup = new FormGroup(controls);
+        return formGroup;
+    }
+    createFormArrayFromTemplates(templates, ignoredProperties) {
+        const controls = Object.entries(templates)
+            .filter(([key,]) => !ignoredProperties.some(p => key === p))
+            .map(([, template]) => this.createFormGroupFromTemplate(template));
+        const formArray = new FormArray(controls);
+        return formArray;
+    }
+    createFormGroupFromTemplate(template) {
+        const controls = Object.fromEntries(template.properties.map(p => [
+            p.name,
+            this.createFormControl(p)
+        ]));
+        const formGroup = new FormGroup(controls);
+        return formGroup;
+    }
+    createFormControl(property) {
+        if (property.type === PropertyType.Object)
+            return this.createFormGroupFromTemplate(property._templates['default']);
+        if (property.type === PropertyType.Collection)
+            return this.createFormArrayFromTemplates(property._templates, ['default']);
+        const control = new FormControl(property.value);
+        if (property.max)
+            control.addValidators(Validators.max(property.max));
+        if (property.maxLength)
+            control.addValidators(Validators.maxLength(property.maxLength));
+        if (property.min)
+            control.addValidators(Validators.min(property.min));
+        if (property.minLength)
+            control.addValidators(Validators.minLength(property.minLength));
+        if (property.regex)
+            control.addValidators(Validators.pattern(property.regex));
+        if (property.required)
+            control.addValidators(Validators.required);
+        if (property.type === PropertyType.Email)
+            control.addValidators(Validators.email);
+        return control;
+    }
+}
+FormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: FormService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class RESTworldClient {
     constructor(_halClient, _options) {
         this._halClient = _halClient;
@@ -199,7 +324,7 @@ class RESTworldClient {
     }
     getHomeForced() {
         return __awaiter(this, void 0, void 0, function* () {
-            const header = RESTworldClient.createHeaders(this._options.Version);
+            const header = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
             const response = yield this.halClient.get(this._options.BaseUrl, Resource, ProblemDetails, header);
             return response;
         });
@@ -220,6 +345,15 @@ class RESTworldClient {
             return response;
         });
     }
+    getListByUri(uri, parameters, headers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const link = new Link();
+            link.href = uri;
+            const filledUri = link.fillTemplate(parameters);
+            const response = yield this.halClient.get(filledUri, PagedListResource, ProblemDetails, headers);
+            return response;
+        });
+    }
     getSingle(relOrUri, id, headers, curie) {
         return __awaiter(this, void 0, void 0, function* () {
             let uri;
@@ -249,7 +383,7 @@ class RESTworldClient {
                 throw new Error(`The save link ${saveLink} does not have a save name.`);
             const uri = saveLink.href;
             const method = saveLink.name.toLowerCase();
-            const header = RESTworldClient.createHeaders(this._options.Version);
+            const header = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
             let response;
             switch (method) {
                 case 'put':
@@ -264,13 +398,42 @@ class RESTworldClient {
             return response;
         });
     }
+    getAllForms(resource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const urls = resource.getFormLinkHrefs();
+            const header = RESTworldClient.createHeaders('application/prs.hal-forms+json', this._options.Version);
+            const formsPromises = urls.map(url => this._halClient.get(url, FormsResource, ProblemDetails, header));
+            const formsAndProblems = yield Promise.all(formsPromises);
+            return formsAndProblems;
+        });
+    }
+    submit(template, formValues) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const uri = template.target || '';
+            const method = (_a = template.method) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const header = RESTworldClient.createHeaders('application/prs.hal-forms+json', this._options.Version);
+            let response;
+            switch (method) {
+                case 'put':
+                    response = yield this.halClient.put(uri, formValues, FormsResource, ProblemDetails, header);
+                    break;
+                case 'post':
+                    response = yield this.halClient.post(uri, formValues, FormsResource, ProblemDetails, header);
+                    break;
+                default:
+                    response = yield this.halClient.get(uri, FormsResource, ProblemDetails, header);
+            }
+            return response;
+        });
+    }
     delete(resource) {
         return __awaiter(this, void 0, void 0, function* () {
             const deleteLink = resource.findLink('delete');
             if (!deleteLink)
                 throw new Error(`The resource ${resource} does not have a delete link.`);
             const uri = deleteLink.href;
-            const header = RESTworldClient.createHeaders(this._options.Version);
+            const header = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
             const response = yield this.halClient.delete(uri, ProblemDetails, header);
             return response;
         });
@@ -282,7 +445,7 @@ class RESTworldClient {
     }
     getLinkFromHome(rel, name, curie) {
         const links = this.getLinksFromHome(rel, curie);
-        const link = !!name ? links.find(l => l.name == name) : links[0];
+        const link = name ? links.find(l => l.name === name) : links[0];
         if (!link)
             throw new Error(`The home resource does not have a link with the rel '${this.getFullRel(rel, curie)}' and the name '${name}'.`);
         return link;
@@ -307,9 +470,9 @@ class RESTworldClient {
         const fullRel = `${curie}:${rel}`;
         return fullRel;
     }
-    static createHeaders(version) {
+    static createHeaders(mediaType, version) {
         if (version)
-            return new HttpHeaders({ 'Accept': `v=${version}` });
+            return new HttpHeaders({ 'Accept': `${mediaType || 'application/hal+json'}; v=${version}` });
         return new HttpHeaders();
     }
 }
@@ -342,14 +505,14 @@ class RESTworldClientCollection {
         return this._clients;
     }
 }
-RESTworldClientCollection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldClientCollection, deps: [{ token: i1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
+RESTworldClientCollection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldClientCollection, deps: [{ token: i1$1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
 RESTworldClientCollection.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldClientCollection, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldClientCollection, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HalClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.HalClient }]; } });
 
 class SettingsService {
     constructor(backend, _clients) {
@@ -382,31 +545,397 @@ class SettingsService {
         });
     }
 }
-SettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SettingsService, deps: [{ token: i1$1.HttpBackend }, { token: RESTworldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
+SettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SettingsService, deps: [{ token: i1$2.HttpBackend }, { token: RESTworldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
 SettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SettingsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpBackend }, { type: RESTworldClientCollection }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpBackend }, { type: RESTworldClientCollection }]; } });
+
+class RESTWorldImageViewComponent {
+    constructor() {
+        this.maintainAspectRatio = true;
+        this.aspectRatio = 1;
+        this.resizeToWidth = 0;
+        this.resizeToHeight = 0;
+        this.onlyScaleDown = false;
+        this.containWithinAspectRatio = false;
+        this.backgroundColor = "#ffffff";
+        this.format = 'png';
+        this.disabled = false;
+        this.displayCropDialog = false;
+    }
+    writeValue(obj) {
+        this.uri = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched() {
+        // not needed for this component, but needed to implement the interface
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    showCropDialog() {
+        this.displayCropDialog = true;
+    }
+    imageChanged(event) {
+        this.tempImageFile = event.files[0];
+        this.showCropDialog();
+    }
+    croppedImageChanged(event) {
+        this.tempCroppedUri = event.base64;
+    }
+    acceptCroppedImage() {
+        var _a;
+        this.uri = this.tempCroppedUri;
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.uri);
+        this.closeCropDialog();
+    }
+    closeCropDialog() {
+        var _a;
+        (_a = this.fileUploads) === null || _a === void 0 ? void 0 : _a.forEach(f => f.clear());
+        this.displayCropDialog = false;
+    }
+}
+RESTWorldImageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTWorldImageViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RESTWorldImageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTWorldImageViewComponent, selector: "rw-image", inputs: { alt: "alt", accept: "accept", fileName: "fileName", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", onlyScaleDown: "onlyScaleDown", containWithinAspectRatio: "containWithinAspectRatio", backgroundColor: "backgroundColor", format: "format" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RESTWorldImageViewComponent),
+            multi: true
+        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'false'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" [src]=\"uri\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog header=\"alt\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper #cropper\r\n                 [imageFile]=\"tempImageFile!\"\r\n                 [imageURL]=\"uri!\"\r\n                 [maintainAspectRatio]=\"maintainAspectRatio\"\r\n                 [aspectRatio]=\"aspectRatio\"\r\n                 [resizeToWidth]=\"resizeToWidth\"\r\n                 [resizeToHeight]=\"resizeToHeight\"\r\n                 [onlyScaleDown]=\"onlyScaleDown\"\r\n                 [autoCrop]=\"true\"\r\n                 [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n                 [backgroundColor]=\"backgroundColor\"\r\n                 [format]=\"format\"\r\n                 (imageCropped)=\"croppedImageChanged($event)\"></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)]=\"cropper.backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"cropper.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{height:calc(1rem + 2*8px + 2*1px);cursor:zoom-in;border-radius:3px}a{text-decoration:none;height:calc(1rem + 2*8px + 2px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], components: [{ type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i2.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }, { type: i3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }, { type: i5.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.InputText, selector: "[pInputText]" }, { type: i10.Ripple, selector: "[pRipple]" }], pipes: { "safeUrl": SafeUrlPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTWorldImageViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rw-image',
+                    templateUrl: './restworld-image-view.component.html',
+                    styleUrls: ['./restworld-image-view.component.css'],
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RESTWorldImageViewComponent),
+                            multi: true
+                        }]
+                }]
+        }], propDecorators: { alt: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], fileName: [{
+                type: Input
+            }], maintainAspectRatio: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], resizeToWidth: [{
+                type: Input
+            }], resizeToHeight: [{
+                type: Input
+            }], onlyScaleDown: [{
+                type: Input
+            }], containWithinAspectRatio: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], fileUploads: [{
+                type: ViewChildren,
+                args: [FileUpload]
+            }] } });
+
+class RESTWorldFileViewComponent {
+    constructor() {
+        this.disabled = false;
+    }
+    writeValue(obj) {
+        this.uri = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched() {
+        // not needed for this component, but needed to implement the interface
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    fileChanged(event) {
+        const file = event.files[0];
+        const reader = new FileReader();
+        reader.onload = () => {
+            var _a;
+            this.uri = reader.result;
+            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.uri);
+        };
+        reader.readAsDataURL(file);
+    }
+}
+RESTWorldFileViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTWorldFileViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RESTWorldFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTWorldFileViewComponent, selector: "rw-file", inputs: { accept: "accept", fileName: "fileName" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RESTWorldFileViewComponent),
+            multi: true
+        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload chooseIcon=\"pi-upload fas fa-upload\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'false'\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none;height:calc(1rem + 2*8px + 2px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], components: [{ type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i2.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "safeUrl": SafeUrlPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTWorldFileViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rw-file',
+                    templateUrl: './restworld-file-view.component.html',
+                    styleUrls: ['./restworld-file-view.component.css'],
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RESTWorldFileViewComponent),
+                            multi: true
+                        }]
+                }]
+        }], propDecorators: { accept: [{
+                type: Input
+            }], fileName: [{
+                type: Input
+            }], fileUploads: [{
+                type: ViewChildren,
+                args: [FileUpload]
+            }] } });
+
+class RestworldEditFormComponent {
+    constructor(_formService, _changeDetectorRef, _messageService, _clients) {
+        this._formService = _formService;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._messageService = _messageService;
+        this._clients = _clients;
+        this.FormGroup = FormGroup;
+        this.FormArray = FormArray;
+        this.Number = Number;
+    }
+    get PropertyType() {
+        return PropertyType;
+    }
+    get dateFormat() {
+        return new Date(3333, 10, 22)
+            .toLocaleDateString()
+            .replace("22", "dd")
+            .replace("11", "mm")
+            .replace("3333", "yy")
+            .replace("33", "y");
+    }
+    ngOnInit() {
+        if (!this.formGroup)
+            throw new Error("[formGroup] is required on <rw-form>");
+        if (!this.template)
+            throw new Error("[template] is required on <rw-form>");
+        if (!this.apiName)
+            throw new Error("[apiName] is required on <rw-form>");
+    }
+    getTooltip(resource, keysToExclude) {
+        const tooltip = Object.entries(resource)
+            .filter(([key]) => !(key.startsWith('_') || ['createdAt', 'createdBy', 'lastChangedAt', 'lastChangedBy', 'timestamp'].includes(key) || (keysToExclude === null || keysToExclude === void 0 ? void 0 : keysToExclude.includes(key))))
+            .reduce((prev, [key, value], index) => `${prev}${index === 0 ? '' : '\n'}${key}: ${RestworldEditFormComponent.jsonStringifyWithElipsis(value)}`, '');
+        return tooltip;
+    }
+    static jsonStringifyWithElipsis(value) {
+        const maxLength = 200;
+        const end = 10;
+        const start = maxLength - end - 2;
+        const json = JSON.stringify(value);
+        const shortened = json.length > maxLength ? json.substring(0, start) + '…' + json.substring(json.length - end) : json;
+        return shortened;
+    }
+    getCollectionEntryTemplates(property) {
+        if (!property)
+            return [];
+        return Object.entries(property._templates)
+            .filter(([key,]) => Number.isInteger(Number.parseInt(key)))
+            .map(([, value]) => value);
+    }
+    addNewItemToCollection(property, formArray) {
+        if (!(formArray instanceof FormArray))
+            throw new Error('formArray is not an instance of FormArray.');
+        const maxIndex = Math.max(...Object.keys(property._templates)
+            .map(key => Number.parseInt(key))
+            .filter(key => Number.isSafeInteger(key)));
+        const nextIndex = maxIndex + 1;
+        const defaultTemplate = property._templates['default'];
+        const copiedTemplateDto = JSON.parse(JSON.stringify(defaultTemplate));
+        const copiedTemplate = new Template(copiedTemplateDto);
+        copiedTemplate.title = nextIndex.toString();
+        property._templates[copiedTemplate.title] = copiedTemplate;
+        formArray.push(this._formService.createFormGroupFromTemplate(defaultTemplate));
+    }
+    deleteItemFromCollection(property, formArray, template) {
+        if (!template.title)
+            throw new Error(`Cannot delete the item, because the template '${template}' does not have a title.`);
+        if (!(formArray instanceof FormArray))
+            throw new Error('formArray is not an instance of FormArray.');
+        const templates = property._templates;
+        delete templates[template.title];
+        formArray.removeAt(Number.parseInt(template.title));
+    }
+    collectionItemDropped($event) {
+        const formArray = $event.container.data.formArray;
+        const previousIndex = $event.previousIndex;
+        const currentIndex = $event.currentIndex;
+        const movementDirection = currentIndex > previousIndex ? 1 : -1;
+        // Move in FormArray
+        // We do not need to move the item in the _templates object
+        const movedControl = formArray.at(previousIndex);
+        for (let i = previousIndex; i * movementDirection < currentIndex * movementDirection; i = i + movementDirection) {
+            formArray.setControl(i, formArray.at(i + movementDirection));
+        }
+        formArray.setControl(currentIndex, movedControl);
+        this._changeDetectorRef.markForCheck();
+        console.log($event);
+    }
+    onOptionsFiltered(property, event) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const options = property === null || property === void 0 ? void 0 : property.options;
+            if (!((_a = options === null || options === void 0 ? void 0 : options.link) === null || _a === void 0 ? void 0 : _a.href) || !event.filter || event.filter === '')
+                return;
+            const templatedUri = options.link.href;
+            let filter = `contains(${options.promptField}, '${event.filter}')`;
+            if (((_b = options.valueField) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'id' && !Number.isNaN(Number.parseInt(event.filter)))
+                filter = `(${options.valueField} eq ${event.filter})  or (${filter})`;
+            const response = yield this.getClient().getListByUri(templatedUri, { $filter: filter, $top: 10 });
+            if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
+                const message = `An error occurred while getting the filtered items.`;
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: message, data: response });
+                return;
+            }
+            const items = response.body._embedded.items;
+            options.inline = items;
+        });
+    }
+    getClient() {
+        if (!this.apiName)
+            throw new Error('Cannot get a client, because the apiName is not set.');
+        return this._clients.getClient(this.apiName);
+    }
+}
+RestworldEditFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldEditFormComponent, deps: [{ token: FormService }, { token: i0.ChangeDetectorRef }, { token: i2$1.MessageService }, { token: RESTworldClientCollection }], target: i0.ɵɵFactoryTarget.Component });
+RestworldEditFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RestworldEditFormComponent, selector: "rw-form", inputs: { formGroup: "formGroup", template: "template", apiName: "apiName" }, queries: [{ propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }, { propertyName: "inputOptionsRef", first: true, predicate: ["inputOptions"], descendants: true }, { propertyName: "inputHiddenRef", first: true, predicate: ["inputHidden"], descendants: true }, { propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "inputTextareaRef", first: true, predicate: ["inputTextarea"], descendants: true }, { propertyName: "inputSearchRef", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "inputTelRef", first: true, predicate: ["inputTel"], descendants: true }, { propertyName: "inputUrlRef", first: true, predicate: ["inputUrl"], descendants: true }, { propertyName: "inputEmailRef", first: true, predicate: ["inputEmail"], descendants: true }, { propertyName: "inputPasswordRef", first: true, predicate: ["inputPassword"], descendants: true }, { propertyName: "inputDateRef", first: true, predicate: ["inputDate"], descendants: true }, { propertyName: "inputMonthRef", first: true, predicate: ["inputMonth"], descendants: true }, { propertyName: "inputWeekRef", first: true, predicate: ["inputWeek"], descendants: true }, { propertyName: "inputTimeRef", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "inputDatetimeLocalRef", first: true, predicate: ["inputDatetimeLocal"], descendants: true }, { propertyName: "inputNumberRef", first: true, predicate: ["inputNumber"], descendants: true }, { propertyName: "inputRangeRef", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputColorRef", first: true, predicate: ["inputColor"], descendants: true }, { propertyName: "inputBoolRef", first: true, predicate: ["inputBool"], descendants: true }, { propertyName: "inputDatetimeOffsetRef", first: true, predicate: ["inputDatetimeOffset"], descendants: true }, { propertyName: "inputDurationRef", first: true, predicate: ["inputDuration"], descendants: true }, { propertyName: "inputImageRef", first: true, predicate: ["inputImage"], descendants: true }, { propertyName: "inputFileRef", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "inputObjectRef", first: true, predicate: ["inputObject"], descendants: true }, { propertyName: "inputCollectionRef", first: true, predicate: ["inputCollection"], descendants: true }, { propertyName: "inputDefaultRef", first: true, predicate: ["inputDefault"], descendants: true }], ngImport: i0, template: "<div *ngFor=\"let property of template.properties\" class=\"grid field\" [formGroup]=\"formGroup\">\r\n  <label *ngIf=\"property.type !== PropertyType.Hidden\" [attr.for]=\"property.name\" class=\"col-12 mb-2 md:col-2 md:mb-0\" [class.p-disabled]=\"property.readOnly\" [class.hasChildren]=\"property._templates\">{{property.prompt || property.name}}</label>\r\n  <div class=\"col-12 md:col-10\">\r\n\r\n    <ng-template #defaultInputOptions let-property=\"property\" let-template=\"template\">\r\n\r\n      <ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\r\n        <p-dropdown [formControlName]=\"property.name\" [id]=\"property.name\" [options]=\"property.options.inline\" [filterBy]=\"(property.options.promptField || 'prompt') + ',' + (property.options.valueField || 'value')\" [optionValue]=\"property.options.valueField || 'value'\" [readonly]=\"property.readOnly\" [required]=\"property.required || property.options.minItems > 0\" [filter]=\"true\" [autoDisplayFirst]=\"false\" [showClear]=\"!property.required || property.options.minItems <= 0\" (onFilter)=\"onOptionsFiltered(property, $event)\" styleClass=\"w-full\" [filterPlaceholder]=\"property?.options?.link?.href ? 'search for more results' : ''\">\r\n          <ng-template let-item pTemplate=\"selectedItem\">\r\n            <span [pTooltip]=\"getTooltip(item, [property.options.promptField || 'prompt', property.options.valueField || 'value'])\">{{item[property.options.promptField || 'prompt']}} ({{item[property.options.valueField || 'value']}})</span>\r\n          </ng-template>\r\n          <ng-template let-item pTemplate=\"item\">\r\n            <span [pTooltip]=\"getTooltip(item, [property.options.promptField || 'prompt', property.options.valueField || 'value'])\">{{item[property.options.promptField || 'prompt']}} ({{item[property.options.valueField || 'value']}})</span>\r\n          </ng-template>\r\n        </p-dropdown>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"!property.options.maxItems || property.options.maxItems == 1\">\r\n        <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef || defaultInputOptionsSingle; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\">\r\n        <p-multiSelect [formControlName]=\"property.name\" [id]=\"property.name\" [options]=\"property.options.inline\" [optionLabel]=\"property.options.promptField || 'prompt'\" [optionValue]=\"property.options.valueField || 'value'\" [readonly]=\"property.readOnly\" [selectionLimit]=\"property.options.maxItems\" [required]=\"property.required || property.options.minItems > 0\"></p-multiSelect>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"property.options.maxItems > 1\">\r\n        <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef || defaultInputOptionsMultiple; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n      </ng-container>\r\n\r\n    </ng-template>\r\n    <ng-container *ngIf=\"property.options\">\r\n      <ng-container *ngTemplateOutlet=\"inputOptionsRef || defaultInputOptions; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"!property.options\">\r\n      <div [ngSwitch]=\"property.type\">\r\n\r\n        <ng-template #defaultInputHidden let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"hidden\" [value]=\"property.value\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Hidden\">\r\n          <ng-container *ngTemplateOutlet=\"inputHiddenRef || defaultInputHidden; context:{ property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #defaultInputText let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Text\">\r\n          <ng-container *ngTemplateOutlet=\"inputTextRef || defaultInputText; context:{ property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputTextarea let-property=\"property\" let-template=\"template\">\r\n          <textarea [formControlName]=\"property.name\" [id]=\"property.name\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\" [class.p-disabled]=\"property.readOnly\" [cols]=\"property.cols\" [rows]=\"property.rows\"></textarea>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Textarea\">\r\n          <ng-container *ngTemplateOutlet=\"inputTextareaRef || defaultInputTextarea; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputSearch let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"search\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Search\">\r\n          <ng-container *ngTemplateOutlet=\"inputSearchRef || defaultInputSearch; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputTel let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"tel\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Tel\">\r\n          <ng-container *ngTemplateOutlet=\"inputTelRef || defaultInputTel; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputUrl let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"url\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Url\">\r\n          <ng-container *ngTemplateOutlet=\"inputUrlRef || defaultInputUrl; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputEmail let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"email\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Email\">\r\n          <ng-container *ngTemplateOutlet=\"inputEmailRef || defaultInputEmail; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputPassword let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"password\" pPassword class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Password\">\r\n          <ng-container *ngTemplateOutlet=\"inputPasswordRef || defaultInputPassword; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputDate let-property=\"property\" let-template=\"template\">\r\n          <p-calendar [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Date\">\r\n          <ng-container *ngTemplateOutlet=\"inputDateRef || defaultInputDate; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputMonth let-property=\"property\" let-template=\"template\">\r\n          <p-calendar [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Month\">\r\n          <ng-container *ngTemplateOutlet=\"inputMonthRef || defaultInputMonth; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputWeek let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"week\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Week\">\r\n          <ng-container *ngTemplateOutlet=\"inputWeekRef || defaultInputWeek; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputTime let-property=\"property\" let-template=\"template\">\r\n          <p-calendar [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Time\">\r\n          <ng-container *ngTemplateOutlet=\"inputTimeRef || defaultInputTime; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputDatetimeLocal let-property=\"property\" let-template=\"template\">\r\n          <p-calendar [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.DatetimeLocal\">\r\n          <ng-container *ngTemplateOutlet=\"inputDatetimeLocalRef || defaultInputDatetimeLocal; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputNumber let-property=\"property\" let-template=\"template\">\r\n          <p-inputNumber [formControlName]=\"property.name\" [id]=\"property.name\" mode=\"decimal\" [showButtons]=\"!property.readOnly\" class=\"w-full\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-inputNumber>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Number\">\r\n          <ng-container *ngTemplateOutlet=\"inputNumberRef || defaultInputNumber; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputRange let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"range\" [min]=\"property.min\" [max]=\"property.max\" [step]=\"property.step\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Range\">\r\n          <ng-container *ngTemplateOutlet=\"inputRangeRef || defaultInputRange; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputColor let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"color\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Color\">\r\n          <ng-container *ngTemplateOutlet=\"inputColorRef || defaultInputColor; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputBool let-property=\"property\" let-template=\"template\" let-formGroup=\"formGroup\">\r\n          <p-checkbox *ngIf=\"property.required\" [binary]=\"true\" [formControl]=\"formGroup.controls[property.name]\" [id]=\"property.name\" [readonly]=\"property.readOnly\"></p-checkbox>\r\n          <p-triStateCheckbox *ngIf=\"!property.required\" [formControl]=\"formGroup.controls[property.name]\" [id]=\"property.name\" [readonly]=\"property.readOnly\"></p-triStateCheckbox>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Bool\">\r\n          <ng-container *ngTemplateOutlet=\"inputBoolRef || defaultInputBool; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputDatetimeOffset let-property=\"property\" let-template=\"template\">\r\n          <p-calendar [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.DatetimeOffset\">\r\n          <ng-container *ngTemplateOutlet=\"inputDatetimeOffsetRef || defaultInputDatetimeOffset; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputDuration let-property=\"property\" let-template=\"template\">\r\n          <p-calendar *ngSwitchCase=\"PropertyType.Duration\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Duration\">\r\n          <ng-container *ngTemplateOutlet=\"inputDurationRef || defaultInputDuration; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputImage let-property=\"property\" let-template=\"template\">\r\n          <rw-image [formControlName]=\"property.name\" [accept]=\"property.placeholder\"></rw-image>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Image\">\r\n          <ng-container *ngTemplateOutlet=\"inputImageRef || defaultInputImage; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputFile let-property=\"property\" let-template=\"template\">\r\n          <rw-file [formControlName]=\"property.name\" [fileName]=\"property.name\" [accept]=\"property.placeholder\"></rw-file>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.File\">\r\n          <ng-container *ngTemplateOutlet=\"inputFileRef || defaultInputFile; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputObject let-property=\"property\" let-template=\"template\">\r\n          <div class=\"flex align-items-center\">\r\n            <div class=\"brace\">\r\n            </div>\r\n            <div class=\"w-full\">\r\n              <rw-form [formGroup]=\"(formGroup.controls[property.name] | as : FormGroup)\" [template]=\"property._templates.default\" [apiName]=\"apiName\"></rw-form>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Object\">\r\n          <ng-container *ngTemplateOutlet=\"inputObjectRef || defaultInputObject; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputCollection let-property=\"property\" let-template=\"template\">\r\n          <div class=\"flex align-items-center\">\r\n            <div class=\"brace\">\r\n            </div>\r\n            <div class=\"w-full\" cdkDropList [cdkDropListData]=\"{ property: property, formArray: (formGroup.controls[property.name] | as : FormArray)}\" (cdkDropListDropped)=\"collectionItemDropped($event)\">\r\n              <div *ngFor=\"let template of getCollectionEntryTemplates(property)\" class=\"flex align-items-center\" cdkDrag>\r\n                <i class=\"fas fa-grip-lines\" cdkDragHandle></i>\r\n                <div class=\"brace\">\r\n                </div>\r\n                <div class=\"w-full flex justify-content-end\">\r\n                  <rw-form [formGroup]=\"((formGroup.controls[property.name] | as : FormArray).controls[Number.parseInt(template.title!)] | as : FormGroup)\" [template]=\"template\" [apiName]=\"apiName\" class=\"w-full\"></rw-form>\r\n                  <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(property, formGroup.controls[property.name], template)\"></button>\r\n                </div>\r\n              </div>\r\n              <div class=\"flex justify-content-end w-full\">\r\n                <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection(property, formGroup.controls[property.name])\"></button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-container *ngSwitchCase=\"PropertyType.Collection\">\r\n          <ng-container *ngTemplateOutlet=\"inputCollectionRef || defaultInputCollection; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #defaultInputDefault let-property=\"property\" let-template=\"template\">\r\n          <input [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\r\n        </ng-template>\r\n        <ng-container *ngSwitchDefault>\r\n          <ng-container *ngTemplateOutlet=\"inputDefaultRef || defaultInputDefault; context: { property: property, template: template, formGroup: formGroup, apiName: apiName }\"></ng-container>\r\n        </ng-container>\r\n\r\n      </div>\r\n    </div>\r\n    <val-errors [controlName]=\"property.name || null\">\r\n      <ng-template valError=\"required\">The field '{{property.prompt || property.name}}' is required.</ng-template>\r\n      <ng-template valError=\"email\">The email must be a valid email address.</ng-template>\r\n      <ng-template valError=\"min\" let-error=\"error\">'{{property.prompt || property.name}}' must be equal or greater than or equal to {{ error.min }}.</ng-template>\r\n      <ng-template valError=\"max\" let-error=\"error\">'{{property.prompt || property.name}}' must be smaller than or equal to {{ error.max }}.</ng-template>\r\n      <ng-template valError=\"minlength\" let-error=\"error\">The length of '{{property.prompt || property.name}}' must be equal or greater than or equal to {{ error.requiredLength }}.</ng-template>\r\n      <ng-template valError=\"maxlength\" let-error=\"error\">The length of '{{property.prompt || property.name}}' must be shorter than or equal to {{ error.requiredLength }}.</ng-template>\r\n      <ng-template valError=\"pattern\" let-error=\"error\">The value for '{{property.prompt || property.name}}' does not match the pattern {{ error }}.</ng-template>\r\n      <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\r\n    </val-errors>\r\n  </div>\r\n</div>\r\n", styles: [".brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}.cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}\n"], components: [{ type: i4$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i5$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }, { type: i6.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "touchUI", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "tabindex", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i7$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i8.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { type: i9$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: RESTWorldImageViewComponent, selector: "rw-image", inputs: ["alt", "accept", "fileName", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "onlyScaleDown", "containWithinAspectRatio", "backgroundColor", "format"] }, { type: RESTWorldFileViewComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { type: RestworldEditFormComponent, selector: "rw-form", inputs: ["formGroup", "template", "apiName"] }, { type: i12.ValidationErrorsComponent, selector: "val-errors", inputs: ["control", "controlName", "label"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.InputText, selector: "[pInputText]" }, { type: i14.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i14.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i17.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i17.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i17.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i10.Ripple, selector: "[pRipple]" }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i12.ValidationErrorDirective, selector: "ng-template[valError]", inputs: ["valError"] }], pipes: { "as": AsPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldEditFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rw-form',
+                    templateUrl: './restworld-edit-form.component.html',
+                    styleUrls: ['./restworld-edit-form.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: i0.ChangeDetectorRef }, { type: i2$1.MessageService }, { type: RESTworldClientCollection }]; }, propDecorators: { formGroup: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], inputOptionsSingleRef: [{
+                type: ContentChild,
+                args: ['inputOptionsSingle', { static: false }]
+            }], inputOptionsMultipleRef: [{
+                type: ContentChild,
+                args: ['inputOptionsMultiple', { static: false }]
+            }], inputOptionsRef: [{
+                type: ContentChild,
+                args: ['inputOptions', { static: false }]
+            }], inputHiddenRef: [{
+                type: ContentChild,
+                args: ['inputHidden', { static: false }]
+            }], inputTextRef: [{
+                type: ContentChild,
+                args: ['inputText', { static: false }]
+            }], inputTextareaRef: [{
+                type: ContentChild,
+                args: ['inputTextarea', { static: false }]
+            }], inputSearchRef: [{
+                type: ContentChild,
+                args: ['inputSearch', { static: false }]
+            }], inputTelRef: [{
+                type: ContentChild,
+                args: ['inputTel', { static: false }]
+            }], inputUrlRef: [{
+                type: ContentChild,
+                args: ['inputUrl', { static: false }]
+            }], inputEmailRef: [{
+                type: ContentChild,
+                args: ['inputEmail', { static: false }]
+            }], inputPasswordRef: [{
+                type: ContentChild,
+                args: ['inputPassword', { static: false }]
+            }], inputDateRef: [{
+                type: ContentChild,
+                args: ['inputDate', { static: false }]
+            }], inputMonthRef: [{
+                type: ContentChild,
+                args: ['inputMonth', { static: false }]
+            }], inputWeekRef: [{
+                type: ContentChild,
+                args: ['inputWeek', { static: false }]
+            }], inputTimeRef: [{
+                type: ContentChild,
+                args: ['inputTime', { static: false }]
+            }], inputDatetimeLocalRef: [{
+                type: ContentChild,
+                args: ['inputDatetimeLocal', { static: false }]
+            }], inputNumberRef: [{
+                type: ContentChild,
+                args: ['inputNumber', { static: false }]
+            }], inputRangeRef: [{
+                type: ContentChild,
+                args: ['inputRange', { static: false }]
+            }], inputColorRef: [{
+                type: ContentChild,
+                args: ['inputColor', { static: false }]
+            }], inputBoolRef: [{
+                type: ContentChild,
+                args: ['inputBool', { static: false }]
+            }], inputDatetimeOffsetRef: [{
+                type: ContentChild,
+                args: ['inputDatetimeOffset', { static: false }]
+            }], inputDurationRef: [{
+                type: ContentChild,
+                args: ['inputDuration', { static: false }]
+            }], inputImageRef: [{
+                type: ContentChild,
+                args: ['inputImage', { static: false }]
+            }], inputFileRef: [{
+                type: ContentChild,
+                args: ['inputFile', { static: false }]
+            }], inputObjectRef: [{
+                type: ContentChild,
+                args: ['inputObject', { static: false }]
+            }], inputCollectionRef: [{
+                type: ContentChild,
+                args: ['inputCollection', { static: false }]
+            }], inputDefaultRef: [{
+                type: ContentChild,
+                args: ['inputDefault', { static: false }]
+            }] } });
 
 class RESTworldEditViewComponent {
-    constructor(_clients, _confirmationService, _messageService, _location, _router) {
+    constructor(_clients, _confirmationService, _messageService, _location, _router, _formService, valdemortConfig) {
         this._clients = _clients;
         this._confirmationService = _confirmationService;
         this._messageService = _messageService;
         this._location = _location;
         this._router = _router;
-        this._properties = [];
-        this._formGroup = new FormGroup({});
+        this._formService = _formService;
+        this._templates = {};
+        this._formTabs = {};
         this.isLoading = false;
+        valdemortConfig.errorClasses = 'p-error text-sm';
+    }
+    get PropertyType() {
+        return PropertyType;
     }
-    get properties() {
-        return this._properties;
+    get templates() {
+        return this._templates;
     }
-    get formGroup() {
-        return this._formGroup;
+    get isLoadingForTheFirstTime() {
+        return Object.keys(this.templates).length === 0 && this.isLoading;
+    }
+    get formTabs() {
+        return this._formTabs;
     }
     set apiName(value) {
         this._apiName = value;
@@ -443,39 +972,68 @@ class RESTworldEditViewComponent {
         const length = (_b = (_a = this.resource) === null || _a === void 0 ? void 0 : _a._links["delete"]) === null || _b === void 0 ? void 0 : _b.length;
         return length !== undefined && length > 0;
     }
-    get dateFormat() {
-        return new Date(3333, 10, 22)
-            .toLocaleDateString()
-            .replace("22", "dd")
-            .replace("11", "mm")
-            .replace("3333", "yy")
-            .replace("33", "y");
+    canSubmit(templateName) {
+        const form = this.formTabs[templateName];
+        return form && form.valid;
+    }
+    getTooltip(resource, keysToExclude) {
+        const tooltip = Object.entries(resource)
+            .filter(([key]) => !(key.startsWith('_') || ['createdAt', 'createdBy', 'lastChangedAt', 'lastChangedBy', 'timestamp'].includes(key) || (keysToExclude === null || keysToExclude === void 0 ? void 0 : keysToExclude.includes(key))))
+            .reduce((prev, [key, value], index) => `${prev}${index === 0 ? '' : '\n'}${key}: ${RESTworldEditViewComponent.jsonStringifyWithElipsis(value)}`, '');
+        return tooltip;
+    }
+    static jsonStringifyWithElipsis(value) {
+        const maxLength = 200;
+        const end = 10;
+        const start = maxLength - end - 2;
+        const json = JSON.stringify(value);
+        const shortened = json.length > maxLength ? json.substring(0, start) + '…' + json.substring(json.length - end) : json;
+        return shortened;
     }
     getClient() {
         if (!this.apiName)
             throw new Error('Cannot get a client, because the apiName is not set.');
         return this._clients.getClient(this.apiName);
     }
-    save() {
+    submit(templateName, template, formValue) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.apiName || !this.uri || !this.resource)
-                return;
-            Object.assign(this.resource, this.formGroup.value);
-            const selfHrefBeforeSave = this.resource._links.self[0].href;
             this.isLoading = true;
-            const response = yield this.getClient().save(this.resource);
-            this.isLoading = false;
-            if (!response.ok || ProblemDetails.isProblemDetails(response.body)) {
-                const message = response.status === 409 /* Conflict */ ? 'Someone else modified the resource. Try reloading it and apply your changes again.' : 'Error while saving the resource.';
-                this._messageService.add({ severity: 'error', summary: 'Error', detail: message, data: response });
-            }
-            else {
-                const selfHrefAfterSave = this.resource._links.self[0].href;
-                setTimeout(() => this._messageService.add({ severity: 'success', summary: 'Saved', detail: 'The resource has been saved.' }), 100);
-                if (selfHrefBeforeSave !== selfHrefAfterSave) {
-                    this._router.navigate(['/edit', this.apiName, selfHrefAfterSave]);
+            try {
+                const targetBeforeSave = template.target;
+                const response = yield this.getClient().submit(template, formValue);
+                if (!response.ok) {
+                    let summary = 'Error';
+                    let detail = 'Error while saving the resource.';
+                    if (ProblemDetails.isProblemDetails(response.body)) {
+                        const problemDetails = response.body;
+                        summary = problemDetails.title || summary;
+                        detail = problemDetails.detail || detail;
+                        // display validation errors
+                        if (problemDetails['errors']) {
+                            const form = this.formTabs[templateName];
+                            for (const [key, errorsForKey] of Object.entries(problemDetails['errors'])) {
+                                const path = key.split(/\.|\[/).map(e => e.replace("]", ""));
+                                const formControl = path.reduce((control, pathElement) => (control instanceof FormGroup ? control.controls[pathElement] : control) || control, form);
+                                formControl.setErrors({ remote: errorsForKey });
+                            }
+                        }
+                    }
+                    this._messageService.add({ severity: 'error', summary: summary, detail: detail, data: response, life: 10000 });
+                }
+                else {
+                    const responseResource = response.body;
+                    const targetAfterSave = responseResource._templates[templateName].target;
+                    setTimeout(() => this._messageService.add({ severity: 'success', summary: 'Saved', detail: 'The resource has been saved.' }), 100);
+                    if (targetBeforeSave !== targetAfterSave) {
+                        this._router.navigate(['/edit', this.apiName, responseResource._links.self[0].href]);
+                    }
                 }
             }
+            catch (e) {
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, life: 10000 });
+                console.log(e);
+            }
+            this.isLoading = false;
         });
     }
     showDeleteConfirmatioModal() {
@@ -490,7 +1048,7 @@ class RESTworldEditViewComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.apiName || !this.uri || !this.resource)
                 return;
-            Object.assign(this.resource, this.formGroup.value);
+            Object.assign(this.resource, this.formTabs.value);
             yield this.getClient().delete(this.resource);
             setTimeout(() => this._messageService.add({ severity: 'success', summary: 'Deleted', detail: 'The resource has been deleted.' }), 100);
             this._location.back();
@@ -507,136 +1065,173 @@ class RESTworldEditViewComponent {
             }
             else {
                 this._resource = response.body;
-                this._properties = RESTworldEditViewComponent.createProperyInfos(this._resource);
-                this._formGroup = RESTworldEditViewComponent.createFormGroup(this._properties);
+                this._templates = yield this.getAllTemplates(this._resource);
+                this._formTabs = this._formService.createFormGroupsFromTemplates(this._templates);
             }
             this.isLoading = false;
         });
     }
-    static createFormGroup(properties) {
-        const controls = Object.fromEntries(properties.map(p => [
-            p.field,
-            p.type === 'object' && p.children ? RESTworldEditViewComponent.createFormGroup(p.children) : new FormControl(p.value)
-        ]));
-        const formGroup = new FormGroup(controls);
-        return formGroup;
+    setInitialSelectedOptionsElementsForTemplates(templates) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return Promise.all(Object.values(templates)
+                .map(template => this.setInitialSelectedOptionsElementsForTemplate(template)));
+        });
     }
-    static createProperyInfos(resource) {
-        if (!resource)
-            return [];
-        // Get all distinct properties from all rows
-        // We look at all rows to eliminate possible undefined values
-        const properties = Object.entries(resource)
-            .filter(p => p[0] !== '_links' &&
-            p[0] !== '_embedded' &&
-            p[0] !== 'id' &&
-            p[0] !== 'timestamp');
-        // Check if the rows are entities with change tracking
-        const withoutChangeTrackingProperties = properties.filter(p => p[0] !== 'createdAt' &&
-            p[0] !== 'createdBy' &&
-            p[0] !== 'lastChangedAt' &&
-            p[0] !== 'lastChangedBy');
-        const hasChangeTrackingProperties = withoutChangeTrackingProperties.length < properties.length;
-        // First the id, then all other properties
-        const sortedProperties = [];
-        if (Object.hasOwnProperty('id'))
-            sortedProperties.push(['id', resource['id']]);
-        sortedProperties.push(...withoutChangeTrackingProperties);
-        // And change tracking properties at the end
-        if (hasChangeTrackingProperties) {
-            sortedProperties.push(['createdAt', resource['createdAt']]);
-            sortedProperties.push(['createdBy', resource['createdBy']]);
-            sortedProperties.push(['lastChangedAt', resource['lastChangedAt']]);
-            sortedProperties.push(['lastChangedBy', resource['lastChangedBy']]);
-        }
-        const propertyDescriptions = sortedProperties
-            .map(p => ({
-            field: p[0],
-            value: p[1],
-            label: RESTworldEditViewComponent.toTitleCase(p[0]),
-            type: RESTworldEditViewComponent.getColumnType(p[0], p[1]),
-            isReadOnly: RESTworldEditViewComponent.getIsReadOnly(p[0])
-        }));
-        for (var description of propertyDescriptions) {
-            if (description.type === 'object') {
-                const children = RESTworldEditViewComponent.createProperyInfos(description.value);
-                children.forEach(d => description.field + '.' + d.field);
-                description.children = children;
-            }
-        }
-        return propertyDescriptions;
+    imageChanged(formControl, event) {
+        const file = event.files[0];
+        console.log(file);
+        const reader = new FileReader();
+        reader.onload = () => {
+            const uri = reader.result;
+            console.log(uri);
+            formControl.setValue(uri);
+        };
+        reader.readAsDataURL(file);
     }
-    static getIsReadOnly(field) {
-        return field === 'id' || field === 'createdAt' || field === 'createdBy' || field === 'lastChangedAt' || field === 'lastChangedBy';
+    setInitialSelectedOptionsElementsForTemplate(template) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return Promise.all(template.properties
+                .filter(property => { var _a, _b; return (_b = (_a = property === null || property === void 0 ? void 0 : property.options) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href; })
+                .map(property => this.setInitialSelectedOptionsElementForProperty(property)));
+        });
     }
-    static getColumnType(field, value) {
-        if (value === null || value === undefined)
-            return 'text';
-        if (_.isNumber(value))
-            return 'numeric';
-        if (_.isDate(value))
-            return 'date';
-        if (_.isString(value)) {
-            return 'text';
-        }
-        if (_.isBoolean(value))
-            return 'boolean';
-        if (_.isObject(value))
-            return 'object';
-        if (_.isArray(value))
-            return 'array';
-        return 'text';
+    setInitialSelectedOptionsElementForProperty(property) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const options = property === null || property === void 0 ? void 0 : property.options;
+            if (!((_a = options === null || options === void 0 ? void 0 : options.link) === null || _a === void 0 ? void 0 : _a.href))
+                return;
+            const templatedUri = options.link.href;
+            const filter = `${options.valueField} eq ${property.value}`;
+            const response = yield this.getClient().getListByUri(templatedUri, { $filter: filter, $top: 10 });
+            if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
+                const message = `An error occurred while getting the filtered items.`;
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: message, data: response });
+                return;
+            }
+            const items = response.body._embedded.items;
+            options.inline = items;
+        });
     }
-    static toTitleCase(anyCase) {
-        return anyCase
-            .replace(/(_)+/g, ' ') // underscore to whitespace
-            .replace(/([a-z])([A-Z][a-z])/g, "$1 $2") // insert space before each new word if there is none
-            .replace(/([A-Z][a-z])([A-Z])/g, "$1 $2") // insert space after each word if there is none
-            .replace(/([a-z])([A-Z]+[a-z])/g, "$1 $2") // insert space after single letter word if there is none
-            .replace(/([A-Z]+)([A-Z][a-z][a-z])/g, "$1 $2") // insert space before single letter word if there is none
-            .replace(/([a-z]+)([A-Z0-9]+)/g, "$1 $2") // insert space after numbers
-            .replace(/^./, (match) => match.toUpperCase()); // change first letter to be upper case
+    getAllTemplates(resource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formResponses = yield this.getClient().getAllForms(resource);
+            const failedResponses = formResponses.filter(response => !response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body);
+            if (failedResponses.length !== 0) {
+                for (const response of failedResponses) {
+                    this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resource from the API.', data: response });
+                }
+                return Promise.resolve({});
+            }
+            const formTemplates = Object.assign({}, ...formResponses.map(response => response.body._templates));
+            yield this.setInitialSelectedOptionsElementsForTemplates(formTemplates);
+            return formTemplates;
+        });
     }
 }
-RESTworldEditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2.ConfirmationService }, { token: i2.MessageService }, { token: i3.Location }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
-RESTworldEditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTworldEditViewComponent, selector: "restworld-edit-view", inputs: { apiName: "apiName", uri: "uri" }, queries: [{ propertyName: "visualTabRef", first: true, predicate: ["visualTab"], descendants: true }, { propertyName: "formRef", first: true, predicate: ["form"], descendants: true }, { propertyName: "formRowRef", first: true, predicate: ["formRow"], descendants: true }, { propertyName: "formLabelRef", first: true, predicate: ["formLabel"], descendants: true }, { propertyName: "formInputRef", first: true, predicate: ["formInput"], descendants: true }, { propertyName: "visualTabAdditionalRef", first: true, predicate: ["visualTabAdditional"], descendants: true }, { propertyName: "rawTabRef", first: true, predicate: ["rawTab"], descendants: true }, { propertyName: "buttonsRef", first: true, predicate: ["buttonsRef"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n</div>\r\n\r\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\r\n  <p-tabView>\r\n    <p-tabPanel header=\"Visual\" [disabled]=\"!resource || isLoading\">\r\n      <ng-template #defaultVisualTab>\r\n        <ng-container *ngIf=\"!resource && isLoading\">\r\n          <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"grid field\">\r\n            <p-skeleton class=\"col-12 mb-2 md:col-2 md:mb-0\" height=\"39px\"></p-skeleton>\r\n            <div class=\"col-12 md:col-10\">\r\n              <p-skeleton class=\"w-full\" height=\"39px\"></p-skeleton>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"resource\" class=\"blockable-container\">\r\n          <div class=\"blockable-element\">\r\n            <ng-template #defaultForm let-properties=\"properties\" let-formGroup=\"formGroup\">\r\n              <div [formGroup]=\"formGroup\">\r\n                <div *ngFor=\"let property of properties\" class=\"grid field\">\r\n                  <ng-template #defaultFormRow>\r\n                    <ng-template #defaultFormLabel>\r\n                      <label [attr.for]=\"property.field\" class=\"col-12 mb-2 md:col-2 md:mb-0\" [class.p-disabled]=\"property.isReadOnly\" [class.hasChildren]=\"property.children?.length > 0\">{{property.label}}</label>\r\n                    </ng-template>\r\n                    <ng-container *ngTemplateOutlet=\"formLabelRef || defaultFormLabel; context:{ $implicit: property }\"></ng-container>\r\n                    <ng-template #defaultFormInput let-property let-formGroup=\"formGroup\">\r\n                        <div [ngSwitch]=\"property.type\" class=\"col-12 md:col-10\">\r\n                            <input *ngSwitchCase=\"'text'\" [formControlName]=\"property.field\" [id]=\"property.field\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.isReadOnly\">\r\n                            <p-calendar *ngSwitchCase=\"'date'\" [formControlName]=\"property.field\" [id]=\"property.field\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.isReadOnly\"></p-calendar>\r\n                            <p-inputNumber *ngSwitchCase=\"'numeric'\" [formControlName]=\"property.field\" [id]=\"property.field\" mode=\"decimal\" [showButtons]=\"!property.isReadOnly\" class=\"w-full\" styleClass=\"w-full\" [class.p-disabled]=\"property.isReadOnly\"></p-inputNumber>\r\n                            <p-checkbox *ngSwitchCase=\"'boolean'\" [formControl]=\"formGroup.controls[property.field]\" [id]=\"property.field\" [readonly]=\"property.isReadOnly\"></p-checkbox>\r\n                            <div *ngSwitchCase=\"'object'\">\r\n                                <ng-container *ngTemplateOutlet=\"formRef || defaultForm; context:{ properties: property.children, formGroup: formGroup.controls[property.field] }\"></ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-container *ngTemplateOutlet=\"formInputRef || defaultFormInput; context:{ $implicit: property, formGroup: formGroup }\"></ng-container>\r\n                  </ng-template>\r\n                  <ng-container *ngTemplateOutlet=\"formRowRef || defaultFormRow; context:{ $implicit: property }\"></ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-container *ngTemplateOutlet=\"formRef || defaultForm; context: { properties: properties, formGroup: formGroup }\"></ng-container>\r\n          </div>\r\n          <div class=\"blockable-overlay\" *ngIf=\"isLoading\">\r\n            <p-progressSpinner></p-progressSpinner>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"visualTabRef || defaultVisualTab\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"visualTabAdditionalRef || null; context:{ $implicit: resource, properties: properties, isLoading: isLoading }\"></ng-container>\r\n    </p-tabPanel>\r\n\r\n    <p-tabPanel header=\"Raw\" [disabled]=\"!resource || isLoading\">\r\n      <ng-template #defaultRawTab>\r\n        <pre>{{resource | json}}</pre>\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"rawTabRef || defaultRawTab\"></ng-container>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n\r\n  <div class=\"grid\">\r\n    <div class=\"col\">\r\n      <div class=\"flex justify-content-end w-full\">\r\n        <ng-template #defaultButtons>\r\n          <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\" [disabled]=\"!resource || isLoading || !canSave\"></button>\r\n          <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\" (click)=\"load()\" [disabled]=\"isLoading\"></button>\r\n          <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\" class=\"mx-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\" [disabled]=\"!resource || isLoading || !canDelete\"></button>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"buttonsRef || defaultButtons\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</form>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"], components: [{ type: i5.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { type: i7.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "touchUI", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "tabindex", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i8.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i9.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.InputText, selector: "[pInputText]" }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i13.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i15.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i16.Ripple, selector: "[pRipple]" }], pipes: { "json": i3.JsonPipe } });
+RESTworldEditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: i3$1.Location }, { token: i4$2.Router }, { token: FormService }, { token: i12.ValdemortConfig }], target: i0.ɵɵFactoryTarget.Component });
+RESTworldEditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTworldEditViewComponent, selector: "rw-edit", inputs: { apiName: "apiName", uri: "uri" }, queries: [{ propertyName: "extraTabsRef", first: true, predicate: ["extraTabs"], descendants: true }, { propertyName: "buttonsRef", first: true, predicate: ["buttons"], descendants: true }, { propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }, { propertyName: "inputOptionsRef", first: true, predicate: ["inputOptions"], descendants: true }, { propertyName: "inputHiddenRef", first: true, predicate: ["inputHidden"], descendants: true }, { propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "inputTextareaRef", first: true, predicate: ["inputTextarea"], descendants: true }, { propertyName: "inputSearchRef", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "inputTelRef", first: true, predicate: ["inputTel"], descendants: true }, { propertyName: "inputUrlRef", first: true, predicate: ["inputUrl"], descendants: true }, { propertyName: "inputEmailRef", first: true, predicate: ["inputEmail"], descendants: true }, { propertyName: "inputPasswordRef", first: true, predicate: ["inputPassword"], descendants: true }, { propertyName: "inputDateRef", first: true, predicate: ["inputDate"], descendants: true }, { propertyName: "inputMonthRef", first: true, predicate: ["inputMonth"], descendants: true }, { propertyName: "inputWeekRef", first: true, predicate: ["inputWeek"], descendants: true }, { propertyName: "inputTimeRef", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "inputDatetimeLocalRef", first: true, predicate: ["inputDatetimeLocal"], descendants: true }, { propertyName: "inputNumberRef", first: true, predicate: ["inputNumber"], descendants: true }, { propertyName: "inputRangeRef", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputColorRef", first: true, predicate: ["inputColor"], descendants: true }, { propertyName: "inputBoolRef", first: true, predicate: ["inputBool"], descendants: true }, { propertyName: "inputDatetimeOffsetRef", first: true, predicate: ["inputDatetimeOffset"], descendants: true }, { propertyName: "inputDurationRef", first: true, predicate: ["inputDuration"], descendants: true }, { propertyName: "inputImageRef", first: true, predicate: ["inputImage"], descendants: true }, { propertyName: "inputFileRef", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "inputDefaultRef", first: true, predicate: ["inputDefault"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n</div>\r\n\r\n<p-tabView>\r\n\r\n  <p-tabPanel *ngIf=\"isLoadingForTheFirstTime\" header=\"Loading\">\r\n    <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"grid field\">\r\n      <p-skeleton class=\"col-12 mb-2 md:col-2 md:mb-0\" height=\"39px\"></p-skeleton>\r\n      <div class=\"col-12 md:col-10\">\r\n        <p-skeleton class=\"w-full\" height=\"39px\"></p-skeleton>\r\n      </div>\r\n    </div>\r\n    <div class=\"grid\">\r\n      <div class=\"col\">\r\n        <div class=\"flex justify-content-end w-full\">\r\n          <p-skeleton width=\"120px\" height=\"39px\" class=\"mx-2\"></p-skeleton>\r\n          <p-skeleton width=\"120px\" height=\"39px\" class=\"mx-2\"></p-skeleton>\r\n          <p-skeleton width=\"120px\" height=\"39px\" class=\"mx-2\"></p-skeleton>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel *ngFor=\"let item of templates | keyvalue\" [header]=\"item.value.title || item.key\" [disabled]=\"isLoading\">\r\n    <form [formGroup]=\"formTabs[item.key]\" (ngSubmit)=\"submit(item.key, item.value, formTabs[item.key].value)\">\r\n      <div class=\"blockable-container\">\r\n        <div class=\"blockable-element\">\r\n          <rw-form [formGroup]=\"formTabs[item.key]\" [template]=\"item.value\" [apiName]=\"apiName\"></rw-form>\r\n        </div>\r\n        <div class=\"blockable-overlay\" *ngIf=\"isLoading\">\r\n          <p-progressSpinner></p-progressSpinner>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"grid\">\r\n        <div class=\"col\">\r\n          <div class=\"flex justify-content-end w-full\">\r\n            <ng-template #defaultButtons>\r\n              <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\" [disabled]=\"isLoading || !canSubmit(item.key)\"></button>\r\n              <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\" (click)=\"load()\" [disabled]=\"isLoading\"></button>\r\n              <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\" class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\" [disabled]=\"!resource || isLoading || !canDelete\"></button>\r\n            </ng-template>\r\n            <ng-container *ngTemplateOutlet=\"buttonsRef || defaultButtons\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n  </p-tabPanel>\r\n\r\n  <ng-template #defaultExtraTabs>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"extraTabsRef || defaultExtraTabs\"></ng-container>\r\n\r\n</p-tabView>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: ["::ng-deep .p-tooltip{max-width:-webkit-fit-content!important;max-width:-moz-fit-content!important;max-width:fit-content!important}.blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"], components: [{ type: i7$2.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i7$2.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i8$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { type: RestworldEditFormComponent, selector: "rw-form", inputs: ["formGroup", "template", "apiName"] }, { type: i10$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i10.Ripple, selector: "[pRipple]" }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "keyvalue": i3$1.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldEditViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'restworld-edit-view',
+                    selector: 'rw-edit',
                     templateUrl: './restworld-edit-view.component.html',
                     styleUrls: ['./restworld-edit-view.component.css']
                 }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2.ConfirmationService }, { type: i2.MessageService }, { type: i3.Location }, { type: i4.Router }]; }, propDecorators: { apiName: [{
+        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: i3$1.Location }, { type: i4$2.Router }, { type: FormService }, { type: i12.ValdemortConfig }]; }, propDecorators: { apiName: [{
                 type: Input
             }], uri: [{
                 type: Input
-            }], visualTabRef: [{
+            }], extraTabsRef: [{
                 type: ContentChild,
-                args: ['visualTab', { static: false }]
-            }], formRef: [{
+                args: ['extraTabs', { static: false }]
+            }], buttonsRef: [{
                 type: ContentChild,
-                args: ['form', { static: false }]
-            }], formRowRef: [{
+                args: ['buttons', { static: false }]
+            }], inputOptionsSingleRef: [{
                 type: ContentChild,
-                args: ['formRow', { static: false }]
-            }], formLabelRef: [{
+                args: ['inputOptionsSingle', { static: false }]
+            }], inputOptionsMultipleRef: [{
                 type: ContentChild,
-                args: ['formLabel', { static: false }]
-            }], formInputRef: [{
+                args: ['inputOptionsMultiple', { static: false }]
+            }], inputOptionsRef: [{
                 type: ContentChild,
-                args: ['formInput', { static: false }]
-            }], visualTabAdditionalRef: [{
+                args: ['inputOptions', { static: false }]
+            }], inputHiddenRef: [{
                 type: ContentChild,
-                args: ['visualTabAdditional', { static: false }]
-            }], rawTabRef: [{
+                args: ['inputHidden', { static: false }]
+            }], inputTextRef: [{
                 type: ContentChild,
-                args: ['rawTab', { static: false }]
-            }], buttonsRef: [{
+                args: ['inputText', { static: false }]
+            }], inputTextareaRef: [{
+                type: ContentChild,
+                args: ['inputTextarea', { static: false }]
+            }], inputSearchRef: [{
+                type: ContentChild,
+                args: ['inputSearch', { static: false }]
+            }], inputTelRef: [{
+                type: ContentChild,
+                args: ['inputTel', { static: false }]
+            }], inputUrlRef: [{
+                type: ContentChild,
+                args: ['inputUrl', { static: false }]
+            }], inputEmailRef: [{
+                type: ContentChild,
+                args: ['inputEmail', { static: false }]
+            }], inputPasswordRef: [{
+                type: ContentChild,
+                args: ['inputPassword', { static: false }]
+            }], inputDateRef: [{
+                type: ContentChild,
+                args: ['inputDate', { static: false }]
+            }], inputMonthRef: [{
+                type: ContentChild,
+                args: ['inputMonth', { static: false }]
+            }], inputWeekRef: [{
+                type: ContentChild,
+                args: ['inputWeek', { static: false }]
+            }], inputTimeRef: [{
+                type: ContentChild,
+                args: ['inputTime', { static: false }]
+            }], inputDatetimeLocalRef: [{
+                type: ContentChild,
+                args: ['inputDatetimeLocal', { static: false }]
+            }], inputNumberRef: [{
+                type: ContentChild,
+                args: ['inputNumber', { static: false }]
+            }], inputRangeRef: [{
+                type: ContentChild,
+                args: ['inputRange', { static: false }]
+            }], inputColorRef: [{
+                type: ContentChild,
+                args: ['inputColor', { static: false }]
+            }], inputBoolRef: [{
+                type: ContentChild,
+                args: ['inputBool', { static: false }]
+            }], inputDatetimeOffsetRef: [{
                 type: ContentChild,
-                args: ['buttonsRef', { static: false }]
+                args: ['inputDatetimeOffset', { static: false }]
+            }], inputDurationRef: [{
+                type: ContentChild,
+                args: ['inputDuration', { static: false }]
+            }], inputImageRef: [{
+                type: ContentChild,
+                args: ['inputImage', { static: false }]
+            }], inputFileRef: [{
+                type: ContentChild,
+                args: ['inputFile', { static: false }]
+            }], inputDefaultRef: [{
+                type: ContentChild,
+                args: ['inputDefault', { static: false }]
             }] } });
 
+var ColumnType;
+(function (ColumnType) {
+    ColumnType["text"] = "text";
+    ColumnType["numeric"] = "numeric";
+    ColumnType["boolean"] = "boolean";
+    ColumnType["date"] = "date";
+})(ColumnType || (ColumnType = {}));
 class RESTworldListViewComponent {
     constructor(_clients, _confirmationService, _messageService, avatarGenerator) {
         this._clients = _clients;
@@ -713,12 +1308,12 @@ class RESTworldListViewComponent {
                 return;
             this.isLoading = true;
             this._lastEvent = event;
-            const parameters = RESTworldListViewComponent.createParametersFromEvent(event);
+            const parameters = this.createParametersFromEvent(event);
             const response = yield this.getClient().getList(this.rel, parameters);
             if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
                 this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resources from the API.', data: response });
             }
-            else {
+            else if (response.body) {
                 this.resource = response.body;
                 this.totalRecords = this.resource.totalPages && parameters.$top ? this.resource.totalPages * parameters.$top : undefined;
                 this._columns = this.createColumns();
@@ -745,7 +1340,7 @@ class RESTworldListViewComponent {
     }
     createColumns() {
         if (this.value.length === 0)
-            return [];
+            return this.columns;
         // Get all distinct properties from all rows
         // We look at all rows to eliminate possible undefined values
         const rowsWithProperties = this.value
@@ -754,9 +1349,9 @@ class RESTworldListViewComponent {
             p[0] !== '_embedded' &&
             p[0] !== 'id' &&
             p[0] !== 'timestamp'));
-        let distinctProperties = rowsWithProperties[0];
-        for (let propertiesOfRow of rowsWithProperties) {
-            for (var property of propertiesOfRow) {
+        const distinctProperties = rowsWithProperties[0];
+        for (const propertiesOfRow of rowsWithProperties) {
+            for (const property of propertiesOfRow) {
                 const propertyName = property[0];
                 const propertyValue = property[1];
                 const alreadyFoundPropertyWithSameName = distinctProperties.find(p => p[0] === propertyName);
@@ -794,16 +1389,16 @@ class RESTworldListViewComponent {
     }
     static getColumnType(value) {
         if (value === null || value === undefined)
-            return 'text';
+            return ColumnType.text;
         if (_.isNumber(value))
-            return 'numeric';
+            return ColumnType.numeric;
         if (_.isDate(value))
-            return 'date';
+            return ColumnType.date;
         if (_.isString(value))
-            return 'text';
+            return ColumnType.text;
         if (_.isBoolean(value))
-            return 'boolean';
-        return 'text';
+            return ColumnType.boolean;
+        return ColumnType.text;
     }
     static toTitleCase(anyCase) {
         return anyCase
@@ -815,9 +1410,9 @@ class RESTworldListViewComponent {
             .replace(/([a-z]+)([A-Z0-9]+)/g, "$1 $2") // insert space after numbers
             .replace(/^./, (match) => match.toUpperCase()); // change first letter to be upper case
     }
-    static createParametersFromEvent(event) {
+    createParametersFromEvent(event) {
         const oDataParameters = {
-            $filter: RESTworldListViewComponent.createFilterFromEvent(event),
+            $filter: this.createFilterFromEvent(event),
             $orderby: RESTworldListViewComponent.createOrderByFromEvent(event),
             $top: RESTworldListViewComponent.createTopFromEvent(event),
             $skip: RESTworldListViewComponent.createSkipFromEvent(event)
@@ -837,22 +1432,33 @@ class RESTworldListViewComponent {
         }
         return undefined;
     }
-    static createFilterFromEvent(event) {
+    createFilterFromEvent(event) {
         if (!event.filters)
             return undefined;
         const filter = Object.entries(event.filters)
-            .map(([property, filter]) => RESTworldListViewComponent.createFilterForProperty(property, filter))
-            .filter(filter => !!filter)
+            // The type definition is wrong, event.filters has values of type FilterMetadata[] and not FilterMetadata.
+            .map(([property, filter]) => ({ property: property, filters: filter }))
+            .map(f => this.createFilterForPropertyArray(f.property, f.filters))
+            .filter(f => !!f)
             .join(' and ');
         if (filter === '')
             return undefined;
         return `(${filter})`;
     }
-    static createFilterForProperty(property, filter) {
+    createFilterForPropertyArray(property, filters) {
+        const filter = filters
+            .map(f => this.createFilterForProperty(property, f))
+            .filter(f => !!f)
+            .join(` ${filters[0].operator} `);
+        if (filter === '')
+            return undefined;
+        return `(${filter})`;
+    }
+    createFilterForProperty(property, filter) {
         if (!filter.value)
             return undefined;
         const oDataOperator = RESTworldListViewComponent.createODataOperator(filter.matchMode);
-        const comparisonValue = RESTworldListViewComponent.createComparisonValue(filter.value);
+        const comparisonValue = this.createComparisonValue(property, filter.value);
         switch (oDataOperator) {
             case 'contains':
             case 'not contains':
@@ -895,28 +1501,37 @@ class RESTworldListViewComponent {
                 return 'lt';
             case FilterMatchMode.AFTER:
                 return 'gt';
+            case FilterMatchMode.DATE_AFTER:
+                return 'ge';
+            case FilterMatchMode.DATE_BEFORE:
+                return 'lt';
+            case FilterMatchMode.DATE_IS:
+                return 'eq';
+            case FilterMatchMode.DATE_IS_NOT:
+                return 'ne';
             default:
                 throw Error(`Unknown matchMode ${matchMode}`);
         }
     }
-    static createComparisonValue(value) {
+    createComparisonValue(property, value) {
         if (value === null || value === undefined)
             return 'null';
-        if (_.isNumber(value))
-            return `${value}`;
-        if (_.isDate(value))
-            return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
-        if (_.isString(value)) {
-            const date = new Date(value);
-            if (!isNaN(date.valueOf()))
-                return `cast(${date.toISOString()}, Edm.DateTimeOffset)`;
-            return `'${value}'`;
+        const columns = this.columns.filter(c => c.field === property);
+        if (columns.length !== 1)
+            throw new Error(`Cannot find the column for the property ${property} which is specified in the filter.`);
+        const type = columns[0].type;
+        switch (type) {
+            case ColumnType.boolean:
+                return `${value}`;
+            case ColumnType.date:
+                return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
+            case ColumnType.numeric:
+                return `${value}`;
+            case ColumnType.text:
+                return `'${value}'`;
+            default:
+                throw new Error(`Unknown column type '${type}'`);
         }
-        if (_.isArray(value))
-            return `(${value
-                .map((v) => this.createComparisonValue(v))
-                .join(',')})`;
-        throw new Error(`Unknown type of value: ${value}.`);
     }
 }
 RESTworldListViewComponent._dateFormat = new Date(3333, 10, 22)
@@ -925,16 +1540,16 @@ RESTworldListViewComponent._dateFormat = new Date(3333, 10, 22)
     .replace("11", "MM")
     .replace("3333", "y")
     .replace("33", "yy");
-RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2.ConfirmationService }, { token: i2.MessageService }, { token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
-RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTworldListViewComponent, selector: "restworld-list-view", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", rowsPerPage: "rowsPerPage" }, ngImport: i0, template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\">\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n      <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n        <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n          {{col.header}}\r\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n          <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n        </div>\r\n      </th>\r\n      <th>\r\n        <div class=\"flex justify-content-end\">\r\n          <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n            <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n          </div>\r\n        </div>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n    <tr>\r\n      <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n          <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n        </ng-container>\r\n        <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n        <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n        <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n      </td>\r\n      <td>\r\n        <div class=\"flex justify-content-end\">\r\n          <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n          <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td colspan=\"8\">No entries found.</td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], components: [{ type: i4$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: i4$1.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"] }, { type: i5$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass"] }, { type: i6$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i15.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe } });
+RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
+RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: RESTworldListViewComponent, selector: "rw-list", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", rowsPerPage: "rowsPerPage" }, ngImport: i0, template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\">\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n      <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n        <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n          {{col.header}}\r\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n          <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n        </div>\r\n      </th>\r\n      <th>\r\n        <div class=\"flex justify-content-end\">\r\n          <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n            <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n          </div>\r\n        </div>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n    <tr>\r\n      <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n          <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n        </ng-container>\r\n        <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n        <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n        <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n      </td>\r\n      <td>\r\n        <div class=\"flex justify-content-end\">\r\n          <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n          <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td colspan=\"8\">No entries found.</td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], components: [{ type: i4$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: i4$3.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"] }, { type: i5$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass"] }, { type: i9$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i4$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3$1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'restworld-list-view',
+                    selector: 'rw-list',
                     templateUrl: './restworld-list-view.component.html',
                     styleUrls: ['./restworld-list-view.component.css']
                 }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2.ConfirmationService }, { type: i2.MessageService }, { type: AvatarGenerator }]; }, propDecorators: { editLink: [{
+        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }]; }, propDecorators: { editLink: [{
                 type: Input
             }], apiName: [{
                 type: Input
@@ -951,7 +1566,12 @@ class RestworldClientModule {
 }
 RestworldClientModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldClientModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 RestworldClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldClientModule, declarations: [RESTworldListViewComponent,
-        RESTworldEditViewComponent], imports: [CommonModule,
+        RESTworldEditViewComponent,
+        RESTWorldImageViewComponent,
+        RESTWorldFileViewComponent,
+        SafeUrlPipe,
+        AsPipe,
+        RestworldEditFormComponent], imports: [CommonModule,
         RouterModule,
         FormsModule,
         ReactiveFormsModule,
@@ -971,12 +1591,25 @@ RestworldClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         ProgressSpinnerModule,
         RippleModule,
         TriStateCheckboxModule,
-        AvatarModule], exports: [RESTworldListViewComponent,
-        RESTworldEditViewComponent] });
+        AvatarModule,
+        DropdownModule,
+        MultiSelectModule,
+        FileUploadModule,
+        ValdemortModule,
+        ImageCropperModule,
+        DialogModule,
+        ButtonModule,
+        ColorPickerModule,
+        DragDropModule], exports: [RESTworldListViewComponent,
+        RESTworldEditViewComponent,
+        RESTWorldImageViewComponent,
+        RESTWorldFileViewComponent,
+        SafeUrlPipe] });
 RestworldClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldClientModule, providers: [
         RESTworldClientCollection,
         AvatarGenerator,
         ConfirmationService,
+        FormService,
         MessageService,
         {
             provide: APP_INITIALIZER,
@@ -1005,14 +1638,28 @@ RestworldClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
             ProgressSpinnerModule,
             RippleModule,
             TriStateCheckboxModule,
-            AvatarModule
+            AvatarModule,
+            DropdownModule,
+            MultiSelectModule,
+            FileUploadModule,
+            ValdemortModule,
+            ImageCropperModule,
+            DialogModule,
+            ButtonModule,
+            ColorPickerModule,
+            DragDropModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: RestworldClientModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         RESTworldListViewComponent,
-                        RESTworldEditViewComponent
+                        RESTworldEditViewComponent,
+                        RESTWorldImageViewComponent,
+                        RESTWorldFileViewComponent,
+                        SafeUrlPipe,
+                        AsPipe,
+                        RestworldEditFormComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1035,16 +1682,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImpo
                         ProgressSpinnerModule,
                         RippleModule,
                         TriStateCheckboxModule,
-                        AvatarModule
+                        AvatarModule,
+                        DropdownModule,
+                        MultiSelectModule,
+                        FileUploadModule,
+                        ValdemortModule,
+                        ImageCropperModule,
+                        DialogModule,
+                        ButtonModule,
+                        ColorPickerModule,
+                        DragDropModule
                     ],
                     exports: [
                         RESTworldListViewComponent,
-                        RESTworldEditViewComponent
+                        RESTworldEditViewComponent,
+                        RESTWorldImageViewComponent,
+                        RESTWorldFileViewComponent,
+                        SafeUrlPipe
                     ],
                     providers: [
                         RESTworldClientCollection,
                         AvatarGenerator,
                         ConfirmationService,
+                        FormService,
                         MessageService,
                         {
                             provide: APP_INITIALIZER,
@@ -1064,5 +1724,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarGenerator, LinkNames, ProblemDetails, RESTworldClient, RESTworldClientCollection, RESTworldEditViewComponent, RESTworldListViewComponent, RESTworldOptions, RestworldClientModule, SettingsService, initializeSettings };
+export { AsPipe, AvatarGenerator, ColumnType, FormService, LinkNames, ProblemDetails, RESTWorldFileViewComponent, RESTWorldImageViewComponent, RESTworldClient, RESTworldClientCollection, RESTworldEditViewComponent, RESTworldListViewComponent, RESTworldOptions, RestworldClientModule, RestworldEditFormComponent, SafeUrlPipe, SettingsService, initializeSettings };
 //# sourceMappingURL=wertzui-ngx-restworld-client.js.map