@wertzui/ngx-restworld-client 1.0.2 → 2.0.0

package/bundles/wertzui-ngx-restworld-client.umd.js

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