@wertzui/ngx-restworld-client 7.2.0 → 8.0.0

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

@@ -1,68 +1,70 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Pipe, forwardRef, ViewChildren, ContentChild, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Pipe, forwardRef, ViewChildren, ContentChild, EventEmitter, Output, ViewChild, APP_INITIALIZER, NgModule } from '@angular/core';
 import * as i2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i3 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
+import * as i5 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormArray, UntypedFormControl, Validators, ControlContainer, FormGroupDirective, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from 'primeng/fileupload';
+import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
 import * as _ from 'lodash';
-import * as i1$1 from '@wertzui/ngx-hal-client';
-import { Resource, PropertyType, FormsResource, Link, PagedListResource, PropertyPromptDisplayType, Template } from '@wertzui/ngx-hal-client';
 import * as i1 from '@angular/platform-browser';
-import * as i5 from '@angular/forms';
-import { UntypedFormGroup, UntypedFormArray, UntypedFormControl, Validators, NG_VALUE_ACCESSOR, FormGroup, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2$1 from 'primeng/api';
-import { FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
+import * as i1$1 from '@wertzui/ngx-hal-client';
+import { Resource, FormsResource, Link, PagedListResource, PropertyType, Property, NumberTemplate } from '@wertzui/ngx-hal-client';
 import { HttpHeaders } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i2$3 from 'primeng/api';
+import { FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
+import * as i7 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import * as i8 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i2$2 from 'ngx-valdemort';
+import { ValdemortModule } from 'ngx-valdemort';
+import * as i9$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i13 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i14 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
 import * as i4$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i8$1 from 'primeng/inputnumber';
+import * as i16 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i9$1 from 'primeng/calendar';
+import * as i17 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i5$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i11 from 'primeng/checkbox';
+import * as i18 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i6 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i13 from 'primeng/tristatecheckbox';
+import * as i19 from 'primeng/tristatecheckbox';
 import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
-import * as i14 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
-import * as i15 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i16 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 i8 from 'ngx-image-cropper';
+import * as i8$1 from 'ngx-image-cropper';
 import { ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
-import * as i7 from 'primeng/fileupload';
-import { FileUpload, FileUploadModule } from 'primeng/fileupload';
 import * as i9 from 'primeng/dialog';
 import { Dialog, DialogModule } from 'primeng/dialog';
 import * as i10 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i4$2 from '@angular/router';
+import * as i3$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i10$1 from 'primeng/confirmdialog';
+import * as i5$1 from 'primeng/splitbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i3$3 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i7$1 from 'primeng/contextmenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import * as i5$2 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i11$1 from 'primeng/toast';
+import * as i6 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i12 from 'primeng/tabview';
+import * as i7$2 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
-import * as i13$1 from 'primeng/skeleton';
+import * as i8$2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i14$1 from 'primeng/progressspinner';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i7$1 from 'primeng/table';
-import { TableModule } from 'primeng/table';
-import * as i13$2 from 'primeng/splitbutton';
-import { SplitButtonModule } from 'primeng/splitbutton';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MessagesModule } from 'primeng/messages';
 import { PanelModule } from 'primeng/panel';
@@ -206,29 +208,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
                 type: Input
             }] } });
 
-class ProblemDetails extends Resource {
-    static isProblemDetails(resource) {
-        return resource instanceof ProblemDetails;
-    }
-    static containsProblemDetailsInformation(resource) {
-        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))
-            throw new Error(`The resource ${resource} does not have problem details.`);
-        return Object.assign(new ProblemDetails(), resource);
-    }
-}
-
-class RESTworldOptions {
-    constructor(BaseUrl, Version) {
-        this.BaseUrl = BaseUrl;
-        this.Version = Version;
-        if (!BaseUrl.endsWith('/'))
-            throw new Error(`The provided BaseUrl '${BaseUrl}' does not end with a slash '/'.`);
-    }
-}
-
 class SafeUrlPipe {
     constructor(_domSanitizer) {
         this._domSanitizer = _domSanitizer;
@@ -248,255 +227,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
                 }]
         }], 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;
+class RestWorldFileComponent {
+    constructor() {
+        this.disabled = false;
     }
-}
-AsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: AsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: AsPipe, name: "as" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: AsPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'as' }]
-        }] });
-
-class FormService {
-    createFormGroupsFromTemplates(templates) {
-        const tabs = Object.fromEntries(Object.entries(templates).map(([name, template]) => [
-            name,
-            this.createFormGroupFromTemplate(template)
-        ]));
-        return tabs;
+    writeValue(obj) {
+        this.uri = obj;
     }
-    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 UntypedFormGroup(controls);
-        return formGroup;
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    createFormArrayFromTemplates(templates, ignoredProperties) {
-        const controls = Object.entries(templates)
-            .filter(([key,]) => !ignoredProperties.some(p => key === p))
-            .map(([, template]) => this.createFormGroupFromTemplate(template));
-        const formArray = new UntypedFormArray(controls);
-        return formArray;
+    registerOnTouched() {
+        // not needed for this component, but needed to implement the interface
     }
-    createFormGroupFromTemplate(template) {
-        const controls = Object.fromEntries(template.properties.map(p => [
-            p.name,
-            this.createFormControl(p)
-        ]));
-        const formGroup = new UntypedFormGroup(controls);
-        return formGroup;
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
-    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 UntypedFormControl(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;
+    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);
     }
 }
-FormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+RestWorldFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldFileComponent, selector: "rw-file", inputs: { accept: "accept", fileName: "fileName" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RestWorldFileComponent),
+            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 || ''\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-file', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RestWorldFileComponent),
+                            multi: true
+                        }], 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 || ''\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
+        }], propDecorators: { accept: [{
+                type: Input
+            }], fileName: [{
+                type: Input
+            }], fileUploads: [{
+                type: ViewChildren,
+                args: [FileUpload]
+            }] } });
 
-class ODataService {
-    static createFilterForProperty(property, filter) {
-        if (!filter.value)
-            return undefined;
-        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
-        const comparisonValue = ODataService.createComparisonValue(property, filter.value);
-        switch (oDataOperator) {
-            case 'contains':
-            case 'not contains':
-            case 'startswith':
-            case 'endswith':
-                return `${oDataOperator}(${property}, ${comparisonValue})`;
-            default:
-                return `${property} ${oDataOperator} ${comparisonValue}`;
-        }
+class ProblemDetails extends Resource {
+    static isProblemDetails(resource) {
+        return resource instanceof ProblemDetails;
     }
-    static createFilterForPropertyArray(property, filters) {
-        const filter = filters
-            .map(f => ODataService.createFilterForProperty(property, f))
-            .filter(f => !!f)
-            .join(` ${filters[0].operator} `);
-        if (filter === '')
-            return undefined;
-        return `(${filter})`;
+    static containsProblemDetailsInformation(resource) {
+        return resource && (resource instanceof ProblemDetails || (resource instanceof Resource && 'status' in resource && _.isNumber(resource['status']) && resource['status'] >= 100 && resource['status'] < 600));
     }
-    static createFilterFromTableLoadEvent(event, properties) {
-        if (!event.filters || properties === undefined)
-            return undefined;
-        const filter = Object.entries(event.filters)
-            // The type definition is wrong, event.filters has values of type FilterMetadata[] and not FilterMetadata.
-            .map(([propertyName, filter]) => ({ property: ODataService.findPropertyByName(properties, propertyName), filters: filter }))
-            .map(f => ODataService.createFilterForPropertyArray(f.property, f.filters))
-            .filter(f => !!f)
-            .join(' and ');
-        if (filter === '')
-            return undefined;
-        return `(${filter})`;
+    static fromResource(resource) {
+        if (!ProblemDetails.containsProblemDetailsInformation(resource))
+            throw new Error(`The resource ${resource} does not have problem details.`);
+        return Object.assign(new ProblemDetails(), resource);
     }
-    static createOrderByFromTableLoadEvent(event) {
-        if (event.sortField) {
-            const order = !event.sortOrder || event.sortOrder > 0 ? 'asc' : 'desc';
-            return `${event.sortField} ${order}`;
-        }
-        return undefined;
+}
+
+class RestWorldClient {
+    constructor(_halClient, _options) {
+        this._halClient = _halClient;
+        this._options = _options;
     }
-    static createParametersFromTableLoadEvent(event, template) {
-        const oDataParameters = {
-            $filter: ODataService.createFilterFromTableLoadEvent(event, template === null || template === void 0 ? void 0 : template.properties),
-            $orderby: ODataService.createOrderByFromTableLoadEvent(event),
-            $top: ODataService.createTopFromTableLoadEvent(event),
-            $skip: ODataService.createSkipFromTableLoadEvent(event)
-        };
-        return oDataParameters;
+    get halClient() {
+        return this._halClient;
     }
-    static createSkipFromTableLoadEvent(event) {
-        return event.first;
+    static combineHeaders(originalHeaders, headersToAdd, overwriteExisting) {
+        if (!headersToAdd)
+            return originalHeaders;
+        if (!originalHeaders)
+            return headersToAdd;
+        let combinedHeaders = originalHeaders;
+        for (const key in headersToAdd.keys) {
+            if (!combinedHeaders.has(key) || overwriteExisting) {
+                const headerValuesToAdd = headersToAdd.getAll(key);
+                if (headerValuesToAdd)
+                    combinedHeaders = combinedHeaders.set(key, headerValuesToAdd);
+            }
+        }
+        return combinedHeaders;
     }
-    static createTopFromTableLoadEvent(event) {
-        return event.rows;
-    }
-    static createComparisonValue(property, value) {
-        if (value === null || value === undefined)
-            return 'null';
-        const type = property.type;
-        switch (type) {
-            case PropertyType.Date:
-                return `cast(${value.toISOString()}, Edm.DateOnly)`;
-            case PropertyType.DatetimeLocal:
-                return `cast(${value.toISOString()}, Edm.DateTime)`;
-            case PropertyType.DatetimeOffset:
-                return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
-            case PropertyType.Time:
-                return `cast(${value.toISOString()}, Edm.TimeOnly)`;
-            case PropertyType.Duration:
-                return `cast(${value.toISOString()}, Edm.TimeSpan)`;
-            default:
-                return `'${value}'`;
-        }
-    }
-    static createODataOperator(matchMode) {
-        switch (matchMode) {
-            case FilterMatchMode.STARTS_WITH:
-                return 'startswith';
-            case FilterMatchMode.CONTAINS:
-                return 'contains';
-            case FilterMatchMode.NOT_CONTAINS:
-                return 'not contains';
-            case FilterMatchMode.ENDS_WITH:
-                return 'endswith';
-            case FilterMatchMode.EQUALS:
-                return 'eq';
-            case FilterMatchMode.NOT_EQUALS:
-                return 'ne';
-            case FilterMatchMode.IN:
-                return 'in';
-            case FilterMatchMode.LESS_THAN:
-                return 'lt';
-            case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
-                return 'le';
-            case FilterMatchMode.GREATER_THAN:
-                return 'gt';
-            case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
-                return 'ge';
-            case FilterMatchMode.IS:
-                return 'eq';
-            case FilterMatchMode.IS_NOT:
-                return 'ne';
-            case FilterMatchMode.BEFORE:
-                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 findPropertyByName(properties, propertyName) {
-        const property = properties.find(p => p.name === propertyName);
-        if (property === undefined)
-            throw new Error(`Cannot find a property with the name ${propertyName} in the properties of the search form template.`);
-        return property;
-    }
-}
-
-class RESTworldClient {
-    constructor(_halClient, _options) {
-        this._halClient = _halClient;
-        this._options = _options;
-    }
-    get halClient() {
-        return this._halClient;
-    }
-    static combineHeaders(originalHeaders, headersToAdd, overwriteExisting) {
-        if (!headersToAdd)
-            return originalHeaders;
-        if (!originalHeaders)
-            return headersToAdd;
-        let combinedHeaders = originalHeaders;
-        for (const key in headersToAdd.keys) {
-            if (!combinedHeaders.has(key) || overwriteExisting) {
-                const headerValuesToAdd = headersToAdd.getAll(key);
-                if (headerValuesToAdd)
-                    combinedHeaders = combinedHeaders.set(key, headerValuesToAdd);
-            }
-        }
-        return combinedHeaders;
-    }
-    static createHeaders(mediaType, version) {
-        if (version)
-            return new HttpHeaders({
-                'Accept': `${mediaType || 'application/hal+json'}; v=${version}`,
-                'Content-Type': `${mediaType || 'application/hal+json'}; v=${version}`
-            });
-        return new HttpHeaders();
+    static createHeaders(mediaType, version) {
+        if (version)
+            return new HttpHeaders({
+                'Accept': `${mediaType || 'application/hal+json'}; v=${version}`,
+                'Content-Type': `${mediaType || 'application/hal+json'}; v=${version}`
+            });
+        return new HttpHeaders();
     }
     delete(resource) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -504,7 +327,7 @@ class RESTworldClient {
             if (!deleteLink)
                 throw new Error(`The resource ${resource} does not have a delete link.`);
             const uri = deleteLink.href;
-            const header = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
+            const header = RestWorldClient.createHeaders('application/hal+json', this._options.Version);
             const response = yield this.halClient.delete(uri, ProblemDetails, header);
             return response;
         });
@@ -526,12 +349,17 @@ class RESTworldClient {
     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 formsPromises = urls.map(url => this.getForm(url));
             const formsAndProblems = yield Promise.all(formsPromises);
             return formsAndProblems;
         });
     }
+    getForm(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const header = RestWorldClient.createHeaders('application/prs.hal-forms+json', this._options.Version);
+            return this._halClient.get(url, FormsResource, ProblemDetails, header);
+        });
+    }
     getAllLinksFromHome() {
         if (!this._homeResource)
             throw new Error('Home resource is not set. Call ensureHomeResourceIsSet() first.');
@@ -624,8 +452,8 @@ class RESTworldClient {
             const link = new Link();
             link.href = uri;
             const filledUri = link.fillTemplate(parameters);
-            const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
-            const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+            const defaultHeaders = RestWorldClient.createHeaders('application/hal+json', this._options.Version);
+            const combinedHeaders = RestWorldClient.combineHeaders(headers, defaultHeaders, false);
             const response = yield this.halClient.get(filledUri, PagedListResource, ProblemDetails, combinedHeaders);
             return response;
         });
@@ -635,30 +463,26 @@ class RESTworldClient {
             const link = new Link();
             link.href = uri;
             const filledUri = link.fillTemplate(parameters);
-            const defaultHeaders = RESTworldClient.createHeaders('text/csv', this._options.Version);
-            const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+            const defaultHeaders = RestWorldClient.createHeaders('text/csv', this._options.Version);
+            const combinedHeaders = RestWorldClient.combineHeaders(headers, defaultHeaders, false);
             const response = yield lastValueFrom(this.halClient.httpClient.get(filledUri, { headers: combinedHeaders, responseType: 'blob', observe: 'response' }));
             return response;
         });
     }
-    getSingle(relOrUri, id, headers, curie) {
+    getSingle(rel, id, headers, curie) {
         return __awaiter(this, void 0, void 0, function* () {
-            let uri;
-            if (relOrUri.startsWith('http')) {
-                if (id !== undefined)
-                    throw new Error('When supplying a URI, an ID cannot be supplied too.');
-                if (curie)
-                    throw new Error('When supplying a URI, a curie cannot be supplied too.');
-                uri = relOrUri;
-            }
-            else {
-                if (!_.isNumber(id))
-                    throw new Error('When supplying a rel, an ID must be supplied too.');
-                const link = this.getLinkFromHome(relOrUri, LinkNames.get, curie);
-                uri = link.fillTemplate({ id: id.toString() });
-            }
-            const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
-            const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+            if (!_.isNumber(id))
+                throw new Error('When supplying a rel, an ID must be supplied too.');
+            const link = this.getLinkFromHome(rel, LinkNames.get, curie);
+            const uri = link.fillTemplate({ id: id.toString() });
+            const response = this.getSingleByUri(uri, headers);
+            return response;
+        });
+    }
+    getSingleByUri(uri, headers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const defaultHeaders = RestWorldClient.createHeaders('application/hal+json', this._options.Version);
+            const combinedHeaders = RestWorldClient.combineHeaders(headers, defaultHeaders, false);
             const response = yield this.halClient.get(uri, Resource, ProblemDetails, combinedHeaders);
             return response;
         });
@@ -672,7 +496,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('application/hal+json', this._options.Version);
+            const header = RestWorldClient.createHeaders('application/hal+json', this._options.Version);
             let response;
             switch (method) {
                 case 'put':
@@ -692,7 +516,7 @@ class RESTworldClient {
         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);
+            const header = RestWorldClient.createHeaders('application/prs.hal-forms+json', this._options.Version);
             let response;
             switch (method) {
                 case 'put':
@@ -720,7 +544,7 @@ class RESTworldClient {
     }
     getHomeForced() {
         return __awaiter(this, void 0, void 0, function* () {
-            const header = RESTworldClient.createHeaders('application/hal+json', 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;
         });
@@ -768,9 +592,27 @@ class RESTworldClient {
                 .map(([, template]) => this.setInitialSelectedOptionsElementsForTemplate(template)));
         });
     }
+    deleteByTemplateAndForm(template, formGroup) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const url = template.target;
+            if (url === undefined)
+                throw new Error("The target of the given template cannot be undefined.");
+            const timestamp = formGroup.value.timestamp;
+            return this.deleteByUrl(url, timestamp);
+        });
+    }
+    deleteByUrl(url, timestamp) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let header = RestWorldClient.createHeaders('application/hal+json', this._options.Version);
+            if (timestamp !== undefined)
+                header = header.append("ETag", timestamp);
+            const response = yield this.halClient.delete(url, ProblemDetails, header);
+            return response;
+        });
+    }
 }
 
