@wertzui/ngx-restworld-client 2.0.0 → 3.1.1

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

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