-class RESTworldClientCollection {
+class RestWorldClientCollection {
     constructor(_halClient) {
         this._halClient = _halClient;
         this._clients = {};
@@ -782,7 +624,7 @@ class RESTworldClientCollection {
         return __awaiter(this, void 0, void 0, function* () {
             if (Object.keys(this._clients).includes(name))
                 return this.getClient(name);
-            const client = new RESTworldClient(this._halClient, options);
+            const client = new RestWorldClient(this._halClient, options);
             yield client.ensureHomeResourceIsSet();
             this._clients[name] = client;
             return client;
@@ -798,115 +640,245 @@ class RESTworldClientCollection {
         return this._clients;
     }
 }
-RESTworldClientCollection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldClientCollection, deps: [{ token: i1$1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
-RESTworldClientCollection.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldClientCollection, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldClientCollection, decorators: [{
+RestWorldClientCollection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldClientCollection, deps: [{ token: i1$1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
+RestWorldClientCollection.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldClientCollection, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldClientCollection, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.HalClient }]; } });
 
-class SettingsService {
-    constructor(_clients) {
-        this._clients = _clients;
-        this.initializing = false;
-        this.initialized = false;
+class FormService {
+    createFormGroupsFromTemplates(templates) {
+        const tabs = Object.fromEntries(Object.entries(templates).map(([name, template]) => [
+            name,
+            this.createFormGroupFromTemplate(template)
+        ]));
+        return tabs;
     }
-    get settings() {
-        return SettingsService._settings;
+    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 UntypedFormGroup(controls);
+        return formGroup;
     }
-    ensureInitialized() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.initializing || this.initialized)
-                return;
-            this.initializing = true;
-            yield SettingsService.ensureSettingsAreLoaded();
-            yield this.populateRESTworldClientCollectionFromSettings();
-            this.initialized = true;
-            this.initializing = false;
-        });
+    createFormArrayFromTemplates(templates, ignoredProperties) {
+        const controls = Object.entries(templates)
+            .filter(([key,]) => !ignoredProperties.some(p => key === p))
+            .map(([, template]) => this.createFormGroupFromTemplate(template));
+        const formArray = new UntypedFormArray(controls);
+        return formArray;
     }
-    /**
-     * Call this method in your main.ts before calling bootstrapModule(...)
-     *
-     * Example:
-     * async function main() {
-     *   try {
-     *     await SettingsService.ensureSettingsAreLoaded();
-     *
-     *     const providers : StaticProvider[] = [
-     *       { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
-     *     ];
-     *
-     *     await platformBrowserDynamic(providers).bootstrapModule(AppModule);
-     *   }
-     *   catch (e) {
-     *     console.error(e);
-     *   }
-     * }
-     *
-     * main();
-     * */
-    static ensureSettingsAreLoaded() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (SettingsService._settings === undefined) {
-                const response = yield fetch('/settings');
-                const settings = yield response.json();
-                SettingsService._settings = settings;
-            }
-        });
+    createFormGroupFromTemplate(template) {
+        const controls = Object.fromEntries(template.properties.map(p => [
+            p.name,
+            this.createFormControl(p)
+        ]));
+        const formGroup = new UntypedFormGroup(controls);
+        return formGroup;
     }
-    populateRESTworldClientCollectionFromSettings() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!((_a = this.settings) === null || _a === void 0 ? void 0 : _a.apiUrls))
-                return;
-            yield Promise.all(this.settings.apiUrls
-                .map(api => this._clients.addOrGetExistingClient(api.name, new RESTworldOptions(api.url, api.version))));
-        });
+    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 UntypedFormControl(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;
     }
 }
-SettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, deps: [{ token: RESTworldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
-SettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, decorators: [{
+FormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }]; } });
+        }] });
 
-class RESTWorldImageViewComponent {
-    constructor() {
-        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;
-    }
-    ngOnInit() {
-        // If no background color is set, we set it to white.
-        // Otherwise the color picker would show red, the input would be empty and the image cropper would show transparent.
-        if (!this.backgroundColor)
-            this.backgroundColor = '#ffffff';
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this._subscriptions) === null || _a === void 0 ? void 0 : _a.forEach(s => s.unsubscribe());
+class PropertyWithImage extends Property {
+}
+class PropertyWithOptions extends Property {
+}
+
+/**
+ * A label that is generated from the given property.
+ * If you also want an input element, you can either use RestWorldFormElement <rw-form-element> to have a label and an input rendered,
+ * or use RestWorldInput <rw-input> which will just render the input element, so you can freely place this label.
+ */
+class RestWorldLabelComponent {
+    get PropertyType() {
+        return PropertyType;
     }
-    ngAfterViewInit() {
-        var _a;
-        // We need to trigger imageLoadedInView each time, after the opening animation of the dialog has been completed.
-        // Otherwise the image cropper initially (and after every window resize) thinks that the image size is 0x0,
+}
+RestWorldLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldLabelComponent, selector: "rw-label", inputs: { property: "property" }, ngImport: i0, template: "<label \r\n    *ngIf=\"property.type !== PropertyType.Hidden\" \r\n    [attr.for]=\"property.name\"\r\n    [class.p-disabled]=\"property.readOnly\">\r\n    {{property.prompt ?? property.name}}\r\n</label>", styles: [".label-hidden{visibility:hidden}.label-collapsed{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-label', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<label \r\n    *ngIf=\"property.type !== PropertyType.Hidden\" \r\n    [attr.for]=\"property.name\"\r\n    [class.p-disabled]=\"property.readOnly\">\r\n    {{property.prompt ?? property.name}}\r\n</label>", styles: [".label-hidden{visibility:hidden}.label-collapsed{display:none}\n"] }]
+        }], propDecorators: { property: [{
+                type: Input
+            }] } });
+
+/**
+ * Displays validation errors either for one property or for a whole form.
+ */
+class RestWorldValidationErrorsComponent {
+}
+RestWorldValidationErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldValidationErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldValidationErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldValidationErrorsComponent, selector: "rw-validation-errors", inputs: { property: "property", form: "form" }, ngImport: i0, template: "<val-errors *ngIf=\"property\" [controlName]=\"property.name ?? null\">\n    <ng-template valError=\"required\">The field '{{property.prompt ?? property.name}}' is required.</ng-template>\n    <ng-template valError=\"email\">The email must be a valid email address.</ng-template>\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>\n    <ng-template valError=\"max\" let-error=\"error\">'{{property.prompt ?? property.name}}' must be smaller than or equal to {{ error.max }}.</ng-template>\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>\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>\n    <ng-template valError=\"pattern\" let-error=\"error\">The value for '{{property.prompt ?? property.name}}' does not match the pattern {{ error }}.</ng-template>\n    <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\n</val-errors>\n\n<val-errors *ngIf=\"form\" [control]=\"form\">\n    <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\n</val-errors>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.ValidationErrorsComponent, selector: "val-errors", inputs: ["control", "controlName", "label"] }, { kind: "directive", type: i2$2.ValidationErrorDirective, selector: "ng-template[valError]", inputs: ["valError"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldValidationErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-validation-errors', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<val-errors *ngIf=\"property\" [controlName]=\"property.name ?? null\">\n    <ng-template valError=\"required\">The field '{{property.prompt ?? property.name}}' is required.</ng-template>\n    <ng-template valError=\"email\">The email must be a valid email address.</ng-template>\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>\n    <ng-template valError=\"max\" let-error=\"error\">'{{property.prompt ?? property.name}}' must be smaller than or equal to {{ error.max }}.</ng-template>\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>\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>\n    <ng-template valError=\"pattern\" let-error=\"error\">The value for '{{property.prompt ?? property.name}}' does not match the pattern {{ error }}.</ng-template>\n    <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\n</val-errors>\n\n<val-errors *ngIf=\"form\" [control]=\"form\">\n    <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\n</val-errors>" }]
+        }], propDecorators: { property: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+/**
+ * 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: "15.0.3", ngImport: i0, type: AsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: AsPipe, name: "as" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: AsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'as' }]
+        }] });
+
+class RestWorldImageComponent {
+    constructor() {
+        this.disabled = false;
+        this.displayCropDialog = false;
+    }
+    get alt() {
+        var _a;
+        return (_a = this.property.prompt) !== null && _a !== void 0 ? _a : this.property.name;
+    }
+    get accept() {
+        var _a, _b;
+        return (_b = (_a = this.property.restWorldImage.accept) !== null && _a !== void 0 ? _a : this.property.placeholder) !== null && _b !== void 0 ? _b : "image/*";
+    }
+    get fileName() {
+        var _a;
+        return this.property.name + "." + ((_a = this.property.restWorldImage.format) !== null && _a !== void 0 ? _a : ".png");
+    }
+    get alignImage() {
+        return this.property.restWorldImage.alignImage;
+    }
+    get aspectRatio() {
+        return this.property.restWorldImage.aspectRatio;
+    }
+    get backgroundColor() {
+        return this.property.restWorldImage.backgroundColor;
+    }
+    set backgroundColor(value) {
+        this.property.restWorldImage.backgroundColor = value;
+    }
+    get canvasRotation() {
+        return this.property.restWorldImage.canvasRotation;
+    }
+    get containWithinAspectRatio() {
+        return this.property.restWorldImage.containWithinAspectRatio;
+    }
+    get cropper() {
+        return this.property.restWorldImage.cropper;
+    }
+    get cropperMaxHeight() {
+        return this.property.restWorldImage.cropperMaxHeight;
+    }
+    get cropperMaxWidth() {
+        return this.property.restWorldImage.cropperMaxWidth;
+    }
+    get cropperMinHeight() {
+        return this.property.restWorldImage.cropperMinHeight;
+    }
+    get cropperMinWidth() {
+        return this.property.restWorldImage.cropperMinWidth;
+    }
+    get cropperStaticHeight() {
+        return this.property.restWorldImage.cropperStaticHeight;
+    }
+    get cropperStaticWidth() {
+        return this.property.restWorldImage.cropperStaticWidth;
+    }
+    get format() {
+        return this.property.restWorldImage.format;
+    }
+    get imageQuality() {
+        return this.property.restWorldImage.imageQuality;
+    }
+    get initialStepSize() {
+        return this.property.restWorldImage.initialStepSize;
+    }
+    get maintainAspectRatio() {
+        return this.property.restWorldImage.maintainAspectRatio;
+    }
+    get onlyScaleDown() {
+        return this.property.restWorldImage.onlyScaleDown;
+    }
+    get resizeToWidth() {
+        return this.property.restWorldImage.resizeToWidth;
+    }
+    get resizeToHeight() {
+        return this.property.restWorldImage.resizeToHeight;
+    }
+    get roundCropper() {
+        return this.property.restWorldImage.roundCropper;
+    }
+    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;
+    }
+    ngOnInit() {
+        // If no background color is set, we set it to white.
+        // Otherwise the color picker would show red, the input would be empty and the image cropper would show transparent.
+        if (!this.backgroundColor)
+            this.backgroundColor = '#ffffff';
+    }
+    ngAfterViewInit() {
+        var _a;
+        // We need to trigger imageLoadedInView each time, after the opening animation of the dialog has been completed.
+        // Otherwise the image cropper initially (and after every window resize) thinks that the image size is 0x0,
         // because the opening animation hast just begun when the image cropper is first shown.
         (_a = this.dialogs) === null || _a === void 0 ? void 0 : _a.map(d => d.onShow.subscribe(() => { var _a; return (_a = this.imageCroppers) === null || _a === void 0 ? void 0 : _a.forEach(i => { i.imageLoadedInView(); }); }));
     }
@@ -932,64 +904,20 @@ class RESTWorldImageViewComponent {
         this.displayCropDialog = false;
     }
 }
-RESTWorldImageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTWorldImageViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RESTWorldImageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RESTWorldImageViewComponent, selector: "rw-image", inputs: { alt: "alt", accept: "accept", fileName: "fileName", alignImage: "alignImage", aspectRatio: "aspectRatio", backgroundColor: "backgroundColor", canvasRotation: "canvasRotation", containWithinAspectRatio: "containWithinAspectRatio", cropper: "cropper", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperMinHeight: "cropperMinHeight", cropperMinWidth: "cropperMinWidth", cropperStaticHeight: "cropperStaticHeight", cropperStaticWidth: "cropperStaticWidth", format: "format", imageQuality: "imageQuality", initialStepSize: "initialStepSize", maintainAspectRatio: "maintainAspectRatio", onlyScaleDown: "onlyScaleDown", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", roundCropper: "roundCropper" }, providers: [{
+RestWorldImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldImageComponent, selector: "rw-image", inputs: { property: "property" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => RESTWorldImageViewComponent),
+            useExisting: forwardRef(() => RestWorldImageComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true }, { propertyName: "dialogs", predicate: Dialog, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "component", type: i7.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i9.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"] }, { kind: "component", type: i10.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTWorldImageViewComponent, decorators: [{
+        }], viewQueries: [{ propertyName: "fileUploads", predicate: FileUpload, descendants: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true }, { propertyName: "dialogs", predicate: Dialog, descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }, { kind: "component", type: i4.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i8$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i9.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"] }, { kind: "component", type: i10.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-image', providers: [{
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RESTWorldImageViewComponent),
+                            useExisting: forwardRef(() => RestWorldImageComponent),
                             multi: true
-                        }], template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
-        }], propDecorators: { alt: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], fileName: [{
-                type: Input
-            }], alignImage: [{
-                type: Input
-            }], aspectRatio: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], canvasRotation: [{
-                type: Input
-            }], containWithinAspectRatio: [{
-                type: Input
-            }], cropper: [{
-                type: Input
-            }], cropperMaxHeight: [{
-                type: Input
-            }], cropperMaxWidth: [{
-                type: Input
-            }], cropperMinHeight: [{
-                type: Input
-            }], cropperMinWidth: [{
-                type: Input
-            }], cropperStaticHeight: [{
-                type: Input
-            }], cropperStaticWidth: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], imageQuality: [{
-                type: Input
-            }], initialStepSize: [{
-                type: Input
-            }], maintainAspectRatio: [{
-                type: Input
-            }], onlyScaleDown: [{
-                type: Input
-            }], resizeToWidth: [{
-                type: Input
-            }], resizeToHeight: [{
-                type: Input
-            }], roundCropper: [{
+                        }], template: "<div class=\"flex align-items-center\">\r\n  <p-button *ngIf=\"!uri\" [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n  <a *ngIf=\"uri\" [href]=\"uri | safeUrl\" [download]=\"fileName || 'download'\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n  <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept || 'image/*'\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n  <img *ngIf=\"uri\" class=\"thumbnail\" [src]=\"uri | safeUrl\" [alt]=\"alt\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n</div>\r\n\r\n<p-dialog [header]=\"alt ?? ''\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n                  [autoCrop]=\"true\"\r\n                  (imageCropped)=\"croppedImageChanged($event)\"\r\n                  [alignImage]=\"alignImage ?? 'center'\"\r\n                  [aspectRatio]=\"aspectRatio ?? 1\"\r\n                  [backgroundColor]=\"backgroundColor ?? null\"\r\n                  [canvasRotation]=\"canvasRotation ?? 0\"\r\n                  [containWithinAspectRatio]=\"containWithinAspectRatio ?? false\"\r\n                  [cropper]=\"cropper ?? { x1: -100, y1: -100, x2: 10000, y2: 10000 }\"\r\n                  [cropperMaxHeight]=\"cropperMaxHeight ?? 0\"\r\n                  [cropperMaxWidth]=\"cropperMaxWidth ?? 0\"\r\n                  [cropperMinHeight]=\"cropperMinHeight ?? 0\"\r\n                  [cropperMinWidth]=\"cropperMinWidth ?? 0\"\r\n                  [cropperStaticHeight]=\"cropperStaticHeight ?? 0\"\r\n                  [cropperStaticWidth]=\"cropperStaticWidth ?? 0\"\r\n                  [format]=\"format ?? 'png'\"\r\n                  [imageQuality]=\"imageQuality ?? 92\"\r\n                  [initialStepSize]=\"initialStepSize ?? 3\"\r\n                  [maintainAspectRatio]=\"maintainAspectRatio ?? true\"\r\n                  [onlyScaleDown]=\"onlyScaleDown ?? false\"\r\n                  [resizeToWidth]=\"resizeToWidth ?? 0\"\r\n                  [resizeToHeight]=\"resizeToHeight ?? 0\"\r\n                  [roundCropper]=\"roundCropper ?? false\"\r\n                  [imageFile]=\"tempImageFile!\"\r\n                  [imageURL]=\"uri!\"\r\n                 ></image-cropper>\r\n  <div class=\"flex justify-content-end\">\r\n    <div class=\"flex-auto align-items-center\">\r\n      <span>Background color:&nbsp;</span>\r\n      <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n      <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n    </div>\r\n    <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n    <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n  </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
+        }], propDecorators: { property: [{
                 type: Input
             }], fileUploads: [{
                 type: ViewChildren,
@@ -1002,145 +930,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
                 args: [Dialog]
             }] } });
 
-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;
+/**
+ * A form element with a label that is automatically created from a property in a form template.
+ * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
+ * If you want a form element without a label, use RestWorldFormInput <rw-form-input>.
+ */
+class RestWorldFormElementComponent {
+}
+RestWorldFormElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFormElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldFormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldFormElementComponent, selector: "rw-form-element", inputs: { property: "property", apiName: "apiName" }, ngImport: i0, template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName\" [property]=\"property\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return RestWorldInputComponent; }), selector: "rw-input", inputs: ["property", "apiName"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldLabelComponent; }), selector: "rw-label", inputs: ["property"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFormElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-form-element', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName\" [property]=\"property\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n" }]
+        }], propDecorators: { property: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }] } });
+/**
+ * A form input element that is automatically created from a property in a form template.
+ * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
+ * If you also want a label, use RestWorldFormElement <rw-form-element>.
+ * You can also use one of the different RestWorldInput... <rw-input-...> elements to render a specific input,
+ * but it is advised to control the rendered input through the passed in property.
+ */
+class RestWorldInputComponent {
+    get PropertyType() {
+        return PropertyType;
     }
-    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);
+    get PropertyWithOptions() {
+        return PropertyWithOptions;
     }
 }
-RESTWorldFileViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTWorldFileViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RESTWorldFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", 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 || ''\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTWorldFileViewComponent, decorators: [{
+RestWorldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputComponent, selector: "rw-input", inputs: { property: "property", apiName: "apiName" }, ngImport: i0, template: "<rw-input-dropdown *ngIf=\"property.options\" [apiName]=\"apiName\" [property]=\"property | as:PropertyWithOptions\"></rw-input-dropdown>\r\n\r\n<ng-container *ngIf=\"!property.options\">\r\n    <ng-container [ngSwitch]=\"property.type\">\r\n        <rw-input-object *ngSwitchCase=\"PropertyType.Object\" [apiName]=\"apiName\" [property]=\"property\"></rw-input-object>\r\n        <rw-input-collection *ngSwitchCase=\"PropertyType.Collection\" [apiName]=\"apiName\" [property]=\"property\"></rw-input-collection>\r\n        <rw-input-simple *ngSwitchDefault [property]=\"property\"></rw-input-simple>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<rw-validation-errors [property]=\"property\"></rw-validation-errors>", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputDropdownComponent; }), selector: "rw-input-dropdown", inputs: ["property", "apiName"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputCollectionComponent; }), selector: "rw-input-collection", inputs: ["property", "apiName"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputObjectComponent; }), selector: "rw-input-object", inputs: ["property", "apiName"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputSimpleComponent; }), selector: "rw-input-simple", inputs: ["property"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldValidationErrorsComponent; }), selector: "rw-validation-errors", inputs: ["property", "form"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsPipe; }), name: "as" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-file', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RESTWorldFileViewComponent),
-                            multi: true
-                        }], 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 || ''\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n</div>\r\n", styles: ["a{text-decoration:none;height:calc(1rem + 18px)}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
-        }], propDecorators: { accept: [{
+            args: [{ selector: 'rw-input', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<rw-input-dropdown *ngIf=\"property.options\" [apiName]=\"apiName\" [property]=\"property | as:PropertyWithOptions\"></rw-input-dropdown>\r\n\r\n<ng-container *ngIf=\"!property.options\">\r\n    <ng-container [ngSwitch]=\"property.type\">\r\n        <rw-input-object *ngSwitchCase=\"PropertyType.Object\" [apiName]=\"apiName\" [property]=\"property\"></rw-input-object>\r\n        <rw-input-collection *ngSwitchCase=\"PropertyType.Collection\" [apiName]=\"apiName\" [property]=\"property\"></rw-input-collection>\r\n        <rw-input-simple *ngSwitchDefault [property]=\"property\"></rw-input-simple>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<rw-validation-errors [property]=\"property\"></rw-validation-errors>" }]
+        }], propDecorators: { property: [{
                 type: Input
-            }], fileName: [{
+            }], apiName: [{
                 type: Input
-            }], fileUploads: [{
-                type: ViewChildren,
-                args: [FileUpload]
-            }] } });
-
-class RestworldEditFormComponent {
-    constructor(_formService, _changeDetectorRef, _messageService, _clients) {
+            }] } });
+/**
+ * A collection that is automatically created from the given property.
+ * The collection supports drag & drop to re order the elements and can also be nested.
+ * It is advised to use RestWorldInputComponent <rw-input> and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ */
+class RestWorldInputCollectionComponent {
+    constructor(_controlContainer, _formService, _changeDetectorRef) {
+        this._controlContainer = _controlContainer;
         this._formService = _formService;
         this._changeDetectorRef = _changeDetectorRef;
-        this._messageService = _messageService;
-        this._clients = _clients;
-        this.UntypedFormGroup = (FormGroup);
-        this.UntypedFormArray = (FormArray);
-        this.Number = Number;
+        this._templates = [];
     }
-    get PropertyType() {
-        return PropertyType;
+    get templates() {
+        return this._templates;
     }
-    get PropertyPromptDisplayType() {
-        return PropertyPromptDisplayType;
+    get defaultTemplate() {
+        if (this._defaultTemplate === undefined)
+            throw new Error("No default template found.");
+        return this._defaultTemplate;
     }
-    get dateFormat() {
-        return new Date(3333, 11, 22)
-            .toLocaleDateString()
-            .replace("22", "dd")
-            .replace("11", "mm")
-            .replace("3333", "yy")
-            .replace("33", "y");
+    get innerFormArray() {
+        if (this._innerFormArray === undefined)
+            throw new Error("formGroup is not set.");
+        return this._innerFormArray;
     }
     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;
+        const formGroup = this._controlContainer.control;
+        this._innerFormArray = formGroup.controls[this.property.name];
+        this._templates = RestWorldInputCollectionComponent.getCollectionEntryTemplates(this.property);
+        this._defaultTemplate = this.property._templates.default;
     }
-    getCollectionEntryTemplates(property) {
+    static getCollectionEntryTemplates(property) {
         if (!property)
             return [];
         return Object.entries(property._templates)
-            .filter(([key,]) => Number.isInteger(Number.parseInt(key)))
-            .map(([, value]) => value);
+            .filter(([key, value]) => { var _a; return Number.isInteger(Number.parseInt(key)) && Number.isInteger(Number.parseInt((_a = value.title) !== null && _a !== void 0 ? _a : "")); })
+            .map(([, value]) => new NumberTemplate(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)
+    addNewItemToCollection() {
+        const maxIndex = Math.max(...Object.keys(this.templates)
             .map(key => Number.parseInt(key))
             .filter(key => Number.isSafeInteger(key)));
         const nextIndex = maxIndex < 0 ? 0 : 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));
+        const copiedTemplateDto = JSON.parse(JSON.stringify(this.defaultTemplate));
+        const copiedTemplate = new NumberTemplate(copiedTemplateDto);
+        copiedTemplate.title = nextIndex;
+        this.templates[copiedTemplate.title] = copiedTemplate;
+        this.innerFormArray.push(this._formService.createFormGroupFromTemplate(this.defaultTemplate));
+    }
+    deleteItemFromCollection(template) {
+        delete this.templates[template.title];
+        this.innerFormArray.removeAt(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);
+        const movedControl = this.innerFormArray.at(previousIndex);
         for (let i = previousIndex; i * movementDirection < currentIndex * movementDirection; i = i + movementDirection) {
-            formArray.setControl(i, formArray.at(i + movementDirection));
+            this.innerFormArray.setControl(i, this.innerFormArray.at(i + movementDirection));
         }
-        formArray.setControl(currentIndex, movedControl);
+        this.innerFormArray.setControl(currentIndex, movedControl);
         this._changeDetectorRef.markForCheck();
-        console.log($event);
+    }
+}
+RestWorldInputCollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputCollectionComponent, deps: [{ token: i5.ControlContainer }, { token: FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputCollectionComponent, selector: "rw-input-collection", inputs: { property: "property", apiName: "apiName" }, queries: [{ propertyName: "inputCollectionRef", first: true, predicate: ["inputCollection"], descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\n    <div class=\"brace\">\n    </div>\n    <div class=\"w-full\" cdkDropList (cdkDropListDropped)=\"collectionItemDropped($event)\">\n        <div *ngFor=\"let template of templates\" class=\"flex align-items-center\" cdkDrag>\n            <i class=\"fas fa-grip-lines\" cdkDragHandle></i>\n            <div class=\"brace\">\n            </div>\n            <div class=\"w-full flex justify-content-end\">\n                <rw-input-template [formGroup]=\"innerFormArray.controls[template.title]\" [template]=\"defaultTemplate\" [apiName]=\"apiName\" class=\"w-full\"></rw-input-template>\n                <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n            </div>\n        </div>\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>", styles: [".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}.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}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.Ripple; }), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(function () { return i9$1.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i9$1.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i0.forwardRef(function () { return i9$1.CdkDragHandle; }), selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputTemplateComponent; }), selector: "rw-input-template", inputs: ["apiName", "template"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-collection', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"flex align-items-center\">\n    <div class=\"brace\">\n    </div>\n    <div class=\"w-full\" cdkDropList (cdkDropListDropped)=\"collectionItemDropped($event)\">\n        <div *ngFor=\"let template of templates\" class=\"flex align-items-center\" cdkDrag>\n            <i class=\"fas fa-grip-lines\" cdkDragHandle></i>\n            <div class=\"brace\">\n            </div>\n            <div class=\"w-full flex justify-content-end\">\n                <rw-input-template [formGroup]=\"innerFormArray.controls[template.title]\" [template]=\"defaultTemplate\" [apiName]=\"apiName\" class=\"w-full\"></rw-input-template>\n                <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n            </div>\n        </div>\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>", styles: [".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}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i5.ControlContainer }, { type: FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { property: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], inputCollectionRef: [{
+                type: ContentChild,
+                args: ['inputCollection', { static: false }]
+            }] } });
+/**
+ * A dropdown that is automatically created from the given property.
+ * The dropdown supports searching through a RESTWorld list endpoint on the backend.
+ * It is advised to use RestWorldInputComponent <rw-input> and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ */
+class RestWorldInputDropdownComponent {
+    constructor(_messageService, _clients) {
+        this._messageService = _messageService;
+        this._clients = _clients;
+    }
+    getDropdownElementTooltip(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}: ${RestWorldInputDropdownComponent.jsonStringifyWithElipsis(value)}`, '');
+        return tooltip;
     }
     onOptionsFiltered(property, event) {
         var _a, _b;
@@ -1155,7 +1083,7 @@ class RestworldEditFormComponent {
             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 });
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: message, data: response, sticky: true });
                 return;
             }
             const items = response.body._embedded.items;
@@ -1167,15 +1095,21 @@ class RestworldEditFormComponent {
             throw new Error('Cannot get a client, because the apiName is not set.');
         return this._clients.getClient(this.apiName);
     }
+    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;
+    }
 }
-RestworldEditFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", 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: "14.0.0", version: "15.0.3", 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: "\r\n<div class=\"grid field\">\r\n  <div class=\"col-12 md:col-10 md:col-offset-2\">\r\n    <val-errors [control]=\"formGroup\">\r\n      <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\r\n    </val-errors>\r\n  </div>\r\n</div>\r\n<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\" [class.label-hidden]=\"property.promptDisplay === PropertyPromptDisplayType.Hidden\" [class.label-collapsed]=\"property.promptDisplay === PropertyPromptDisplayType.Collapsed\">{{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\"\r\n                    [accept]=\"property.restWorldImage?.accept ?? property.placeholder ?? 'image/*'\"\r\n                    [alignImage]=\"property.restWorldImage?.alignImage\"\r\n                    [alt]=\"property.prompt ?? property.name\"\r\n                    [aspectRatio]=\"property.restWorldImage?.aspectRatio\"\r\n                    [backgroundColor]=\"property.restWorldImage?.backgroundColor\"\r\n                    [canvasRotation]=\"property.restWorldImage?.canvasRotation\"\r\n                    [containWithinAspectRatio]=\"property.restWorldImage?.containWithinAspectRatio\"\r\n                    [cropper]=\"property.restWorldImage?.cropper\"\r\n                    [cropperMaxHeight]=\"property.restWorldImage?.cropperMaxHeight\"\r\n                    [cropperMaxWidth]=\"property.restWorldImage?.cropperMaxWidth\"\r\n                    [cropperMinHeight]=\"property.restWorldImage?.cropperMinHeight\"\r\n                    [cropperMinWidth]=\"property.restWorldImage?.cropperMinWidth\"\r\n                    [cropperStaticHeight]=\"property.restWorldImage?.cropperStaticHeight\"\r\n                    [cropperStaticWidth]=\"property.restWorldImage?.cropperStaticWidth\"\r\n                    [fileName]=\"property.name + '.' + (property.restWorldImage?.format ?? 'png')\"\r\n                    [format]=\"property.restWorldImage?.format\"\r\n                    [imageQuality]=\"property.restWorldImage?.imageQuality\"\r\n                    [initialStepSize]=\"property.restWorldImage?.initialStepSize\"\r\n                    [maintainAspectRatio]=\"property.restWorldImage?.maintainAspectRatio\"\r\n                    [onlyScaleDown]=\"property.restWorldImage?.onlyScaleDown\"\r\n                    [resizeToWidth]=\"property.restWorldImage?.resizeToWidth\"\r\n                    [resizeToHeight]=\"property.restWorldImage?.resizeToHeight\"\r\n                    [roundCropper]=\"property.restWorldImage?.roundCropper\"></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 : UntypedFormGroup)\" [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 : UntypedFormArray)}\" (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 : UntypedFormArray).controls[Number.parseInt(template.title!)] | as : UntypedFormGroup)\" [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}.label-hidden{visibility:hidden}.label-collapsed{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: i8$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", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.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", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i11.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"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "component", type: i13.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "component", type: i14.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", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i15.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: i16.ValidationErrorsComponent, selector: "val-errors", inputs: ["control", "controlName", "label"] }, { kind: "directive", type: i16.ValidationErrorDirective, selector: "ng-template[valError]", inputs: ["valError"] }, { kind: "directive", type: i17.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i17.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i17.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: RESTWorldImageViewComponent, selector: "rw-image", inputs: ["alt", "accept", "fileName", "alignImage", "aspectRatio", "backgroundColor", "canvasRotation", "containWithinAspectRatio", "cropper", "cropperMaxHeight", "cropperMaxWidth", "cropperMinHeight", "cropperMinWidth", "cropperStaticHeight", "cropperStaticWidth", "format", "imageQuality", "initialStepSize", "maintainAspectRatio", "onlyScaleDown", "resizeToWidth", "resizeToHeight", "roundCropper"] }, { kind: "component", type: RESTWorldFileViewComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "component", type: RestworldEditFormComponent, selector: "rw-form", inputs: ["formGroup", "template", "apiName"] }, { kind: "pipe", type: AsPipe, name: "as" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestworldEditFormComponent, decorators: [{
+RestWorldInputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputDropdownComponent, deps: [{ token: i2$3.MessageService }, { token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputDropdownComponent, selector: "rw-input-dropdown", inputs: { property: "property", apiName: "apiName" }, queries: [{ propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }], ngImport: i0, template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n    <p-dropdown \n    [formControlName]=\"property.name\" \n    [id]=\"property.name\" \n    [options]=\"property.options.inline\" \n    [filterBy]=\"(property.options.promptField ?? 'prompt') + ',' + (property.options.valueField ?? 'value')\" \n    [optionValue]=\"property.options.valueField ?? 'value'\" \n    [readonly]=\"property.readOnly\" \n    [required]=\"property.required || property.options.minItems > 0\" \n    [filter]=\"true\" \n    [autoDisplayFirst]=\"false\" \n    [showClear]=\"!property.required || property.options.minItems <= 0\" \n    (onFilter)=\"onOptionsFiltered(property, $event)\" \n    styleClass=\"w-full\" \n    [filterPlaceholder]=\"property?.options?.link?.href ? 'search for more results' : ''\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span [pTooltip]=\"getDropdownElementTooltip(item, [property.options.promptField ?? 'prompt', property.options.valueField ?? 'value'])\">{{item[property.options.promptField ?? 'prompt']}} ({{item[property.options.valueField ?? 'value']}})</span>\n        </ng-template>\n        <ng-template let-item pTemplate=\"item\">\n            <span [pTooltip]=\"getDropdownElementTooltip(item, [property.options.promptField ?? 'prompt', property.options.valueField ?? 'value'])\">{{item[property.options.promptField ?? 'prompt']}} ({{item[property.options.valueField ?? 'value']}})</span>\n        </ng-template>\n    </p-dropdown>\n</ng-template>\n<ng-container *ngIf=\"!property.options.maxItems || property.options.maxItems == 1\">\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\">\n    <p-multiSelect \n    [formControlName]=\"property.name\" \n    [id]=\"property.name\" \n    [options]=\"property.options.inline\" \n    [optionLabel]=\"property.options.promptField ?? 'prompt'\" \n    [optionValue]=\"property.options.valueField ?? 'value'\" \n    [readonly]=\"property.readOnly\" \n    [selectionLimit]=\"property.options.maxItems\" \n    [required]=\"property.required || property.options.minItems > 0\"></p-multiSelect>\n</ng-template>\n<ng-container *ngIf=\"(property.options.maxItems ?? 0) > 1\">\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i13.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", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i14.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-form', template: "\r\n<div class=\"grid field\">\r\n  <div class=\"col-12 md:col-10 md:col-offset-2\">\r\n    <val-errors [control]=\"formGroup\">\r\n      <ng-template valError=\"remote\" let-error=\"error\">{{ error }}</ng-template>\r\n    </val-errors>\r\n  </div>\r\n</div>\r\n<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\" [class.label-hidden]=\"property.promptDisplay === PropertyPromptDisplayType.Hidden\" [class.label-collapsed]=\"property.promptDisplay === PropertyPromptDisplayType.Collapsed\">{{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\"\r\n                    [accept]=\"property.restWorldImage?.accept ?? property.placeholder ?? 'image/*'\"\r\n                    [alignImage]=\"property.restWorldImage?.alignImage\"\r\n                    [alt]=\"property.prompt ?? property.name\"\r\n                    [aspectRatio]=\"property.restWorldImage?.aspectRatio\"\r\n                    [backgroundColor]=\"property.restWorldImage?.backgroundColor\"\r\n                    [canvasRotation]=\"property.restWorldImage?.canvasRotation\"\r\n                    [containWithinAspectRatio]=\"property.restWorldImage?.containWithinAspectRatio\"\r\n                    [cropper]=\"property.restWorldImage?.cropper\"\r\n                    [cropperMaxHeight]=\"property.restWorldImage?.cropperMaxHeight\"\r\n                    [cropperMaxWidth]=\"property.restWorldImage?.cropperMaxWidth\"\r\n                    [cropperMinHeight]=\"property.restWorldImage?.cropperMinHeight\"\r\n                    [cropperMinWidth]=\"property.restWorldImage?.cropperMinWidth\"\r\n                    [cropperStaticHeight]=\"property.restWorldImage?.cropperStaticHeight\"\r\n                    [cropperStaticWidth]=\"property.restWorldImage?.cropperStaticWidth\"\r\n                    [fileName]=\"property.name + '.' + (property.restWorldImage?.format ?? 'png')\"\r\n                    [format]=\"property.restWorldImage?.format\"\r\n                    [imageQuality]=\"property.restWorldImage?.imageQuality\"\r\n                    [initialStepSize]=\"property.restWorldImage?.initialStepSize\"\r\n                    [maintainAspectRatio]=\"property.restWorldImage?.maintainAspectRatio\"\r\n                    [onlyScaleDown]=\"property.restWorldImage?.onlyScaleDown\"\r\n                    [resizeToWidth]=\"property.restWorldImage?.resizeToWidth\"\r\n                    [resizeToHeight]=\"property.restWorldImage?.resizeToHeight\"\r\n                    [roundCropper]=\"property.restWorldImage?.roundCropper\"></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 : UntypedFormGroup)\" [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 : UntypedFormArray)}\" (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 : UntypedFormArray).controls[Number.parseInt(template.title!)] | as : UntypedFormGroup)\" [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}.label-hidden{visibility:hidden}.label-collapsed{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: i0.ChangeDetectorRef }, { type: i2$1.MessageService }, { type: RESTworldClientCollection }]; }, propDecorators: { formGroup: [{
-                type: Input
-            }], template: [{
+            args: [{ selector: 'rw-input-dropdown', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\">\n    <p-dropdown \n    [formControlName]=\"property.name\" \n    [id]=\"property.name\" \n    [options]=\"property.options.inline\" \n    [filterBy]=\"(property.options.promptField ?? 'prompt') + ',' + (property.options.valueField ?? 'value')\" \n    [optionValue]=\"property.options.valueField ?? 'value'\" \n    [readonly]=\"property.readOnly\" \n    [required]=\"property.required || property.options.minItems > 0\" \n    [filter]=\"true\" \n    [autoDisplayFirst]=\"false\" \n    [showClear]=\"!property.required || property.options.minItems <= 0\" \n    (onFilter)=\"onOptionsFiltered(property, $event)\" \n    styleClass=\"w-full\" \n    [filterPlaceholder]=\"property?.options?.link?.href ? 'search for more results' : ''\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span [pTooltip]=\"getDropdownElementTooltip(item, [property.options.promptField ?? 'prompt', property.options.valueField ?? 'value'])\">{{item[property.options.promptField ?? 'prompt']}} ({{item[property.options.valueField ?? 'value']}})</span>\n        </ng-template>\n        <ng-template let-item pTemplate=\"item\">\n            <span [pTooltip]=\"getDropdownElementTooltip(item, [property.options.promptField ?? 'prompt', property.options.valueField ?? 'value'])\">{{item[property.options.promptField ?? 'prompt']}} ({{item[property.options.valueField ?? 'value']}})</span>\n        </ng-template>\n    </p-dropdown>\n</ng-template>\n<ng-container *ngIf=\"!property.options.maxItems || property.options.maxItems == 1\">\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\">\n    <p-multiSelect \n    [formControlName]=\"property.name\" \n    [id]=\"property.name\" \n    [options]=\"property.options.inline\" \n    [optionLabel]=\"property.options.promptField ?? 'prompt'\" \n    [optionValue]=\"property.options.valueField ?? 'value'\" \n    [readonly]=\"property.readOnly\" \n    [selectionLimit]=\"property.options.maxItems\" \n    [required]=\"property.required || property.options.minItems > 0\"></p-multiSelect>\n</ng-template>\n<ng-container *ngIf=\"(property.options.maxItems ?? 0) > 1\">\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName }\"></ng-container>\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i2$3.MessageService }, { type: RestWorldClientCollection }]; }, propDecorators: { property: [{
                 type: Input
             }], apiName: [{
                 type: Input
@@ -1185,99 +1119,742 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
             }], 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 }]
+            }] } });
+/**
+ * A complex object with multiple properties that is automatically created from the given property.
+ * The object can also be nested.
+ * It is advised to use RestWorldInputComponent <rw-input> and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ */
+class RestWorldInputObjectComponent {
+    constructor(_controlContainer) {
+        this._controlContainer = _controlContainer;
+    }
+    get innerFormGroup() {
+        if (this._innerFormGroup === undefined)
+            throw new Error("formGroup is not set.");
+        return this._innerFormGroup;
+    }
+    ngOnInit() {
+        const formGroup = this._controlContainer.control;
+        this._innerFormGroup = formGroup.controls[this.property.name];
+    }
+}
+RestWorldInputObjectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputObjectComponent, deps: [{ token: i5.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputObjectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputObjectComponent, selector: "rw-input-object", inputs: { property: "property", apiName: "apiName" }, queries: [{ propertyName: "inputObjectRef", first: true, predicate: ["inputObject"], descendants: true }], ngImport: i0, template: "<ng-template #defaultInputObject let-property=\"property\" let-template=\"template\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup\" [template]=\"property._templates.default\" [apiName]=\"apiName\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>", 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}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return RestWorldInputTemplateComponent; }), selector: "rw-input-template", inputs: ["apiName", "template"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputObjectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-object', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<ng-template #defaultInputObject let-property=\"property\" let-template=\"template\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup\" [template]=\"property._templates.default\" [apiName]=\"apiName\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>", 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i5.ControlContainer }]; }, propDecorators: { property: [{
+                type: Input
+            }], apiName: [{
+                type: Input
             }], inputObjectRef: [{
                 type: ContentChild,
                 args: ['inputObject', { static: false }]
-            }], inputCollectionRef: [{
-                type: ContentChild,
-                args: ['inputCollection', { static: false }]
-            }], inputDefaultRef: [{
-                type: ContentChild,
-                args: ['inputDefault', { static: false }]
-            }] } });
+            }] } });
+/**
+ * A simple input element, like a text, or a number that is automatically created from the given property.
+ * It is advised to use RestWorldInputComponent <rw-input> and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ */
+class RestWorldInputSimpleComponent {
+    constructor(_controlContainer) {
+        this._controlContainer = _controlContainer;
+    }
+    get PropertyType() {
+        return PropertyType;
+    }
+    get dateFormat() {
+        return new Date(3333, 11, 22)
+            .toLocaleDateString()
+            .replace("22", "dd")
+            .replace("11", "mm")
+            .replace("3333", "yy")
+            .replace("33", "y");
+    }
+    get formControl() {
+        if (this._formControl === undefined)
+            throw new Error("formGroup is not set.");
+        return this._formControl;
+    }
+    get PropertyWithImage() {
+        return PropertyWithImage;
+    }
+    ngOnInit() {
+        const formGroup = this._controlContainer.control;
+        this._formControl = formGroup.controls[this.property.name];
+    }
+}
+RestWorldInputSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputSimpleComponent, deps: [{ token: i5.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputSimpleComponent, selector: "rw-input-simple", inputs: { property: "property" }, ngImport: i0, template: "<div [ngSwitch]=\"property.type\">\n\n    <input *ngSwitchCase=\"PropertyType.Hidden\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"hidden\" [value]=\"property.value\" />\n  \n    <input *ngSwitchCase=\"PropertyType.Text\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <textarea *ngSwitchCase=\"PropertyType.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>\n   \n    <input *ngSwitchCase=\"PropertyType.Search\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"search\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Tel\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"tel\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Url\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"url\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Email\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"email\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Password\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"password\" pPassword class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Date\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Month\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \n    <input *ngSwitchCase=\"PropertyType.Week\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"week\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Time\" [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>\n    \n    <p-calendar *ngSwitchCase=\"PropertyType.DatetimeLocal\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \n    <p-inputNumber *ngSwitchCase=\"PropertyType.Number\" [formControlName]=\"property.name\" [id]=\"property.name\" mode=\"decimal\" [showButtons]=\"!property.readOnly\" class=\"w-full\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-inputNumber>\n    \n    <input *ngSwitchCase=\"PropertyType.Range\" [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\" />\n    \n    <input *ngSwitchCase=\"PropertyType.Color\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"color\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <ng-container *ngSwitchCase=\"PropertyType.Bool\">\n        <p-checkbox *ngIf=\"property.required\" [binary]=\"true\" [formControl]=\"formControl\" [id]=\"property.name\" [readonly]=\"property.readOnly!\"></p-checkbox>\n        <p-triStateCheckbox *ngIf=\"!property.required\" [formControl]=\"formControl\" [id]=\"property.name\" [readonly]=\"property.readOnly!\"></p-triStateCheckbox>\n    </ng-container>\n    \n    <p-calendar *ngSwitchCase=\"PropertyType.DatetimeOffset\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \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>\n\n    <rw-image *ngSwitchCase=\"PropertyType.Image\" [formControlName]=\"property.name\" [property]=\"property | as:PropertyWithImage\"></rw-image>\n\n    <rw-file *ngSwitchCase=\"PropertyType.File\" [formControlName]=\"property.name\" [fileName]=\"property.name\" [accept]=\"property.placeholder\"></rw-file>\n\n    <input *ngSwitchDefault [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: i16.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", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i17.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", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i18.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"] }, { kind: "component", type: i19.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "component", type: RestWorldImageComponent, selector: "rw-image", inputs: ["property"] }, { kind: "component", type: RestWorldFileComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "pipe", type: AsPipe, name: "as" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-simple', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div [ngSwitch]=\"property.type\">\n\n    <input *ngSwitchCase=\"PropertyType.Hidden\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"hidden\" [value]=\"property.value\" />\n  \n    <input *ngSwitchCase=\"PropertyType.Text\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <textarea *ngSwitchCase=\"PropertyType.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>\n   \n    <input *ngSwitchCase=\"PropertyType.Search\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"search\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Tel\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"tel\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Url\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"url\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Email\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"email\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <input *ngSwitchCase=\"PropertyType.Password\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"password\" pPassword class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Date\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Month\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \n    <input *ngSwitchCase=\"PropertyType.Week\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"week\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <p-calendar *ngSwitchCase=\"PropertyType.Time\" [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>\n    \n    <p-calendar *ngSwitchCase=\"PropertyType.DatetimeLocal\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \n    <p-inputNumber *ngSwitchCase=\"PropertyType.Number\" [formControlName]=\"property.name\" [id]=\"property.name\" mode=\"decimal\" [showButtons]=\"!property.readOnly\" class=\"w-full\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-inputNumber>\n    \n    <input *ngSwitchCase=\"PropertyType.Range\" [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\" />\n    \n    <input *ngSwitchCase=\"PropertyType.Color\" [formControlName]=\"property.name\" [id]=\"property.name\" type=\"color\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n   \n    <ng-container *ngSwitchCase=\"PropertyType.Bool\">\n        <p-checkbox *ngIf=\"property.required\" [binary]=\"true\" [formControl]=\"formControl\" [id]=\"property.name\" [readonly]=\"property.readOnly!\"></p-checkbox>\n        <p-triStateCheckbox *ngIf=\"!property.required\" [formControl]=\"formControl\" [id]=\"property.name\" [readonly]=\"property.readOnly!\"></p-triStateCheckbox>\n    </ng-container>\n    \n    <p-calendar *ngSwitchCase=\"PropertyType.DatetimeOffset\" [formControlName]=\"property.name\" [id]=\"property.name\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\" [class.p-disabled]=\"property.readOnly\"></p-calendar>\n    \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>\n\n    <rw-image *ngSwitchCase=\"PropertyType.Image\" [formControlName]=\"property.name\" [property]=\"property | as:PropertyWithImage\"></rw-image>\n\n    <rw-file *ngSwitchCase=\"PropertyType.File\" [formControlName]=\"property.name\" [fileName]=\"property.name\" [accept]=\"property.placeholder\"></rw-file>\n\n    <input *ngSwitchDefault [formControlName]=\"property.name\" [id]=\"property.name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property.readOnly\" />\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i5.ControlContainer }]; }, propDecorators: { property: [{
+                type: Input
+            }] } });
+/**
+ * A collection of rw-form-elemtns automatically created from a template.
+ * Does not have any buttons on its own.
+ * If you want buttons, use RestWorldForm <rw-form>.
+ */
+class RestWorldInputTemplateComponent {
+}
+RestWorldInputTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldInputTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldInputTemplateComponent, selector: "rw-input-template", inputs: { apiName: "apiName", template: "template" }, ngImport: i0, template: "<rw-form-element *ngFor=\"let property of template.properties\" [property]=\"property\" [apiName]=\"apiName\"></rw-form-element>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element", inputs: ["property", "apiName"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldInputTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-template', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<rw-form-element *ngFor=\"let property of template.properties\" [property]=\"property\" [apiName]=\"apiName\"></rw-form-element>" }]
+        }], propDecorators: { apiName: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
+
+/**
+ * A form with Save, Reload and Delete buttons.
+ * If you do not want buttons, use RestWorldFormTemplateComponent <rw-form-template>.
+ * You can also provide your own buttons by passing in a template.
+ */
+class RestWorldFormComponent {
+    constructor(_clients, _confirmationService, _messageService, _formService) {
+        this._clients = _clients;
+        this._confirmationService = _confirmationService;
+        this._messageService = _messageService;
+        this._formService = _formService;
+        this.allowSubmit = true;
+        this.allowDelete = true;
+        this.allowReload = true;
+        this.showSubmit = true;
+        this.showDelete = true;
+        this.showReload = true;
+        this.afterDelete = new EventEmitter();
+        this.afterSubmit = new EventEmitter();
+        this._isLoading = false;
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get formGroup() {
+        return this._formGroup;
+    }
+    get canSubmit() {
+        return this.allowSubmit &&
+            this.template.target !== undefined &&
+            !this.isLoading;
+    }
+    get canDelete() {
+        return this.allowDelete &&
+            this.template.target !== undefined &&
+            this.template.method == "PUT" &&
+            !this.isLoading;
+    }
+    get canReload() {
+        return this.allowReload &&
+            this.template.target !== undefined &&
+            this.template.title !== undefined &&
+            this.template.properties.some(p => p.name === "id" && p.value !== undefined && p.value !== null && p.value !== 0) &&
+            !this.isLoading;
+    }
+    ngOnInit() {
+        this._formGroup = this._formService.createFormGroupFromTemplate(this.template);
+    }
+    reload() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.canReload)
+                return;
+            this._isLoading = true;
+            try {
+                const response = yield this.getClient().getForm(this.template.target);
+                if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
+                    this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resource from the API.', data: response, sticky: true });
+                }
+                else {
+                    this.template = response.body.getTemplateByTitle(this.template.title);
+                    this._formGroup = this._formService.createFormGroupFromTemplate(this.template);
+                }
+            }
+            catch (e) {
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
+                console.log(e);
+            }
+            this._isLoading = false;
+        });
+    }
+    showDeleteConfirmatioModal() {
+        this._confirmationService.confirm({
+            message: 'Do you really want to delete this resource?',
+            header: 'Confirm delete',
+            icon: 'far fa-trash-alt',
+            accept: () => this.delete()
+        });
+    }
+    submit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.canSubmit)
+                return;
+            this._isLoading = true;
+            try {
+                const response = yield this.getClient().submit(this.template, this.formGroup.value);
+                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']) {
+                            for (const [key, errorsForKey] of Object.entries(problemDetails['errors'])) {
+                                const path = key.split(/\.|\[/).map(e => e.replace("]", ""));
+                                // The path might start with a $, indicating the root.
+                                if (path.length > 0 && path[0] === '$')
+                                    path.shift();
+                                const formControl = path.reduce(RestWorldFormComponent.getSubControl, this.formGroup);
+                                formControl.setErrors(Object.assign(Object.assign({}, formControl.errors), { remote: errorsForKey }));
+                                formControl.markAsTouched();
+                            }
+                        }
+                    }
+                    this._messageService.add({ severity: 'error', summary: summary, detail: detail, data: response, sticky: true });
+                }
+                else {
+                    const templateBeforeSubmit = this.template;
+                    const responseResource = response.body;
+                    const templateAfterSubmit = responseResource.getTemplateByTitle(this.template.title);
+                    this._messageService.add({ severity: 'success', summary: 'Saved', detail: 'The resource has been saved.' });
+                    this.afterSubmit.emit({ old: templateBeforeSubmit, new: templateAfterSubmit });
+                }
+            }
+            catch (e) {
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
+                console.log(e);
+            }
+            this._isLoading = false;
+        });
+    }
+    delete() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.canDelete)
+                return;
+            if (this.formGroup === undefined)
+                throw new Error("formGroup cannot be undefined.");
+            yield this.getClient().deleteByTemplateAndForm(this.template, this.formGroup);
+            this._messageService.add({ severity: 'success', summary: 'Deleted', detail: 'The resource has been deleted.' });
+            this.afterDelete.emit();
+        });
+    }
+    static getSubControl(control, pathElement) {
+        if (pathElement === "")
+            return control;
+        if (control instanceof UntypedFormGroup)
+            return control.controls[pathElement];
+        if (control instanceof UntypedFormArray) {
+            const index = Number.parseInt(pathElement);
+            if (Number.isInteger(index))
+                return control.controls[index];
+        }
+        return control;
+    }
+    getClient() {
+        return this._clients.getClient(this.apiName);
+    }
+}
+RestWorldFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFormComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$3.ConfirmationService }, { token: i2$3.MessageService }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldFormComponent, selector: "rw-form", inputs: { template: "template", apiName: "apiName", rel: "rel", allowSubmit: "allowSubmit", allowDelete: "allowDelete", allowReload: "allowReload", showSubmit: "showSubmit", showDelete: "showDelete", showReload: "showReload" }, outputs: { afterDelete: "afterDelete", afterSubmit: "afterSubmit" }, queries: [{ propertyName: "buttonsRef", first: true, predicate: ["buttons"], descendants: true }], ngImport: i0, template: "<form *ngIf=\"formGroup !== undefined && template !== undefined\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n    <div class=\"blockable-container\">\n        <div class=\"blockable-element\">\n            <rw-input-template [template]=\"template\" [apiName]=\"apiName\"></rw-input-template>\n        </div>\n        <div class=\"blockable-overlay\" *ngIf=\"isLoading\">\n            <p-progressSpinner></p-progressSpinner>\n        </div>\n    </div>\n\n    <div class=\"grid\">\n        <div class=\"col\">\n            <div class=\"flex justify-content-end w-full\">\n                <ng-template #defaultButtons>\n                    <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                        [disabled]=\"!canSubmit\"></button>\n                    <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                        (click)=\"reload()\" [disabled]=\"!canReload\"></button>\n                    <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                        class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                        [disabled]=\"!canDelete\"></button>\n                </ng-template>\n                <ng-container *ngTemplateOutlet=\"buttonsRef || defaultButtons\"></ng-container>\n            </div>\n        </div>\n    </div>\n</form>\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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }, { kind: "component", type: RestWorldInputTemplateComponent, selector: "rw-input-template", inputs: ["apiName", "template"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-form', template: "<form *ngIf=\"formGroup !== undefined && template !== undefined\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n    <div class=\"blockable-container\">\n        <div class=\"blockable-element\">\n            <rw-input-template [template]=\"template\" [apiName]=\"apiName\"></rw-input-template>\n        </div>\n        <div class=\"blockable-overlay\" *ngIf=\"isLoading\">\n            <p-progressSpinner></p-progressSpinner>\n        </div>\n    </div>\n\n    <div class=\"grid\">\n        <div class=\"col\">\n            <div class=\"flex justify-content-end w-full\">\n                <ng-template #defaultButtons>\n                    <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                        [disabled]=\"!canSubmit\"></button>\n                    <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                        (click)=\"reload()\" [disabled]=\"!canReload\"></button>\n                    <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                        class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                        [disabled]=\"!canDelete\"></button>\n                </ng-template>\n                <ng-container *ngTemplateOutlet=\"buttonsRef || defaultButtons\"></ng-container>\n            </div>\n        </div>\n    </div>\n</form>\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: RestWorldClientCollection }, { type: i2$3.ConfirmationService }, { type: i2$3.MessageService }, { type: FormService }]; }, propDecorators: { template: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], rel: [{
+                type: Input
+            }], allowSubmit: [{
+                type: Input
+            }], allowDelete: [{
+                type: Input
+            }], allowReload: [{
+                type: Input
+            }], showSubmit: [{
+                type: Input
+            }], showDelete: [{
+                type: Input
+            }], showReload: [{
+                type: Input
+            }], afterDelete: [{
+                type: Output
+            }], afterSubmit: [{
+                type: Output
+            }], buttonsRef: [{
+                type: ContentChild,
+                args: ['buttons', { static: false }]
+            }] } });
+
+class RestWorldIdNavigationComponent {
+    constructor(_clients, _messageService, _router, _route) {
+        this._clients = _clients;
+        this._messageService = _messageService;
+        this._router = _router;
+        this._route = _route;
+        this.idNavigationForm = new FormGroup({
+            id: new FormControl(null, Validators.compose([Validators.min(1), Validators.max(Number.MAX_SAFE_INTEGER)]))
+        });
+    }
+    navigateById() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.rel)
+                throw new Error('The "rel" must be set through the uri of this page for the ID navigation to work.');
+            if (!this.idNavigationForm.valid) {
+                this._messageService.add({ detail: 'You must enter a valid ID to naviage to.', severity: 'error' });
+                return;
+            }
+            var idToNavigateTo = this.idNavigationForm.controls.id.value;
+            var client = this.getClient();
+            var response = yield client.getList(this.rel, { $filter: `id eq ${idToNavigateTo}` });
+            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 });
+                return;
+            }
+            var resource = (_c = (_b = (_a = response.body) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0];
+            if (!resource) {
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: 'No resource found with the specified ID.' });
+                return;
+            }
+            if (this.urlPrefix !== undefined)
+                yield this._router.navigate([this.urlPrefix, resource._links.self[0].href]);
+            else
+                yield this._router.navigate(["..", resource._links.self[0].href], { relativeTo: this._route });
+            this.idNavigationForm.reset();
+        });
+    }
+    getClient() {
+        if (!this.apiName)
+            throw new Error('Cannot get a client, because the apiName is not set.');
+        return this._clients.getClient(this.apiName);
+    }
+}
+RestWorldIdNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldIdNavigationComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$3.MessageService }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldIdNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldIdNavigationComponent, selector: "rw-id-navigation", inputs: { apiName: "apiName", rel: "rel", urlPrefix: "urlPrefix" }, ngImport: i0, template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i16.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", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldIdNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-id-navigation', template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: function () { return [{ type: RestWorldClientCollection }, { type: i2$3.MessageService }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }]; }, propDecorators: { apiName: [{
+                type: Input
+            }], rel: [{
+                type: Input
+            }], urlPrefix: [{
+                type: Input
+            }] } });
+
+class RestWorldMenuButtonComponent {
+    constructor(_router) {
+        this._router = _router;
+        this.items = [];
+    }
+    onClick(item) {
+        if (item.url) {
+            window.location.href = item.url;
+        }
+        else if (item.routerLink) {
+            this._router.navigate(item.routerLink, {
+                queryParams: item.queryParams,
+                fragment: item.fragment,
+                queryParamsHandling: item.queryParamsHandling,
+                preserveFragment: item.preserveFragment,
+                skipLocationChange: item.skipLocationChange,
+                replaceUrl: item.replaceUrl
+            });
+        }
+        else if (item.command) {
+            item.command();
+        }
+    }
+}
+RestWorldMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldMenuButtonComponent, deps: [{ token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+RestWorldMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: { items: "items" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of items; index as i\">\n  <p-button\n    *ngIf=\"!item.items\"\n    [label]=\"item.label!\"\n    [icon]=\"item.icon!\"\n    [disabled]=\"item.disabled!\"\n    [style]=\"item.style\"\n    [styleClass]=\"item.styleClass!\"\n    [pTooltip]=\"item.tooltip!\"\n    [tooltipPosition]=\"item.tooltipPosition!\"\n    (onClick)=\"onClick(item)\"\n    [class.ml-2]=\"i > 0\">\n  </p-button>\n\n  <p-splitButton\n    *ngIf=\"item.items\"\n    [label]=\"item.label!\"\n    [icon]=\"item.icon!\"\n    [model]=\"item.items\"\n    appendTo=\"body\"\n    [disabled]=\"item.disabled!\"\n    [style]=\"item.style\"\n    [styleClass]=\"item.styleClass!\"\n    [pTooltip]=\"item.tooltip!\"\n    [tooltipPosition]=\"item.tooltipPosition!\"\n    (onClick)=\"onClick(item)\"\n    [class.ml-2]=\"i > 0\">\n  </p-splitButton>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldMenuButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-menu-button', template: "<ng-container *ngFor=\"let item of items; index as i\">\n  <p-button\n    *ngIf=\"!item.items\"\n    [label]=\"item.label!\"\n    [icon]=\"item.icon!\"\n    [disabled]=\"item.disabled!\"\n    [style]=\"item.style\"\n    [styleClass]=\"item.styleClass!\"\n    [pTooltip]=\"item.tooltip!\"\n    [tooltipPosition]=\"item.tooltipPosition!\"\n    (onClick)=\"onClick(item)\"\n    [class.ml-2]=\"i > 0\">\n  </p-button>\n\n  <p-splitButton\n    *ngIf=\"item.items\"\n    [label]=\"item.label!\"\n    [icon]=\"item.icon!\"\n    [model]=\"item.items\"\n    appendTo=\"body\"\n    [disabled]=\"item.disabled!\"\n    [style]=\"item.style\"\n    [styleClass]=\"item.styleClass!\"\n    [pTooltip]=\"item.tooltip!\"\n    [tooltipPosition]=\"item.tooltipPosition!\"\n    (onClick)=\"onClick(item)\"\n    [class.ml-2]=\"i > 0\">\n  </p-splitButton>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i3$2.Router }]; }, propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class ODataService {
+    static createFilterForProperty(property, filter) {
+        if (!filter.value)
+            return undefined;
+        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
+        const comparisonValue = ODataService.createComparisonValue(property, filter.value);
+        switch (oDataOperator) {
+            case 'contains':
+            case 'not contains':
+            case 'startswith':
+            case 'endswith':
+                return `${oDataOperator}(${property.name}, ${comparisonValue})`;
+            default:
+                return `${property.name} ${oDataOperator} ${comparisonValue}`;
+        }
+    }
+    static createFilterForPropertyArray(property, filters) {
+        const filter = filters
+            .map(f => ODataService.createFilterForProperty(property, f))
+            .filter(f => !!f)
+            .join(` ${filters[0].operator} `);
+        if (filter === '')
+            return undefined;
+        return `(${filter})`;
+    }
+    static createFilterFromTableLoadEvent(event, properties) {
+        if (!event.filters || properties === undefined)
+            return undefined;
+        const filter = Object.entries(event.filters)
+            // The type definition is wrong, event.filters has values of type FilterMetadata[] and not FilterMetadata.
+            .map(([propertyName, filter]) => ({ property: ODataService.findPropertyByName(properties, propertyName), filters: filter }))
+            .map(f => ODataService.createFilterForPropertyArray(f.property, f.filters))
+            .filter(f => !!f)
+            .join(' and ');
+        if (filter === '')
+            return undefined;
+        return `(${filter})`;
+    }
+    static createOrderByFromTableLoadEvent(event) {
+        if (event.sortField) {
+            const order = !event.sortOrder || event.sortOrder > 0 ? 'asc' : 'desc';
+            return `${event.sortField} ${order}`;
+        }
+        return undefined;
+    }
+    static createParametersFromTableLoadEvent(event, template) {
+        const oDataParameters = {
+            $filter: ODataService.createFilterFromTableLoadEvent(event, template === null || template === void 0 ? void 0 : template.properties),
+            $orderby: ODataService.createOrderByFromTableLoadEvent(event),
+            $top: ODataService.createTopFromTableLoadEvent(event),
+            $skip: ODataService.createSkipFromTableLoadEvent(event)
+        };
+        return oDataParameters;
+    }
+    static createSkipFromTableLoadEvent(event) {
+        return event.first;
+    }
+    static createTopFromTableLoadEvent(event) {
+        return event.rows;
+    }
+    static createComparisonValue(property, value) {
+        if (value === null || value === undefined)
+            return 'null';
+        const type = property.type;
+        switch (type) {
+            case PropertyType.Date:
+                return `cast(${value.toISOString()}, Edm.DateOnly)`;
+            case PropertyType.DatetimeLocal:
+                return `cast(${value.toISOString()}, Edm.DateTime)`;
+            case PropertyType.DatetimeOffset:
+                return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
+            case PropertyType.Time:
+                return `cast(${value.toISOString()}, Edm.TimeOnly)`;
+            case PropertyType.Duration:
+                return `cast(${value.toISOString()}, Edm.TimeSpan)`;
+            case PropertyType.Bool:
+            case PropertyType.Number:
+                return '' + value;
+            default:
+                return `'${value}'`;
+        }
+    }
+    static createODataOperator(matchMode) {
+        switch (matchMode) {
+            case FilterMatchMode.STARTS_WITH:
+                return 'startswith';
+            case FilterMatchMode.CONTAINS:
+                return 'contains';
+            case FilterMatchMode.NOT_CONTAINS:
+                return 'not contains';
+            case FilterMatchMode.ENDS_WITH:
+                return 'endswith';
+            case FilterMatchMode.EQUALS:
+                return 'eq';
+            case FilterMatchMode.NOT_EQUALS:
+                return 'ne';
+            case FilterMatchMode.IN:
+                return 'in';
+            case FilterMatchMode.LESS_THAN:
+                return 'lt';
+            case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
+                return 'le';
+            case FilterMatchMode.GREATER_THAN:
+                return 'gt';
+            case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
+                return 'ge';
+            case FilterMatchMode.IS:
+                return 'eq';
+            case FilterMatchMode.IS_NOT:
+                return 'ne';
+            case FilterMatchMode.BEFORE:
+                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 findPropertyByName(properties, propertyName) {
+        const property = properties.find(p => p.name === propertyName);
+        if (property === undefined)
+            throw new Error(`Cannot find a property with the name ${propertyName} in the properties of the search form template.`);
+        return property;
+    }
+}
+
+var ColumnFilterType;
+(function (ColumnFilterType) {
+    ColumnFilterType["text"] = "text";
+    ColumnFilterType["numeric"] = "numeric";
+    ColumnFilterType["boolean"] = "boolean";
+    ColumnFilterType["date"] = "date";
+})(ColumnFilterType || (ColumnFilterType = {}));
+class RestWorldTableComponent {
+    constructor() {
+        this._rows = [];
+        this.rowsPerPageOptions = [10, 25, 50];
+        this.headerMenu = [];
+        this.rowMenu = () => [];
+        this._rowMenus = [];
+        this.showRowMenuAsColumn = true;
+        this.showRowMenuOnRightClick = true;
+        this.totalRecords = 0;
+        this.styleClass = "";
+        this.scrollable = true;
+        this.scrollHeight = "flex";
+        this.onFilterOrSortChanged = new EventEmitter();
+        this._contextMenuItems = [];
+        this.isLoading = false;
+        this._columns = [];
+    }
+    set template(value) {
+        var _a;
+        this._template = value;
+        this._columns = (_a = value === null || value === void 0 ? void 0 : value.properties.filter(p => p.type !== PropertyType.Hidden)) !== null && _a !== void 0 ? _a : [];
+        this.setSortFieldAndSortOrder(value);
+    }
+    get template() {
+        return this._template;
+    }
+    get rows() {
+        return this._rows;
+    }
+    set rows(value) {
+        this._rows = value;
+        if (this.showRowMenuAsColumn)
+            this._rowMenus = value.map(r => this.rowMenu(r, false));
+    }
+    get rowMenus() {
+        return this._rowMenus;
+    }
+    get showMenuColumn() {
+        return this.headerMenu.length > 0 || this.showRowMenuAsColumn;
+    }
+    setSortFieldAndSortOrder(template) {
+        var _a, _b;
+        const orderBy = (_b = (_a = template === null || template === void 0 ? void 0 : template.properties) === null || _a === void 0 ? void 0 : _a.find(p => (p === null || p === void 0 ? void 0 : p.name) === "$orderby")) === null || _b === void 0 ? void 0 : _b.value;
+        if (orderBy === null || orderBy === undefined || typeof orderBy !== 'string')
+            return;
+        const [field, order] = orderBy.split(" ");
+        const orderAsNumber = (order === null || order === void 0 ? void 0 : order.toLowerCase()) === "desc" ? -1 : 1;
+        if (this.sortField !== field)
+            this.sortField = field;
+        if (this.sortOrder !== orderAsNumber)
+            this.sortOrder = orderAsNumber;
+    }
+    get contextMenuItems() {
+        return this._contextMenuItems;
+    }
+    get columns() {
+        return this._columns;
+    }
+    get dateFormat() {
+        return RestWorldTableComponent._dateFormat;
+    }
+    get PropertyType() {
+        return PropertyType;
+    }
+    load(event) {
+        this.sortField = event.sortField;
+        this.sortOrder = event.sortOrder;
+        const parameters = ODataService.createParametersFromTableLoadEvent(event, this.template);
+        this.onFilterOrSortChanged.emit(parameters);
+    }
+    openContextMenu(event, row) {
+        if (!this.showRowMenuOnRightClick || this.contextMenu === undefined)
+            return;
+        this._contextMenuItems = this.rowMenu(row, true);
+        this.contextMenu.show(event);
+        event.stopPropagation();
+    }
+    toColumnFilterType(propertyType) {
+        switch (propertyType) {
+            case PropertyType.Number:
+                return ColumnFilterType.numeric;
+            case PropertyType.Bool:
+                return ColumnFilterType.boolean;
+            case PropertyType.Date:
+            case PropertyType.DatetimeLocal:
+            case PropertyType.DatetimeOffset:
+                return ColumnFilterType.date;
+            default:
+                return ColumnFilterType.text;
+        }
+    }
+}
+RestWorldTableComponent._dateFormat = new Date(3333, 10, 22)
+    .toLocaleDateString()
+    .replace("22", "dd")
+    .replace("11", "MM")
+    .replace("3333", "y")
+    .replace("33", "yy");
+RestWorldTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RestWorldTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RestWorldTableComponent, selector: "rw-table", inputs: { api: "api", template: "template", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", headerMenu: "headerMenu", rowMenu: "rowMenu", showRowMenuAsColumn: "showRowMenuAsColumn", showRowMenuOnRightClick: "showRowMenuOnRightClick", totalRecords: "totalRecords", styleClass: "styleClass", tableStyle: "tableStyle", scrollable: "scrollable", scrollHeight: "scrollHeight", isLoading: "isLoading" }, outputs: { onFilterOrSortChanged: "onFilterOrSortChanged" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<p-table\n  #table\n  [value]=\"rows\"\n  [columns]=\"columns\"\n  [lazy]=\"true\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"true\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [rows]=\"rows.length\"\n  [totalRecords]=\"totalRecords\"\n  [loading]=\"isLoading\"\n  [sortField]=\"sortField!\"\n  [sortOrder]=\"sortOrder!\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\">\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.name\">\n            <div class=\"p-d-flex p-jc-between p-ai-center\">\n                {{col.prompt}}\n                <ng-container *ngIf=\"!col.readOnly\">\n                  <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                  <p-columnFilter [type]=\"toColumnFilterType(col.type)\" [field]=\"col.name\" display=\"menu\"></p-columnFilter>\n                </ng-container>\n            </div>\n        </th>\n        <th *ngIf=\"showMenuColumn\" class=\"flex justify-content-end\">\n          <rw-menu-button [items]=\"headerMenu\"></rw-menu-button>\n        </th>\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\">\n        <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\n            <ng-container *ngSwitchCase=\"PropertyType.Text\">\n                <rw-avatar *ngIf=\"col.name === 'createdBy' || col.name === 'lastChangedBy'\" [user]=\"entity[col.name]\"></rw-avatar>\n                <span *ngIf=\"col.name !== 'createdBy' && col.name !== 'lastChangedBy'\">{{entity[col.name]}}</span>\n            </ng-container>\n            <span *ngSwitchCase=\"PropertyType.Number\" class=\"flex justify-content-end\">{{entity[col.name]}}</span>\n            <span *ngSwitchCase=\"PropertyType.Bool\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.name]\" [readonly]=\"true\"></p-triStateCheckbox></span>\n            <span *ngSwitchCase=\"PropertyType.Date\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.DatetimeLocal\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.DatetimeOffset\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.Collection\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.name]\">{{arrayElement | json}}</p></span>\n            <span *ngSwitchCase=\"PropertyType.Object\" class=\"flex justify-content-end\">{{entity[col.name] | json}}</span>\n        </td>\n        <td *ngIf=\"showMenuColumn\" class=\"flex justify-content-end\">\n          <rw-menu-button *ngIf=\"showRowMenuAsColumn\" [items]=\"rowMenus[rowIndex - table.first]\"></rw-menu-button>\n        </td>\n    </tr>\n  </ng-template>\n\n  <p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems\"></p-contextMenu>\n</p-table>\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3$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", "showButtons"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i19.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "component", type: i7$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "global", "target", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "triggerEvent"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldAvatarComponent, selector: "rw-avatar", inputs: ["user"] }, { kind: "component", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: ["items"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestWorldTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-table', template: "<p-table\n  #table\n  [value]=\"rows\"\n  [columns]=\"columns\"\n  [lazy]=\"true\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"true\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions\"\n  [rows]=\"rows.length\"\n  [totalRecords]=\"totalRecords\"\n  [loading]=\"isLoading\"\n  [sortField]=\"sortField!\"\n  [sortOrder]=\"sortOrder!\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\">\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.name\">\n            <div class=\"p-d-flex p-jc-between p-ai-center\">\n                {{col.prompt}}\n                <ng-container *ngIf=\"!col.readOnly\">\n                  <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                  <p-columnFilter [type]=\"toColumnFilterType(col.type)\" [field]=\"col.name\" display=\"menu\"></p-columnFilter>\n                </ng-container>\n            </div>\n        </th>\n        <th *ngIf=\"showMenuColumn\" class=\"flex justify-content-end\">\n          <rw-menu-button [items]=\"headerMenu\"></rw-menu-button>\n        </th>\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\">\n        <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\n            <ng-container *ngSwitchCase=\"PropertyType.Text\">\n                <rw-avatar *ngIf=\"col.name === 'createdBy' || col.name === 'lastChangedBy'\" [user]=\"entity[col.name]\"></rw-avatar>\n                <span *ngIf=\"col.name !== 'createdBy' && col.name !== 'lastChangedBy'\">{{entity[col.name]}}</span>\n            </ng-container>\n            <span *ngSwitchCase=\"PropertyType.Number\" class=\"flex justify-content-end\">{{entity[col.name]}}</span>\n            <span *ngSwitchCase=\"PropertyType.Bool\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.name]\" [readonly]=\"true\"></p-triStateCheckbox></span>\n            <span *ngSwitchCase=\"PropertyType.Date\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.DatetimeLocal\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.DatetimeOffset\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\n            <span *ngSwitchCase=\"PropertyType.Collection\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.name]\">{{arrayElement | json}}</p></span>\n            <span *ngSwitchCase=\"PropertyType.Object\" class=\"flex justify-content-end\">{{entity[col.name] | json}}</span>\n        </td>\n        <td *ngIf=\"showMenuColumn\" class=\"flex justify-content-end\">\n          <rw-menu-button *ngIf=\"showRowMenuAsColumn\" [items]=\"rowMenus[rowIndex - table.first]\"></rw-menu-button>\n        </td>\n    </tr>\n  </ng-template>\n\n  <p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems\"></p-contextMenu>\n</p-table>\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
+        }], propDecorators: { api: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], headerMenu: [{
+                type: Input
+            }], rowMenu: [{
+                type: Input
+            }], showRowMenuAsColumn: [{
+                type: Input
+            }], showRowMenuOnRightClick: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], tableStyle: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], onFilterOrSortChanged: [{
+                type: Output
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ["contextMenu"]
+            }], isLoading: [{
+                type: Input
+            }] } });
+
+class RestWorldOptions {
+    constructor(BaseUrl, Version) {
+        this.BaseUrl = BaseUrl;
+        this.Version = Version;
+        if (!BaseUrl.endsWith('/'))
+            throw new Error(`The provided BaseUrl '${BaseUrl}' does not end with a slash '/'.`);
+    }
+}
+
+class SettingsService {
+    constructor(_clients) {
+        this._clients = _clients;
+        this.initializing = false;
+        this.initialized = false;
+    }
+    get settings() {
+        return SettingsService._settings;
+    }
+    ensureInitialized() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.initializing || this.initialized)
+                return;
+            this.initializing = true;
+            yield SettingsService.ensureSettingsAreLoaded();
+            yield this.populateRESTworldClientCollectionFromSettings();
+            this.initialized = true;
+            this.initializing = false;
+        });
+    }
+    /**
+     * Call this method in your main.ts before calling bootstrapModule(...)
+     *
+     * Example:
+     * async function main() {
+     *   try {
+     *     await SettingsService.ensureSettingsAreLoaded();
+     *
+     *     const providers : StaticProvider[] = [
+     *       { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
+     *     ];
+     *
+     *     await platformBrowserDynamic(providers).bootstrapModule(AppModule);
+     *   }
+     *   catch (e) {
+     *     console.error(e);
+     *   }
+     * }
+     *
+     * main();
+     * */
+    static ensureSettingsAreLoaded() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (SettingsService._settings === undefined) {
+                const response = yield fetch('/settings');
+                const settings = yield response.json();
+                SettingsService._settings = settings;
+            }
+        });
+    }
+    populateRESTworldClientCollectionFromSettings() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!((_a = this.settings) === null || _a === void 0 ? void 0 : _a.apiUrls))
+                return;
+            yield Promise.all(this.settings.apiUrls
+                .map(api => this._clients.addOrGetExistingClient(api.name, new RestWorldOptions(api.url, api.version))));
+        });
+    }
+}
+SettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, deps: [{ token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
+SettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: SettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: RestWorldClientCollection }]; } });
 
 class RESTworldEditViewComponent {
-    constructor(_clients, _confirmationService, _messageService, _location, _router, _formService, valdemortConfig) {
+    constructor(_clients, _messageService, valdemortConfig) {
         this._clients = _clients;
-        this._confirmationService = _confirmationService;
         this._messageService = _messageService;
-        this._location = _location;
-        this._router = _router;
-        this._formService = _formService;
         this.idNavigationForm = new FormGroup({
             id: new FormControl(null, Validators.compose([Validators.min(1), Validators.max(Number.MAX_SAFE_INTEGER)]))
         });
-        this.isLoading = false;
-        this._formTabs = {};
-        this._templates = {};
+        this.isLoading = true;
+        this._templates = [];
         valdemortConfig.errorClasses = 'p-error text-sm';
     }
+    get templates() {
+        return this._templates;
+    }
     get PropertyType() {
         return PropertyType;
     }
@@ -1288,34 +1865,9 @@ class RESTworldEditViewComponent {
         this._apiName = value;
         this.load();
     }
-    get canDelete() {
-        var _a, _b;
-        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 canSave() {
-        var _a, _b;
-        const length = (_b = (_a = this.resource) === null || _a === void 0 ? void 0 : _a._links["save"]) === null || _b === void 0 ? void 0 : _b.length;
-        return length !== undefined && length > 0;
-    }
-    get formTabs() {
-        return this._formTabs;
-    }
-    get isLoadingForTheFirstTime() {
-        return Object.keys(this.templates).length === 0 && this.isLoading;
-    }
-    get rel() {
-        return this._rel;
-    }
-    set rel(value) {
-        this._rel = value;
-    }
     get resource() {
         return this._resource;
     }
-    get templates() {
-        return this._templates;
-    }
     get uri() {
         return this._uri;
     }
@@ -1323,148 +1875,19 @@ class RESTworldEditViewComponent {
         this._uri = value;
         this.load();
     }
-    static getSubControl(control, pathElement) {
-        if (pathElement === "")
-            return control;
-        if (control instanceof UntypedFormGroup)
-            return control.controls[pathElement];
-        if (control instanceof UntypedFormArray) {
-            const index = Number.parseInt(pathElement);
-            if (Number.isInteger(index))
-                return control.controls[index];
-        }
-        return control;
-    }
-    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;
-    }
-    canSubmit(templateName) {
-        const form = this.formTabs[templateName];
-        return form && form.valid;
-    }
-    delete() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.apiName || !this.uri || !this.resource)
-                return;
-            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();
-        });
-    }
-    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;
-    }
-    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);
-    }
     load() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.apiName || !this.uri)
                 return;
             this.isLoading = true;
-            const response = yield this.getClient().getSingle(this.uri);
+            const response = yield this.getClient().getSingleByUri(this.uri);
             if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
-                this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resource from the API.', data: response });
+                this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resource from the API.', data: response, sticky: true });
             }
             else {
                 this._resource = response.body;
-                this._templates = yield this.getAllTemplates(this._resource);
-                this._formTabs = this._formService.createFormGroupsFromTemplates(this._templates);
-            }
-            this.isLoading = false;
-        });
-    }
-    navigateById() {
-        var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.rel)
-                throw new Error('The "rel" must be set through the uri of this page for the ID navigation to work.');
-            if (!this.idNavigationForm.valid) {
-                this._messageService.add({ detail: 'You must enter a valid ID to naviage to.', severity: 'error' });
-                return;
-            }
-            var idToNavigateTo = this.idNavigationForm.controls.id.value;
-            var client = this.getClient();
-            var response = yield client.getList(this.rel, { $filter: `id eq ${idToNavigateTo}` });
-            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 });
-                return;
-            }
-            var resource = (_c = (_b = (_a = response.body) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0];
-            if (!resource) {
-                this._messageService.add({ severity: 'error', summary: 'Error', detail: 'No resource found with the specified ID.' });
-                return;
-            }
-            yield this._router.navigate(['/edit', this.apiName, this.rel, resource._links.self[0].href]);
-            this.idNavigationForm.reset();
-        });
-    }
-    showDeleteConfirmatioModal() {
-        this._confirmationService.confirm({
-            message: 'Do you really want to delete this resource?',
-            header: 'Confirm delete',
-            icon: 'far fa-trash-alt',
-            accept: () => this.delete()
-        });
-    }
-    submit(templateName, template, formValue) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.isLoading = true;
-            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("]", ""));
-                                // The path might start with a $, indicating the root.
-                                if (path.length > 0 && path[0] === '$')
-                                    path.shift();
-                                const formControl = path.reduce(RESTworldEditViewComponent.getSubControl, form);
-                                formControl.setErrors(Object.assign(Object.assign({}, formControl.errors), { remote: errorsForKey }));
-                                formControl.markAsTouched();
-                            }
-                        }
-                    }
-                    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);
+                const templates = yield this.getAllTemplates(this._resource);
+                this._templates = Object.values(templates);
             }
             this.isLoading = false;
         });
@@ -1486,92 +1909,14 @@ class RESTworldEditViewComponent {
         return this._clients.getClient(this.apiName);
     }
 }
-RESTworldEditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: i4.Location }, { token: i4$2.Router }, { token: FormService }, { token: i16.ValdemortConfig }], target: i0.ɵɵFactoryTarget.Component });
-RESTworldEditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RESTworldEditViewComponent, selector: "rw-edit", inputs: { apiName: "apiName", rel: "rel", uri: "uri" }, queries: [{ propertyName: "buttonsRef", first: true, predicate: ["buttons"], descendants: true }, { propertyName: "extraTabsRef", first: true, predicate: ["extraTabs"], descendants: true }, { propertyName: "inputBoolRef", first: true, predicate: ["inputBool"], descendants: true }, { propertyName: "inputColorRef", first: true, predicate: ["inputColor"], descendants: true }, { propertyName: "inputDateRef", first: true, predicate: ["inputDate"], descendants: true }, { propertyName: "inputDatetimeLocalRef", first: true, predicate: ["inputDatetimeLocal"], descendants: true }, { propertyName: "inputDatetimeOffsetRef", first: true, predicate: ["inputDatetimeOffset"], descendants: true }, { propertyName: "inputDefaultRef", first: true, predicate: ["inputDefault"], descendants: true }, { propertyName: "inputDurationRef", first: true, predicate: ["inputDuration"], descendants: true }, { propertyName: "inputEmailRef", first: true, predicate: ["inputEmail"], descendants: true }, { propertyName: "inputFileRef", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "inputHiddenRef", first: true, predicate: ["inputHidden"], descendants: true }, { propertyName: "inputImageRef", first: true, predicate: ["inputImage"], descendants: true }, { propertyName: "inputMonthRef", first: true, predicate: ["inputMonth"], descendants: true }, { propertyName: "inputNumberRef", first: true, predicate: ["inputNumber"], descendants: true }, { propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true }, { propertyName: "inputOptionsRef", first: true, predicate: ["inputOptions"], descendants: true }, { propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true }, { propertyName: "inputPasswordRef", first: true, predicate: ["inputPassword"], descendants: true }, { propertyName: "inputRangeRef", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputSearchRef", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "inputTelRef", first: true, predicate: ["inputTel"], descendants: true }, { propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "inputTextareaRef", first: true, predicate: ["inputTextarea"], descendants: true }, { propertyName: "inputTimeRef", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "inputUrlRef", first: true, predicate: ["inputUrl"], descendants: true }, { propertyName: "inputWeekRef", first: true, predicate: ["inputWeek"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-10\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n  <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n    <form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\r\n      <div class=\"p-inputgroup\">\r\n        <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\r\n        <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\r\n      </div>\r\n    </form>\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:-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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$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", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i10$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"] }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i12.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i12.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i13$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i14$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "component", type: RestworldEditFormComponent, selector: "rw-form", inputs: ["formGroup", "template", "apiName"] }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }] });
+RESTworldEditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$3.MessageService }, { token: i2$2.ValdemortConfig }], target: i0.ɵɵFactoryTarget.Component });
+RESTworldEditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RESTworldEditViewComponent, selector: "rw-edit", inputs: { apiName: "apiName", rel: "rel", uri: "uri" }, queries: [{ propertyName: "extraTabsRef", first: true, predicate: ["extraTabs"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-10\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n  <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n    <rw-id-navigation [apiName]=\"apiName\" [rel]=\"rel\"></rw-id-navigation>\r\n  </div>\r\n</div>\r\n\r\n<p-tabView>\r\n\r\n  <p-tabPanel *ngIf=\"isLoading; else tabs\" 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  <ng-template #tabs>\r\n    <p-tabPanel *ngFor=\"let template of templates\" [header]=\"template.title ?? ''\" [disabled]=\"isLoading\">\r\n      <rw-form [template]=\"template\" [apiName]=\"apiName\"></rw-form>\r\n    </p-tabPanel>\r\n</ng-template>\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:-moz-fit-content!important;max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$2.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"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i7$2.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$2.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: RestWorldFormComponent, selector: "rw-form", inputs: ["template", "apiName", "rel", "allowSubmit", "allowDelete", "allowReload", "showSubmit", "showDelete", "showReload"], outputs: ["afterDelete", "afterSubmit"] }, { kind: "component", type: RestWorldIdNavigationComponent, selector: "rw-id-navigation", inputs: ["apiName", "rel", "urlPrefix"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldEditViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-edit', template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-10\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n  <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n    <form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\r\n      <div class=\"p-inputgroup\">\r\n        <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\r\n        <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\r\n      </div>\r\n    </form>\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:-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"] }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: i4.Location }, { type: i4$2.Router }, { type: FormService }, { type: i16.ValdemortConfig }]; }, propDecorators: { buttonsRef: [{
-                type: ContentChild,
-                args: ['buttons', { static: false }]
-            }], extraTabsRef: [{
+            args: [{ selector: 'rw-edit', template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-10\">\r\n    <h1>Edit resource</h1>\r\n  </div>\r\n  <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n    <rw-id-navigation [apiName]=\"apiName\" [rel]=\"rel\"></rw-id-navigation>\r\n  </div>\r\n</div>\r\n\r\n<p-tabView>\r\n\r\n  <p-tabPanel *ngIf=\"isLoading; else tabs\" 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  <ng-template #tabs>\r\n    <p-tabPanel *ngFor=\"let template of templates\" [header]=\"template.title ?? ''\" [disabled]=\"isLoading\">\r\n      <rw-form [template]=\"template\" [apiName]=\"apiName\"></rw-form>\r\n    </p-tabPanel>\r\n</ng-template>\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:-moz-fit-content!important;max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: RestWorldClientCollection }, { type: i2$3.MessageService }, { type: i2$2.ValdemortConfig }]; }, propDecorators: { extraTabsRef: [{
                 type: ContentChild,
                 args: ['extraTabs', { static: false }]
-            }], inputBoolRef: [{
-                type: ContentChild,
-                args: ['inputBool', { static: false }]
-            }], inputColorRef: [{
-                type: ContentChild,
-                args: ['inputColor', { static: false }]
-            }], inputDateRef: [{
-                type: ContentChild,
-                args: ['inputDate', { static: false }]
-            }], inputDatetimeLocalRef: [{
-                type: ContentChild,
-                args: ['inputDatetimeLocal', { static: false }]
-            }], inputDatetimeOffsetRef: [{
-                type: ContentChild,
-                args: ['inputDatetimeOffset', { static: false }]
-            }], inputDefaultRef: [{
-                type: ContentChild,
-                args: ['inputDefault', { static: false }]
-            }], inputDurationRef: [{
-                type: ContentChild,
-                args: ['inputDuration', { static: false }]
-            }], inputEmailRef: [{
-                type: ContentChild,
-                args: ['inputEmail', { static: false }]
-            }], inputFileRef: [{
-                type: ContentChild,
-                args: ['inputFile', { static: false }]
-            }], inputHiddenRef: [{
-                type: ContentChild,
-                args: ['inputHidden', { static: false }]
-            }], inputImageRef: [{
-                type: ContentChild,
-                args: ['inputImage', { static: false }]
-            }], inputMonthRef: [{
-                type: ContentChild,
-                args: ['inputMonth', { static: false }]
-            }], inputNumberRef: [{
-                type: ContentChild,
-                args: ['inputNumber', { static: false }]
-            }], inputOptionsMultipleRef: [{
-                type: ContentChild,
-                args: ['inputOptionsMultiple', { static: false }]
-            }], inputOptionsRef: [{
-                type: ContentChild,
-                args: ['inputOptions', { static: false }]
-            }], inputOptionsSingleRef: [{
-                type: ContentChild,
-                args: ['inputOptionsSingle', { static: false }]
-            }], inputPasswordRef: [{
-                type: ContentChild,
-                args: ['inputPassword', { static: false }]
-            }], inputRangeRef: [{
-                type: ContentChild,
-                args: ['inputRange', { static: false }]
-            }], inputSearchRef: [{
-                type: ContentChild,
-                args: ['inputSearch', { static: false }]
-            }], inputTelRef: [{
-                type: ContentChild,
-                args: ['inputTel', { static: false }]
-            }], inputTextRef: [{
-                type: ContentChild,
-                args: ['inputText', { static: false }]
-            }], inputTextareaRef: [{
-                type: ContentChild,
-                args: ['inputTextarea', { static: false }]
-            }], inputTimeRef: [{
-                type: ContentChild,
-                args: ['inputTime', { static: false }]
-            }], inputUrlRef: [{
-                type: ContentChild,
-                args: ['inputUrl', { static: false }]
-            }], inputWeekRef: [{
-                type: ContentChild,
-                args: ['inputWeek', { static: false }]
             }], apiName: [{
                 type: Input
             }], rel: [{
@@ -1580,13 +1925,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
                 type: Input
             }] } });
 
-var ColumnFilterType;
-(function (ColumnFilterType) {
-    ColumnFilterType["text"] = "text";
-    ColumnFilterType["numeric"] = "numeric";
-    ColumnFilterType["boolean"] = "boolean";
-    ColumnFilterType["date"] = "date";
-})(ColumnFilterType || (ColumnFilterType = {}));
 class RESTworldListViewComponent {
     constructor(_clients, _confirmationService, _messageService, avatarGenerator, _router) {
         this._clients = _clients;
@@ -1595,33 +1933,31 @@ class RESTworldListViewComponent {
         this.avatarGenerator = avatarGenerator;
         this._router = _router;
         this.isLoading = false;
-        this.load = _.debounce(this.load2, 100);
+        this.load = _.debounce(this.loadInternal, 100);
         this._editLink = '/edit';
-        this._sortField = '';
-        this._sortOrder = 1;
+        this._lastParameters = {};
         this._totalRecords = 0;
-        this.rowsPerPage = [10, 25, 50];
-        this._lastEvent = {
-            rows: this.rowsPerPage[0]
+        this.headerMenu = [];
+        this.rowMenu = (row, openedByRightClick) => {
+            var _a;
+            return [
+                {
+                    icon: "fas fa-edit",
+                    label: openedByRightClick ? "View / Edit" : undefined,
+                    tooltip: !openedByRightClick ? "View / Edit" : undefined,
+                    tooltipPosition: "left",
+                    routerLink: [this.editLink, this.apiName, this.rel, (_a = row._links) === null || _a === void 0 ? void 0 : _a.self[0].href]
+                }, {
+                    icon: "fas fa-trash-alt",
+                    label: openedByRightClick ? "Delete" : undefined,
+                    tooltip: !openedByRightClick ? "Delete" : undefined,
+                    tooltipPosition: "left",
+                    styleClass: "p-button-danger",
+                    command: () => this.showDeleteConfirmatioModal(row)
+                }
+            ];
         };
     }
-    get PropertyType() {
-        return PropertyType;
-    }
-    get apiName() {
-        return this._apiName;
-    }
-    set apiName(value) {
-        this._apiName = value;
-        this.load(this._lastEvent);
-    }
-    get columns() {
-        var _a, _b;
-        return (_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.properties.filter(p => p.type !== PropertyType.Hidden)) !== null && _b !== void 0 ? _b : [];
-    }
-    get dateFormat() {
-        return RESTworldListViewComponent._dateFormat;
-    }
     get editLink() {
         return this._editLink;
     }
@@ -1629,6 +1965,14 @@ class RESTworldListViewComponent {
         if (value)
             this._editLink = value;
     }
+    set apiName(value) {
+        this._apiName = value;
+        this.load(this._lastParameters);
+    }
+    ;
+    get apiName() {
+        return this._apiName;
+    }
     get newHref() {
         var _a, _b;
         return (_b = (_a = this.resource) === null || _a === void 0 ? void 0 : _a.findLink('new')) === null || _b === void 0 ? void 0 : _b.href;
@@ -1638,27 +1982,7 @@ class RESTworldListViewComponent {
     }
     set rel(value) {
         this._rel = value;
-        this.load(this._lastEvent);
-    }
-    get rows() {
-        var _a;
-        return ((_a = this._lastEvent) === null || _a === void 0 ? void 0 : _a.rows) || 0;
-    }
-    get sortField() {
-        return this._sortField;
-    }
-    set sortField(value) {
-        this._sortField = value !== null && value !== void 0 ? value : '';
-        this._lastEvent.sortField = value;
-        this.load(this._lastEvent);
-    }
-    get sortOrder() {
-        return this._sortOrder;
-    }
-    set sortOrder(value) {
-        this._sortOrder = value !== null && value !== void 0 ? value : 1;
-        this._lastEvent.sortOrder = value;
-        this.load(this._lastEvent);
+        this.load(this._lastParameters);
     }
     get template() {
         return this._template;
@@ -1670,9 +1994,6 @@ class RESTworldListViewComponent {
         var _a, _b;
         return ((_b = (_a = this.resource) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.items) || [];
     }
-    set totalRecords(value) {
-        this._totalRecords = value || 0;
-    }
     createNew() {
         return this._router.navigate([this.editLink, this.apiName, this.rel, this.newHref]);
     }
@@ -1682,16 +2003,15 @@ class RESTworldListViewComponent {
                 return;
             yield this.getClient().delete(resource);
             this._messageService.add({ severity: 'success', summary: 'Deleted', detail: 'The resource has been deleted.' });
-            this.load(this._lastEvent);
+            this.loadInternal(this._lastParameters);
         });
     }
-    load2(event) {
+    loadInternal(parameters) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.apiName || !this.rel)
                 return;
             this.isLoading = true;
-            this._lastEvent = event;
-            const parameters = ODataService.createParametersFromTableLoadEvent(event, this.template);
             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 });
@@ -1707,7 +2027,17 @@ class RESTworldListViewComponent {
                     this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resources from the API. ' + e, data: e });
                 }
                 this.resource = response.body;
-                this.totalRecords = this.resource.totalPages && parameters.$top ? this.resource.totalPages * parameters.$top : undefined;
+                const rowsPerPage = (_a = parameters.$top) !== null && _a !== void 0 ? _a : response.body._embedded.items.length;
+                const totalPages = (_b = response.body.totalPages) !== null && _b !== void 0 ? _b : 1;
+                this._totalRecords = totalPages * rowsPerPage;
+                this.headerMenu = [
+                    {
+                        icon: "fas fa-plus",
+                        styleClass: "p-button-success",
+                        routerLink: [this.editLink, this.apiName, this.rel, this.newHref],
+                        items: this.createButtonMenu
+                    }
+                ];
             }
             this.isLoading = false;
         });
@@ -1720,51 +2050,25 @@ class RESTworldListViewComponent {
             accept: () => this.delete(resource)
         });
     }
-    toColumnFilterType(propertyType) {
-        switch (propertyType) {
-            case PropertyType.Number:
-                return ColumnFilterType.numeric;
-            case PropertyType.Bool:
-                return ColumnFilterType.boolean;
-            case PropertyType.Date:
-            case PropertyType.DatetimeLocal:
-            case PropertyType.DatetimeOffset:
-                return ColumnFilterType.date;
-            default:
-                return ColumnFilterType.text;
-        }
-    }
     getClient() {
         if (!this.apiName)
             throw new Error('Cannot get a client, because the apiName is not set.');
         return this._clients.getClient(this.apiName);
     }
 }
-RESTworldListViewComponent._dateFormat = new Date(3333, 10, 22)
-    .toLocaleDateString()
-    .replace("22", "dd")
-    .replace("11", "MM")
-    .replace("3333", "y")
-    .replace("33", "yy");
-RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }, { token: i4$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RESTworldListViewComponent, selector: "rw-list", inputs: { createButtonMenu: "createButtonMenu", rowsPerPage: "rowsPerPage", apiName: "apiName", editLink: "editLink", rel: "rel", sortField: "sortField", sortOrder: "sortOrder" }, 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         [sortField]=\"sortField\"\r\n         [sortOrder]=\"sortOrder\">\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n                    {{col.prompt}}\r\n                    <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                    <p-columnFilter [type]=\"toColumnFilterType(col.type)\" [field]=\"col.name\" 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\">\r\n                        <a *ngIf=\"!createButtonMenu\" class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"[editLink, apiName, rel, newHref]\" pTooltip=\"Create new\" tooltipPosition=\"left\"></a>\r\n                        <p-splitButton *ngIf=\"createButtonMenu\" styleClass=\"p-button-success\" icon=\"fas fa-plus\" pTooltip=\"Create new\" tooltipPosition=\"left\" (onClick)=\"createNew()\" [model]=\"createButtonMenu\" appendTo=\"body\"></p-splitButton>\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=\"PropertyType.Text\">\r\n                    <rw-avatar *ngIf=\"col.name === 'createdBy' || col.name === 'lastChangedBy'\" [user]=\"entity[col.name]\"></rw-avatar>\r\n                    <span *ngIf=\"col.name !== 'createdBy' && col.name !== 'lastChangedBy'\">{{entity[col.name]}}</span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"PropertyType.Number\" class=\"flex justify-content-end\">{{entity[col.name]}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.Bool\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.name]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n                <span *ngSwitchCase=\"PropertyType.Date\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.DatetimeLocal\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.DatetimeOffset\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.Collection\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.name]\">{{arrayElement | json}}</p></span>\r\n                <span *ngSwitchCase=\"PropertyType.Object\" class=\"flex justify-content-end\">{{entity[col.name] | json}}</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, rel, 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:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$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", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i7$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i7$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", "showButtons"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i10$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"] }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i13.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "component", type: i13$2.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { kind: "component", type: RestWorldAvatarComponent, selector: "rw-avatar", inputs: ["user"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$3.ConfirmationService }, { token: i2$3.MessageService }, { token: AvatarGenerator }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: RESTworldListViewComponent, selector: "rw-list", inputs: { createButtonMenu: "createButtonMenu", editLink: "editLink", apiName: "apiName", rel: "rel" }, ngImport: i0, template: "<rw-table\r\n  [api]=\"apiName\"\r\n  [template]=\"template\"\r\n  [rows]=\"value\"\r\n  [headerMenu]=\"headerMenu\"\r\n  [rowMenu]=\"rowMenu\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [isLoading]=\"isLoading\"\r\n  (onFilterOrSortChanged)=\"load($event)\">\r\n</rw-table>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], dependencies: [{ kind: "component", type: RestWorldTableComponent, selector: "rw-table", inputs: ["api", "template", "rows", "rowsPerPageOptions", "headerMenu", "rowMenu", "showRowMenuAsColumn", "showRowMenuOnRightClick", "totalRecords", "styleClass", "tableStyle", "scrollable", "scrollHeight", "isLoading"], outputs: ["onFilterOrSortChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-list', 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         [sortField]=\"sortField\"\r\n         [sortOrder]=\"sortOrder\">\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n                    {{col.prompt}}\r\n                    <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                    <p-columnFilter [type]=\"toColumnFilterType(col.type)\" [field]=\"col.name\" 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\">\r\n                        <a *ngIf=\"!createButtonMenu\" class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"[editLink, apiName, rel, newHref]\" pTooltip=\"Create new\" tooltipPosition=\"left\"></a>\r\n                        <p-splitButton *ngIf=\"createButtonMenu\" styleClass=\"p-button-success\" icon=\"fas fa-plus\" pTooltip=\"Create new\" tooltipPosition=\"left\" (onClick)=\"createNew()\" [model]=\"createButtonMenu\" appendTo=\"body\"></p-splitButton>\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=\"PropertyType.Text\">\r\n                    <rw-avatar *ngIf=\"col.name === 'createdBy' || col.name === 'lastChangedBy'\" [user]=\"entity[col.name]\"></rw-avatar>\r\n                    <span *ngIf=\"col.name !== 'createdBy' && col.name !== 'lastChangedBy'\">{{entity[col.name]}}</span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"PropertyType.Number\" class=\"flex justify-content-end\">{{entity[col.name]}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.Bool\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.name]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n                <span *ngSwitchCase=\"PropertyType.Date\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.DatetimeLocal\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.DatetimeOffset\" [pTooltip]=\"entity[col.name]\">{{entity[col.name] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"PropertyType.Collection\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.name]\">{{arrayElement | json}}</p></span>\r\n                <span *ngSwitchCase=\"PropertyType.Object\" class=\"flex justify-content-end\">{{entity[col.name] | json}}</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, rel, 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:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }, { type: i4$2.Router }]; }, propDecorators: { createButtonMenu: [{
+            args: [{ selector: 'rw-list', template: "<rw-table\r\n  [api]=\"apiName\"\r\n  [template]=\"template\"\r\n  [rows]=\"value\"\r\n  [headerMenu]=\"headerMenu\"\r\n  [rowMenu]=\"rowMenu\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [isLoading]=\"isLoading\"\r\n  (onFilterOrSortChanged)=\"load($event)\">\r\n</rw-table>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: RestWorldClientCollection }, { type: i2$3.ConfirmationService }, { type: i2$3.MessageService }, { type: AvatarGenerator }, { type: i3$2.Router }]; }, propDecorators: { createButtonMenu: [{
                 type: Input
-            }], rowsPerPage: [{
+            }], editLink: [{
                 type: Input
             }], apiName: [{
                 type: Input
-            }], editLink: [{
-                type: Input
             }], rel: [{
                 type: Input
-            }], sortField: [{
-                type: Input
-            }], sortOrder: [{
-                type: Input
             }] } });
 
 function initializeSettings(settingsService) {
@@ -1775,13 +2079,25 @@ class RestworldClientModule {
 RestworldClientModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestworldClientModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 RestworldClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: RestworldClientModule, declarations: [RESTworldListViewComponent,
         RESTworldEditViewComponent,
-        RESTWorldImageViewComponent,
-        RESTWorldFileViewComponent,
-        RestworldEditFormComponent,
+        RestWorldImageComponent,
+        RestWorldFileComponent,
         RestWorldAvatarComponent,
         SafeUrlPipe,
         AsPipe,
-        RestWorldAvatarComponent], imports: [CommonModule,
+        RestWorldAvatarComponent,
+        RestWorldInputComponent,
+        RestWorldLabelComponent,
+        RestWorldFormElementComponent,
+        RestWorldInputDropdownComponent,
+        RestWorldInputCollectionComponent,
+        RestWorldInputObjectComponent,
+        RestWorldInputSimpleComponent,
+        RestWorldValidationErrorsComponent,
+        RestWorldInputTemplateComponent,
+        RestWorldFormComponent,
+        RestWorldTableComponent,
+        RestWorldMenuButtonComponent,
+        RestWorldIdNavigationComponent], imports: [CommonModule,
         RouterModule,
         FormsModule,
         ReactiveFormsModule,
@@ -1812,16 +2128,29 @@ RestworldClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         ColorPickerModule,
         DragDropModule,
         SplitButtonModule,
-        AvatarModule], exports: [RESTworldListViewComponent,
+        AvatarModule,
+        ContextMenuModule], exports: [RESTworldListViewComponent,
         RESTworldEditViewComponent,
-        RESTWorldImageViewComponent,
-        RESTWorldFileViewComponent,
-        RestworldEditFormComponent,
+        RestWorldImageComponent,
+        RestWorldFileComponent,
         RestWorldAvatarComponent,
         SafeUrlPipe,
-        AsPipe] });
+        AsPipe,
+        RestWorldInputComponent,
+        RestWorldLabelComponent,
+        RestWorldFormElementComponent,
+        RestWorldInputDropdownComponent,
+        RestWorldInputCollectionComponent,
+        RestWorldInputObjectComponent,
+        RestWorldInputSimpleComponent,
+        RestWorldValidationErrorsComponent,
+        RestWorldInputTemplateComponent,
+        RestWorldFormComponent,
+        RestWorldTableComponent,
+        RestWorldMenuButtonComponent,
+        RestWorldIdNavigationComponent] });
 RestworldClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestworldClientModule, providers: [
-        RESTworldClientCollection,
+        RestWorldClientCollection,
         AvatarGenerator,
         ConfirmationService,
         FormService,
@@ -1863,20 +2192,33 @@ RestworldClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         ColorPickerModule,
         DragDropModule,
         SplitButtonModule,
-        AvatarModule] });
+        AvatarModule,
+        ContextMenuModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: RestworldClientModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         RESTworldListViewComponent,
                         RESTworldEditViewComponent,
-                        RESTWorldImageViewComponent,
-                        RESTWorldFileViewComponent,
-                        RestworldEditFormComponent,
+                        RestWorldImageComponent,
+                        RestWorldFileComponent,
                         RestWorldAvatarComponent,
                         SafeUrlPipe,
                         AsPipe,
                         RestWorldAvatarComponent,
+                        RestWorldInputComponent,
+                        RestWorldLabelComponent,
+                        RestWorldFormElementComponent,
+                        RestWorldInputDropdownComponent,
+                        RestWorldInputCollectionComponent,
+                        RestWorldInputObjectComponent,
+                        RestWorldInputSimpleComponent,
+                        RestWorldValidationErrorsComponent,
+                        RestWorldInputTemplateComponent,
+                        RestWorldFormComponent,
+                        RestWorldTableComponent,
+                        RestWorldMenuButtonComponent,
+                        RestWorldIdNavigationComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1910,20 +2252,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
                         ColorPickerModule,
                         DragDropModule,
                         SplitButtonModule,
-                        AvatarModule
+                        AvatarModule,
+                        ContextMenuModule,
                     ],
                     exports: [
                         RESTworldListViewComponent,
                         RESTworldEditViewComponent,
-                        RESTWorldImageViewComponent,
-                        RESTWorldFileViewComponent,
-                        RestworldEditFormComponent,
+                        RestWorldImageComponent,
+                        RestWorldFileComponent,
                         RestWorldAvatarComponent,
                         SafeUrlPipe,
-                        AsPipe
+                        AsPipe,
+                        RestWorldInputComponent,
+                        RestWorldLabelComponent,
+                        RestWorldFormElementComponent,
+                        RestWorldInputDropdownComponent,
+                        RestWorldInputCollectionComponent,
+                        RestWorldInputObjectComponent,
+                        RestWorldInputSimpleComponent,
+                        RestWorldValidationErrorsComponent,
+                        RestWorldInputTemplateComponent,
+                        RestWorldFormComponent,
+                        RestWorldTableComponent,
+                        RestWorldMenuButtonComponent,
+                        RestWorldIdNavigationComponent
                     ],
                     providers: [
-                        RESTworldClientCollection,
+                        RestWorldClientCollection,
                         AvatarGenerator,
                         ConfirmationService,
                         FormService,
@@ -1946,5 +2301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AsPipe, AvatarGenerator, ColumnFilterType, FormService, LinkNames, ODataService, ProblemDetails, RESTWorldFileViewComponent, RESTWorldImageViewComponent, RESTworldClient, RESTworldClientCollection, RESTworldEditViewComponent, RESTworldListViewComponent, RESTworldOptions, RestWorldAvatarComponent, RestworldClientModule, RestworldEditFormComponent, SafeUrlPipe, SettingsService, initializeSettings };
+export { AsPipe, AvatarGenerator, FormService, LinkNames, ODataService, ProblemDetails, PropertyWithImage, PropertyWithOptions, RESTworldEditViewComponent, RESTworldListViewComponent, RestWorldAvatarComponent, RestWorldClient, RestWorldClientCollection, RestWorldFileComponent, RestWorldFormComponent, RestWorldFormElementComponent, RestWorldIdNavigationComponent, RestWorldImageComponent, RestWorldInputCollectionComponent, RestWorldInputComponent, RestWorldInputDropdownComponent, RestWorldInputObjectComponent, RestWorldInputSimpleComponent, RestWorldInputTemplateComponent, RestWorldLabelComponent, RestWorldMenuButtonComponent, RestWorldOptions, RestWorldTableComponent, RestWorldValidationErrorsComponent, RestworldClientModule, SafeUrlPipe, SettingsService, initializeSettings };
+//# sourceMappingURL=wertzui-ngx-restworld-client.mjs.map
 //# sourceMappingURL=wertzui-ngx-restworld-client.mjs.map