@wertzui/ngx-restworld-client 17.1.1 → 18.0.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, computed, Component, Pipe, forwardRef, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, inject, ViewEncapsulation, ChangeDetectionStrategy, linkedSignal, signal, viewChildren, effect, Self, Directive, Optional, Host, SkipSelf, Inject, NgModule, ContentChild, untracked, resource, provideAppInitializer } from '@angular/core';
+import { Injectable, input, computed, Component, Pipe, forwardRef, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, inject, ViewEncapsulation, ChangeDetectionStrategy, signal, resource, viewChildren, effect, Self, Directive, Optional, Host, SkipSelf, Inject, NgModule, untracked, ContentChild, linkedSignal, provideAppInitializer } from '@angular/core';
 import * as i2 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i3 from 'primeng/tooltip';
@@ -9,7 +9,7 @@ import { AsyncPipe, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@wertzui/ngx-hal-client';
 import { Property, PropertyType, ProblemDetails, ResourceFactory, Link, NumberTemplate, Template, PagedListResource } from '@wertzui/ngx-hal-client';
 import * as i2$3 from '@angular/forms';
-import { FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormArray, FormsModule, FormControlName, NG_VALIDATORS, NG_ASYNC_VALIDATORS, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, RangeValueAccessor, NumberValueAccessor, NgControlStatus, ReactiveFormsModule, FormGroup, FormControl, Validators, FormArrayName } from '@angular/forms';
+import { FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormArray, FormsModule, FormControlName, NG_VALIDATORS, NG_ASYNC_VALIDATORS, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, RangeValueAccessor, NumberValueAccessor, NgControlStatus, ReactiveFormsModule, FormArrayName, FormGroup, FormControl, Validators } from '@angular/forms';
 import * as clrFormat from 'clr-format';
 import * as i2$1 from 'primeng/api';
 import { PrimeTemplate, SharedModule, FilterMatchMode, TranslationKeys } from 'primeng/api';
@@ -17,17 +17,16 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { CheckboxStyle } from 'primeng/checkbox';
 import { HttpHeaders, HttpEventType, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgHttpCachingHeaders, withNgHttpCachingLocalStorage, NgHttpCachingStrategy, provideNgHttpCaching } from 'ng-http-caching';
-import { lastValueFrom, merge, map, mergeMap, tap, finalize } from 'rxjs';
+import { lastValueFrom, merge, map, mergeMap, distinctUntilChanged, switchMap, EMPTY, debounceTime, startWith, tap, finalize } from 'rxjs';
 import * as i1$3 from 'primeng/button';
 import { ButtonModule, ButtonDirective } from 'primeng/button';
 import * as i2$2 from 'primeng/fileupload';
 import { FileUploadModule, FileUpload } from 'primeng/fileupload';
 import * as i1$2 from '@angular/platform-browser';
-import * as i4$3 from 'ngx-valdemort';
+import * as i5 from 'ngx-valdemort';
 import { ValidationErrorsComponent, ValidationErrorDirective } from 'ngx-valdemort';
 import * as i1$4 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import * as i3$3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3$2 from 'primeng/multiselect';
 import { MultiSelect } from 'primeng/multiselect';
@@ -45,21 +44,21 @@ import { ColorPickerModule } from 'primeng/colorpicker';
 import { InputText } from 'primeng/inputtext';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
-import * as i6 from 'primeng/progressspinner';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i8 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i3$4 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
-import * as i4$1 from 'primeng/splitbutton';
-import { SplitButtonModule } from 'primeng/splitbutton';
 import { createTraverser, TokenType, defaultParser } from '@odata/parser';
 import { PrimitiveTypeEnum } from '@odata/metadata';
 import * as i7 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
-import * as i5 from 'primeng/table';
+import * as i6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
+import * as i4$1 from 'primeng/splitbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i3$3 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
 import * as i4$2 from 'primeng/config';
+import * as i6$1 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import * as i8 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
 import { WebTracerProvider, SimpleSpanProcessor, ConsoleSpanExporter, BatchSpanProcessor, AlwaysOnSampler, ParentBasedSampler, TraceIdRatioBasedSampler, AlwaysOffSampler } from '@opentelemetry/sdk-trace-web';
 import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
@@ -67,11 +66,11 @@ import { resourceFromAttributes } from '@opentelemetry/resources';
 import { trace, context, SpanKind, propagation, SpanStatusCode } from '@opentelemetry/api';
 import { filter } from 'rxjs/operators';
 import { ATTR_SERVICE_NAME, ATTR_HTTP_REQUEST_HEADER, ATTR_CLIENT_PORT, ATTR_CLIENT_ADDRESS, ATTR_URL_SCHEME, ATTR_URL_QUERY, ATTR_URL_PATH, ATTR_URL_FULL, ATTR_HTTP_REQUEST_METHOD, ATTR_HTTP_RESPONSE_STATUS_CODE, ATTR_HTTP_RESPONSE_HEADER } from '@opentelemetry/semantic-conventions';
-import * as i7$1 from 'primeng/confirmdialog';
+import * as i8$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i5$1 from 'primeng/skeleton';
+import * as i6$2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i6$1 from 'primeng/tabs';
+import * as i7$1 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 
 /**
@@ -807,8 +806,8 @@ class ProblemService {
      * @param defaultTitle The default title to display if the problem details do not contain a title.
      */
     displayToast(problemDetails, defaultDetail = "Error", defaultTitle = "Error") {
-        const summary = problemDetails.title ?? defaultTitle;
-        const detail = problemDetails.detail ?? defaultDetail;
+        const summary = problemDetails?.title ?? defaultTitle;
+        const detail = problemDetails?.detail ?? defaultDetail;
         this._messageService.add({ severity: "error", summary: summary, detail: detail, sticky: true });
     }
     /**
@@ -1559,24 +1558,68 @@ class OptionsManager {
     _clients;
     apiName;
     property;
-    selectedValues;
+    _selectedValues;
     _getLabel;
     _getTooltip;
     getLabel = computed(() => this._getLabel() ?? ((itemOrValue) => this.getDefaultLabel(itemOrValue)), ...(ngDevMode ? [{ debugName: "getLabel" }] : []));
     getTooltip = computed(() => this._getTooltip() ?? ((itemOrValue) => this.getDefaultTooltip(itemOrValue)), ...(ngDevMode ? [{ debugName: "getTooltip" }] : []));
-    items = linkedSignal(() => this.options()?.inline ?? []);
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    // public readonly items = linkedSignal(() => this.options()?.inline as TOptionsItem[] ?? []);
+    loading = computed(() => this.items.isLoading(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
     options = computed(() => this.property().options, ...(ngDevMode ? [{ debugName: "options" }] : []));
     promptField = computed(() => this.options()?.promptField ?? "prompt", ...(ngDevMode ? [{ debugName: "promptField" }] : []));
     valueField = computed(() => this.options()?.valueField ?? "value", ...(ngDevMode ? [{ debugName: "valueField" }] : []));
     _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
-    selectedItems = computed(() => this.selectedValues()?.map(value => this.getItemByValue(this.items(), value) ?? []), ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-    constructor(_problemService, _clients, apiName, property, selectedValues, _getLabel, _getTooltip) {
+    selectedItems = computed(() => this.selectedValues()?.map(value => this.getItemByValue(this.items.value(), value) ?? []), ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    selectedValues = computed(() => {
+        const values = this._selectedValues();
+        if (values === null || values === undefined)
+            return [];
+        return (Array.isArray(values) ? values : [values]);
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    filter = signal(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    _lastFilter = undefined;
+    items = resource({
+        params: () => ({ filter: this.filter(), options: this.options(), selectedValues: this.selectedValues() }),
+        loader: async ({ params }) => {
+            const options = params.options;
+            let filter = params.filter;
+            const selectedValues = params.selectedValues;
+            // We have inline options, so we don't need to load them from the server.
+            if (Array.isArray(options?.inline) && options.inline.length > 0)
+                return options.inline;
+            // First load: there might be selected items, but the user has not typed in a filter yet.
+            // In this case, we want to load the selected items to be able to show them in the dropdown.
+            if (filter === undefined && selectedValues.length > 0)
+                filter = `${options.valueField} in (${selectedValues})`;
+            // Only make the call if the filter has changed.
+            // This prevents unnecessary calls when the selected values change but the filter is the same.
+            if (filter === this._lastFilter) {
+                const currentItems = this.items.value();
+                if (currentItems === undefined)
+                    return [];
+                return currentItems;
+            }
+            this._lastFilter = filter;
+            const templatedUri = options.link?.href;
+            if (!templatedUri) {
+                this._problemService.displayToast(undefined, `The property ${this.property().name} does not have options with a link href.`);
+                return [];
+            }
+            const headersWithCaching = new HttpHeaders({ [NgHttpCachingHeaders.ALLOW_CACHE]: "1", [NgHttpCachingHeaders.LIFETIME]: "3000" });
+            const response = await this._client().getListByUri(templatedUri, { $filter: filter, $top: 10 }, headersWithCaching);
+            this._problemService.checkResponseDisplayErrorsAndThrow(response, undefined, `An error occurred while getting the selected items for the property ${this.property().name}.`);
+            const oldItems = this.items.value();
+            const newItems = response.body._embedded.items;
+            const combinedItems = this.combineCurrentItemsWithSelected(oldItems, selectedValues, newItems);
+            return combinedItems;
+        }
+    });
+    constructor(_problemService, _clients, apiName, property, _selectedValues, _getLabel, _getTooltip) {
         this._problemService = _problemService;
         this._clients = _clients;
         this.apiName = apiName;
         this.property = property;
-        this.selectedValues = selectedValues;
+        this._selectedValues = _selectedValues;
         this._getLabel = _getLabel;
         this._getTooltip = _getTooltip;
     }
@@ -1589,7 +1632,7 @@ class OptionsManager {
         return shortened;
     }
     getItemByValue(items, value) {
-        const foundItem = items.find(item => this.getValue(item) === value);
+        const foundItem = items?.find(item => this.getValue(item) === value);
         if (foundItem)
             return foundItem;
         if (value === null || value === undefined)
@@ -1606,7 +1649,7 @@ class OptionsManager {
         let item = itemOrValue;
         if (itemOrValue === undefined || itemOrValue === null || !itemOrValue.hasOwnProperty(promptField)) {
             const value = itemOrValue;
-            item = this.getItemByValue(this.items(), value);
+            item = this.getItemByValue(this.items.value(), value);
         }
         if (item === undefined || item === null || !item.hasOwnProperty(promptField))
             return "";
@@ -1626,53 +1669,21 @@ class OptionsManager {
         const item = itemOrValue;
         return item[valueField];
     }
-    /**
-     * Initializes the options manager.
-     * This will load the initial options for the property.
-     * Call it once in the ngOnInit method of your component.
-     */
-    async initialize() {
-        const options = this.options();
-        if (!options.link?.href)
-            return;
-        const selectedValues = this.selectedValues() ?? options.selectedValues;
-        const filter = selectedValues === null || selectedValues === undefined ?
-            undefined :
-            `${options.valueField} in (${selectedValues})`;
-        await this.updateItemsFromFilter(filter);
-    }
     /**
      * Updates the items based on the given filter.
      * @param filter The filter to use when getting the items.
      */
     async updateItemsFromFilter(filter) {
-        this.loading.set(true);
-        try {
-            const options = this.options();
-            const templatedUri = options.link?.href;
-            if (!templatedUri)
-                this._problemService.displayToastAndThrow(undefined, `The property ${this.property().name} does not have options with a link href.`);
-            const headersWithCaching = new HttpHeaders({ [NgHttpCachingHeaders.ALLOW_CACHE]: "1", [NgHttpCachingHeaders.LIFETIME]: "3000" });
-            const response = await this._client().getListByUri(templatedUri, { $filter: filter, $top: 10 }, headersWithCaching);
-            this._problemService.checkResponseDisplayErrorsAndThrow(response, undefined, `An error occurred while getting the selected items for the property ${this.property().name}.`);
-            const items = response.body._embedded.items;
-            const newItems = this.combineCurrentItemsWithSelected(items);
-            this.items.set(newItems);
-        }
-        finally {
-            this.loading.set(false);
-        }
+        this.filter.set(filter);
     }
-    combineCurrentItemsWithSelected(items) {
-        const oldInline = this.items();
-        if (!oldInline)
-            return items;
-        const selectedValues = this.selectedValues();
-        const selectedValuesAsArray = (Array.isArray(selectedValues) ? selectedValues : [selectedValues]);
-        const itemsToKeep = oldInline.filter(i => selectedValuesAsArray.includes(this.getValue(i)));
-        const newValues = items.map(i => this.getValue(i));
-        const newItems = items.concat(itemsToKeep.filter(i => !newValues.includes(this.getValue(i))));
-        return newItems;
+    combineCurrentItemsWithSelected(oldItems, selectedValues, newItems) {
+        if (!oldItems)
+            return newItems;
+        // const selectedValuesAsArray = (Array.isArray(selectedValues) ? selectedValues : [selectedValues]) as ExtractGenericOptionsSelectedValuesType<TProperty>[];
+        const itemsToKeep = oldItems.filter(i => selectedValues.includes(this.getValue(i)));
+        const newValues = newItems.map(i => this.getValue(i));
+        const combinedItems = newItems.concat(itemsToKeep.filter(i => !newValues.includes(this.getValue(i))));
+        return combinedItems;
     }
     getDefaultLabel(itemOrValue) {
         if (itemOrValue === undefined || itemOrValue === null)
@@ -1864,9 +1875,6 @@ class RestWorldDisplayDropdownComponent {
     constructor(optionsService) {
         this.optionsManager = optionsService.getManager(this.apiName, this.property, this.selectedValues, this.getLabel, this.getTooltip);
     }
-    async ngOnInit() {
-        await this.optionsManager.initialize();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayDropdownComponent, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplayDropdownComponent, isStandalone: true, selector: "rw-display-dropdown", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, getTooltip: { classPropertyName: "getTooltip", publicName: "getTooltip", isSignal: true, isRequired: false, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (item of optionsManager.selectedItems(); track item; let last = $last) {\r\n    <span [pTooltip]=\"optionsManager.getTooltip()($any(item))\">{{optionsManager.getLabel()($any(item))}}</span>{{last ? \"\" : \", \"}}\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
 }
@@ -2721,1657 +2729,1715 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }] });
 
 /**
- * A base class for all input components..
+ * This visitor turns a parsed OData $filter query string represented as a {@link Token} into a map of property names to filter metadata.
+ * The filter metadata is used by the PrimeNG table component to filter the rows of
+ * a table based on the values of the columns.
  */
-class RestWorldInputBaseComponent {
-    /**
-     * The property to display.
-     * @required
-     */
-    property = model.required(...(ngDevMode ? [{ debugName: "property" }] : []));
-    /**
-     * Set this to true if the input should use template driven forms instead of the default reactive forms.
+class OdataVisitor {
+    _filters = new Map();
+    operator;
+    propertyName;
+    value;
+    static correctFilterMatchMode(matchMode, literalValue) {
+        if (literalValue instanceof Date) {
+            switch (matchMode) {
+                case FilterMatchMode.EQUALS:
+                    return FilterMatchMode.DATE_IS;
+                case FilterMatchMode.NOT_EQUALS:
+                    return FilterMatchMode.DATE_IS_NOT;
+                case FilterMatchMode.LESS_THAN:
+                    return FilterMatchMode.DATE_BEFORE;
+                case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
+                    return FilterMatchMode.DATE_BEFORE;
+                case FilterMatchMode.GREATER_THAN:
+                    return FilterMatchMode.DATE_AFTER;
+                case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
+                    return FilterMatchMode.DATE_AFTER;
+            }
+        }
+        return matchMode;
+    }
+    static parseLiteralValue(node) {
+        const type = node.value;
+        switch (type) {
+            case PrimitiveTypeEnum.Binary:
+            case PrimitiveTypeEnum.Boolean:
+                return node.raw === "true";
+            case PrimitiveTypeEnum.Byte:
+            case PrimitiveTypeEnum.Int16:
+            case PrimitiveTypeEnum.Int32:
+            case PrimitiveTypeEnum.Int64:
+            case PrimitiveTypeEnum.SByte:
+                return Number.parseInt(node.raw);
+            case PrimitiveTypeEnum.Date:
+            case PrimitiveTypeEnum.DateTime:
+            case PrimitiveTypeEnum.DateTimeOffset:
+            case PrimitiveTypeEnum.Duration:
+            case PrimitiveTypeEnum.TimeOfDay:
+                return new Date(node.raw);
+            case PrimitiveTypeEnum.Decimal:
+            case PrimitiveTypeEnum.Double:
+            case PrimitiveTypeEnum.Single:
+                return Number.parseFloat(node.raw);
+            default:
+                switch (node.raw) {
+                    case "null":
+                        return null;
+                    default:
+                        return node.raw.startsWith("'") ? node.raw.substring(1, node.raw.length - 1) : node.raw;
+                }
+        }
+    }
+    static parseMethodCallExpression(node) {
+        switch (node.value.method) {
+            case 'startswith':
+                return FilterMatchMode.STARTS_WITH;
+            case 'contains':
+                return FilterMatchMode.CONTAINS;
+            case 'not contains':
+                return FilterMatchMode.NOT_CONTAINS;
+            case 'endswith':
+                return FilterMatchMode.ENDS_WITH;
+            default:
+                throw Error(`Unknown method call ${node.value.method}`);
+        }
+    }
+    /***
+     * Parses an OData $filter query string and returns a map of property names to filter metadata.
+     * @param node The root node of the OData $filter query string.
+     * @param logToConsole If true, logs the type and raw value of each token to the console.
+     * @returns A map of property names to filter metadata.
      */
-    useTemplateDrivenForms = input(false, ...(ngDevMode ? [{ debugName: "useTemplateDrivenForms" }] : []));
-    model = model(...(ngDevMode ? [undefined, { debugName: "model" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldInputBaseComponent, isStandalone: true, inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, useTemplateDrivenForms: { classPropertyName: "useTemplateDrivenForms", publicName: "useTemplateDrivenForms", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { property: "propertyChange", model: "modelChange" }, ngImport: i0 });
+    parse(node, logToConsole) {
+        if (logToConsole) {
+            const visitLogAll = createTraverser(Object.fromEntries(Object.entries(TokenType)
+                .map(([key, value]) => [key, (node) => console.log(`${node.type}: ${node.raw}`)])), true);
+            visitLogAll(node);
+        }
+        const visit = createTraverser({
+            EqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.EQUALS),
+            NotEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.NOT_EQUALS),
+            GreaterThanExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.GREATER_THAN),
+            GreaterOrEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO),
+            LesserThanExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.LESS_THAN),
+            LesserOrEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.LESS_THAN_OR_EQUAL_TO),
+            HasExpression: (node) => this.CreateFilter(this.propertyName, [this.value], FilterMatchMode.EQUALS),
+            ODataIdentifier: (node) => this.propertyName = node.value.name,
+            Literal: (node) => this.value = OdataVisitor.parseLiteralValue(node),
+            AndExpression: (node) => this.operator = "and",
+            OrExpression: (node) => this.operator = "or",
+            BoolParenExpression: (node) => this.SetOperatorForFilters(),
+            MethodCallExpression: (node) => this.visitMethodCallExpression(node, visit),
+        }, true);
+        visit(node);
+        return this._filters;
+    }
+    CreateFilter(propertyName, value, matchMode) {
+        if (propertyName === undefined)
+            throw Error(`Cannot add a filter for the value ${value} and the match mode ${matchMode} without a property name`);
+        matchMode = OdataVisitor.correctFilterMatchMode(matchMode, value);
+        const filter = this._filters.get(propertyName);
+        if (filter === undefined) {
+            this._filters.set(propertyName, [{ value, operator: "and", matchMode: matchMode }]);
+        }
+        else if (filter.length === 1 && Array.isArray(filter[0].value) && Array.isArray(value)) {
+            filter[0].value.push(...value); // Flags enum
+        }
+        else {
+            filter.push({ value, operator: "and", matchMode: matchMode });
+        }
+    }
+    SetOperatorForFilters() {
+        // In this case we are in the outermost expression which is just parantheses around the complete $filter value
+        if (this.propertyName === undefined)
+            return;
+        // If we have not found an operator, or it is "and", we can just stay with the default created with the filter.
+        if (this.operator === undefined || this.operator === "and")
+            return;
+        const filter = this._filters.get(this.propertyName);
+        if (filter === undefined)
+            return;
+        // The operator is "or", so we need to set the operator for all filters to "or"
+        for (const f of filter)
+            f.operator = this.operator;
+    }
+    // The visitor does not correctly implement the MethodCallExpressionToken, so we need to do this manually
+    visitMethodCallExpression(node, visit) {
+        for (const parameter of node.value.parameters)
+            visit(parameter);
+        const matchMode = OdataVisitor.parseMethodCallExpression(node);
+        this.CreateFilter(this.propertyName, this.value, matchMode);
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputBaseComponent, decorators: [{
-            type: Directive
-        }] });
+
 /**
- * A base class for all input components which also feature lazy loading, like dropdowns.
+ * This class is used to parse an OData $filter string into a Record of filter constraints.
  */
-class RestWorldInputLazyLoadBaseComponent extends RestWorldInputBaseComponent {
-    /**
-     * The name of the API to use for the property.
-     * @required
-     * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
-     */
-    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldInputLazyLoadBaseComponent, isStandalone: true, inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+class ODataFilterParser {
+    static parseFilter(filter, properties) {
+        if (!filter)
+            return {};
+        // The parser has a bug where it does not correctly parse cast expressions, so we need to replace them with the first argument
+        // See https://github.com/Soontao/odata-v4-parser/issues/283
+        filter = ODataFilterParser.replaceCastExpressions(filter);
+        const ast = defaultParser.filter(filter);
+        const visitor = new OdataVisitor();
+        const filters = visitor.parse(ast);
+        /// OData needs enum values in pascal case, but JSON and therefor HAL-Forms needs them in camel case
+        ODataFilterParser.MakeEnumValuesCamelCase(filters, properties);
+        return Object.fromEntries(filters);
+    }
+    static MakeEnumValuesCamelCase(filters, properties) {
+        for (const [key, value] of filters) {
+            for (const filter of value) {
+                const options = properties[key]?.options;
+                if (options && !options.link && typeof filter.value === "string") {
+                    filter.value = filter.value.charAt(0).toLowerCase() + filter.value.slice(1);
+                }
+            }
+        }
+    }
+    static replaceCastExpressions(input) {
+        // Regular expression to match cast(x, y) and extract x
+        const regex = /cast\(([^,]+),\s*[^)]+\)/g;
+        // Replace matches with the first captured group (x)
+        const result = input.replace(regex, (match, x) => x.trim());
+        return result;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, decorators: [{
-            type: Directive
-        }] });
+
 /**
- * A form element with a label that is automatically created from a property in a form template.
- * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
- * If you want a form element without a label, use {@link RestWorldFormInput} `<rw-input>`.
- * @example
- * <rw-form-element [property]="property" [apiName]="apiName"></rw-form-element>
+ * A static class that provides utility methods for creating OData filters, order by clauses, and parameters from {@link TableLazyLoadEvent} objects.
  */
-class RestWorldFormElementComponent extends RestWorldInputLazyLoadBaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: RestWorldFormElementComponent, isStandalone: true, selector: "rw-form-element", usesInheritance: true, ngImport: i0, template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property()\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName()\" [property]=\"property()\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputComponent), selector: "rw-input" }, { kind: "component", type: i0.forwardRef(() => RestWorldLabelComponent), selector: "rw-label", inputs: ["property"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-form-element', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputComponent), RestWorldLabelComponent], template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property()\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName()\" [property]=\"property()\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n" }]
-        }] });
-/**
- * A collection that is automatically created from the given property.
- * The collection supports drag & drop to re order the elements and can also be nested.
- * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
- * instead of using this component directly.
- * @example
- * <rw-input-collection [property]="property" [apiName]="apiName"></rw-input-collection>
- */
-class RestWorldInputCollectionComponent extends RestWorldInputLazyLoadBaseComponent {
-    _formService;
-    _controlContainer;
-    defaultTemplate = computed(() => this.property()._templates.default, ...(ngDevMode ? [{ debugName: "defaultTemplate" }] : []));
-    innerFormArray = computed(() => this._controlContainer.control?.controls[this.property().name], ...(ngDevMode ? [{ debugName: "innerFormArray" }] : []));
-    templates = computed(() => this.getCollectionEntryTemplates(this.property()), ...(ngDevMode ? [{ debugName: "templates" }] : []));
-    inputCollectionRef;
-    constructor(_formService, _controlContainer) {
-        super();
-        this._formService = _formService;
-        this._controlContainer = _controlContainer;
-    }
-    getCollectionEntryTemplates(property) {
-        if (!property)
-            return [];
-        return Object.entries(property._templates)
-            .filter(([key, value]) => Number.isInteger(Number.parseInt(key)) && Number.isInteger(Number.parseInt(value?.title ?? "")))
-            .map(([, value]) => new NumberTemplate(value));
-    }
-    addNewItemToCollection() {
-        const templates = this.templates();
-        const defaultTemplate = this.defaultTemplate();
-        const maxIndex = Math.max(...Object.keys(templates)
-            .map(key => Number.parseInt(key))
-            .filter(key => Number.isSafeInteger(key)));
-        const nextIndex = maxIndex < 0 ? 0 : maxIndex + 1;
-        const copiedTemplateDto = JSON.parse(JSON.stringify(defaultTemplate));
-        copiedTemplateDto.title = nextIndex.toString();
-        const copiedTemplate = new Template(copiedTemplateDto);
-        this.property.update((property) => { property._templates[nextIndex] = copiedTemplate; return { ...property }; });
-        this.innerFormArray().push(this._formService.createFormGroupFromTemplate(this.defaultTemplate()));
-    }
-    collectionItemDropped($event) {
-        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 innerFormArray = this.innerFormArray();
-        const movedControl = innerFormArray.at(previousIndex);
-        for (let i = previousIndex; i * movementDirection < currentIndex * movementDirection; i = i + movementDirection) {
-            innerFormArray.setControl(i, innerFormArray.at(i + movementDirection));
+class ODataService {
+    /**
+     * Creates an OData filter string for a given property and filter metadata.
+     * @param property - The property to filter on.
+     * @param filter - The filter metadata to use.
+     * @returns The OData filter string, or undefined if the filter value is falsy.
+     */
+    static createFilterForProperty(property, filter) {
+        if (filter.matchMode == TranslationKeys.NO_FILTER)
+            return undefined;
+        // Enums are handled differently
+        if (property.options && !property.options.link)
+            return ODataService.createFilterForEnum(property, filter);
+        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
+        const comparisonValue = ODataService.createComparisonValue(property, filter.value);
+        switch (oDataOperator) {
+            case 'contains':
+            case 'not contains':
+            case 'startswith':
+            case 'endswith':
+                return `${oDataOperator}(${property.name}, ${comparisonValue})`;
+            default:
+                return `${property.name} ${oDataOperator} ${comparisonValue}`;
         }
-        innerFormArray.setControl(currentIndex, movedControl);
-    }
-    deleteItemFromCollection(template) {
-        const title = template.title;
-        if (title === undefined)
-            throw new Error("Cannot delete a template without a title.");
-        this.property.update((property) => { delete property._templates[title]; return { ...property }; });
-        this.innerFormArray().removeAt(title);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputCollectionComponent, deps: [{ token: i1$1.FormService }, { token: i2$3.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputCollectionComponent, isStandalone: true, selector: "rw-input-collection", queries: [{ propertyName: "inputCollectionRef", first: true, predicate: ["inputCollection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex align-items-center\">\n    <div class=\"brace\">\n    </div>\n    <div class=\"w-full\" cdkDropList (cdkDropListDropped)=\"collectionItemDropped($event)\">\n        @for (template of templates(); track template) {\n            <div class=\"flex align-items-center\" cdkDrag>\n                <i class=\"fas fa-grip-lines\" cdkDragHandle></i>\n                <div class=\"brace\">\n                </div>\n                <div class=\"w-full flex justify-content-end\">\n                    <rw-input-template [formGroup]=\"innerFormArray().controls[template.title!]\" [template]=\"template\" [apiName]=\"apiName()\" class=\"w-full\"></rw-input-template>\n                    <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n                </div>\n            </div>\n        }\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>\n", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputTemplateComponent), selector: "rw-input-template", inputs: ["apiName", "template"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i3$3.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.CdkDragHandle), selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i0.forwardRef(() => ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$3.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2$3.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputCollectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-input-collection', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputTemplateComponent), DragDropModule, ButtonDirective, ReactiveFormsModule], template: "<div class=\"flex align-items-center\">\n    <div class=\"brace\">\n    </div>\n    <div class=\"w-full\" cdkDropList (cdkDropListDropped)=\"collectionItemDropped($event)\">\n        @for (template of templates(); track template) {\n            <div class=\"flex align-items-center\" cdkDrag>\n                <i class=\"fas fa-grip-lines\" cdkDragHandle></i>\n                <div class=\"brace\">\n                </div>\n                <div class=\"w-full flex justify-content-end\">\n                    <rw-input-template [formGroup]=\"innerFormArray().controls[template.title!]\" [template]=\"template\" [apiName]=\"apiName()\" class=\"w-full\"></rw-input-template>\n                    <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n                </div>\n            </div>\n        }\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>\n", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormService }, { type: i2$3.ControlContainer }], propDecorators: { inputCollectionRef: [{
-                type: ContentChild,
-                args: ['inputCollection', { static: false }]
-            }] } });
-/**
- * A form input element that is automatically created from a property in a form template.
- * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
- * If you also want a label, use {@link RestWorldFormElement} `<rw-form-element>`.
- * You can also use one of the different RestWorldInput... `<rw-input-...>` elements to render a specific input,
- * but it is advised to control the rendered input through the passed in property.
- * @example
- * <rw-input [property]="property" [apiName]="apiName"></rw-input>
- */
-class RestWorldInputComponent extends RestWorldInputLazyLoadBaseComponent {
-    get PropertyType() {
-        return PropertyType;
+    /**
+     * Creates an OData `$filter` value for an array of {@link FilterMetadata} objects and a given {@link Property}.
+     * @param property - The {@link Property} to filter on.
+     * @param filters - An array of {@link FilterMetadata} objects.
+     * @returns The OData `$filter` value, or undefined if no filters were provided.
+     */
+    static createFilterForPropertyArray(property, filters) {
+        const filter = filters
+            .map(f => ODataService.createFilterForProperty(property, f))
+            .filter(f => !!f)
+            .join(` ${filters[0].operator} `);
+        if (filter === '')
+            return undefined;
+        return `(${filter})`;
     }
-    get PropertyWithOptions() {
-        return PropertyWithOptions;
+    /**
+     * Creates an OData `$filter` value from a {@link TableLazyLoadEvent} and an array of {@link Property Properties}.
+     * @param event The {@link TableLazyLoadEvent} containing the filter data.
+     * @param properties An optional array of {@link Property Properties} to filter on.
+     * @returns The OData $`$filter` value, or undefined if no filters were applied or no properties were provided.
+     */
+    static createFilterFromTableLoadEvent(event, properties) {
+        const eventFilters = event.filters;
+        if (eventFilters === undefined || properties === undefined)
+            return undefined;
+        const filter = properties
+            .map(property => ({ property, filters: eventFilters[property.name] }))
+            .filter(f => f.filters !== undefined)
+            .map(f => ODataService.createFilterForPropertyArray(f.property, f.filters))
+            .filter(f => !!f)
+            .join(' and ');
+        if (filter === '')
+            return undefined;
+        return `(${filter})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputComponent, isStandalone: true, selector: "rw-input", usesInheritance: true, ngImport: i0, template: "@if (property()) {\r\n    @if (property().options) {\r\n        <rw-input-dropdown [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-input-object [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-input-collection [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-collection>\r\n            }\r\n            @default {\r\n                <rw-input-simple [property]=\"property()\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-simple>\r\n            }\r\n        }\r\n    }\r\n\r\n    <rw-validation-errors [property]=\"property()\"></rw-validation-errors>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputDropdownComponent), selector: "rw-input-dropdown", inputs: ["caseSensitive", "getLabel", "getTooltip"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => RestWorldInputObjectComponent), selector: "rw-input-object" }, { kind: "component", type: i0.forwardRef(() => RestWorldInputSimpleComponent), selector: "rw-input-simple" }, { kind: "component", type: i0.forwardRef(() => RestWorldInputCollectionComponent), selector: "rw-input-collection" }, { kind: "component", type: i0.forwardRef(() => RestWorldValidationErrorsComponent), selector: "rw-validation-errors", inputs: ["form", "property"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-input', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputDropdownComponent), forwardRef(() => RestWorldInputObjectComponent), forwardRef(() => RestWorldInputSimpleComponent), RestWorldInputCollectionComponent, RestWorldValidationErrorsComponent, FormsModule], template: "@if (property()) {\r\n    @if (property().options) {\r\n        <rw-input-dropdown [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-input-object [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-input-collection [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-collection>\r\n            }\r\n            @default {\r\n                <rw-input-simple [property]=\"property()\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-simple>\r\n            }\r\n        }\r\n    }\r\n\r\n    <rw-validation-errors [property]=\"property()\"></rw-validation-errors>\r\n}\r\n" }]
-        }] });
-/**
- * A dropdown that is automatically created from the given property.
- * The dropdown supports searching through a RESTWorld list endpoint on the backend if the `link` of the options is set.
- * Otherwise the dropdown will use the `inline` of the options.
- * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
- * instead of using this component directly.
- * @example
- * <rw-input-dropdown [property]="property" [apiName]="apiName"></rw-input-dropdown>
- */
-class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponent {
-    _controlContainer;
     /**
-     * A flag that indicates if the search should be case sensitive.
-     * The default is false.
+     * Creates a map of property names to filter metadata from an OData $filter string.
+     * @param filter The OData filter string to parse.
+     * @returns A record of property names to filter metadata.
      */
-    caseSensitive = input(false, ...(ngDevMode ? [{ debugName: "caseSensitive" }] : []));
+    static createFilterMetadataFromODataFilter(filter, properties) {
+        const filters = ODataFilterParser.parseFilter(filter, properties);
+        return filters;
+    }
     /**
-     * A function that returns the label for the given item.
-     * The default returns the prompt and optionally the value in brackets.
-     * The value in brackets will only be displayed if the `cols` field of the property is undefined or greater than 1.
-     * Overwrite this function to change the label.
-     * @param item The item to get the label for.
+     * Creates a OData `$orderby` value from a {@link TableLazyLoadEvent}.
+     * @param event The {@link TableLazyLoadEvent} to create the `$orderby` value from.
+     * @returns The `$orderby` value created from the {@link TableLazyLoadEvent}.
      */
-    getLabel = input(...(ngDevMode ? [undefined, { debugName: "getLabel" }] : []));
+    static createOrderByFromTableLoadEvent(event) {
+        if (event.multiSortMeta && event.multiSortMeta.length > 0) {
+            return event.multiSortMeta
+                .map(m => `${m.field} ${m.order > 0 ? 'asc' : 'desc'}`)
+                .join(', ');
+        }
+        if (event.sortField) {
+            const order = !event.sortOrder || event.sortOrder > 0 ? 'asc' : 'desc';
+            return `${event.sortField} ${order}`;
+        }
+        return undefined;
+    }
     /**
-     * A function that returns the tooltip for the given item.
-     * The default returns all properties of the item except the ones that start with an underscore or the ones that are in the list of default properties to exclude.
-     * The default properties to exclude are: createdAt, createdBy, lastChangedAt, lastChangedBy, timestamp, promptField, valueField.
-     * Overwrite this function to change the tooltip.
-     * @param item The item to get the label for.
+     * Creates an {@link ODataParameters} object from a given {@link ActivatedRoute}.
+     * @param route The {@link ActivatedRoute} to create the {@link ODataParameters} from.
+     * @param prefix An optional prefix to use for the query parameter keys.
+     * @returns The {@link ODataParameters} object created from the {@link ActivatedRoute}.
      */
-    getTooltip = input(...(ngDevMode ? [undefined, { debugName: "getTooltip" }] : []));
-    inputOptionsMultipleRef = contentChild("inputOptionsMultiple", ...(ngDevMode ? [{ debugName: "inputOptionsMultipleRef" }] : []));
-    inputOptionsSingleRef = contentChild("inputOptionsSingle", ...(ngDevMode ? [{ debugName: "inputOptionsSingleRef" }] : []));
-    multiSelect = viewChild(MultiSelect, ...(ngDevMode ? [{ debugName: "multiSelect" }] : []));
+    static createParametersFromRoute(route, prefix) {
+        const snapshot = route.snapshot;
+        let oDataParameters = {};
+        const filter = snapshot.queryParamMap.get(`${prefix}$filter`);
+        const orderBy = snapshot.queryParamMap.get(`${prefix}$orderby`);
+        const top = snapshot.queryParamMap.get(`${prefix}$top`);
+        const skip = snapshot.queryParamMap.get(`${prefix}$skip`);
+        if (filter)
+            oDataParameters.$filter = filter;
+        if (orderBy)
+            oDataParameters.$orderby = orderBy;
+        if (top) {
+            const topNumber = Number.parseInt(top);
+            if (Number.isInteger(topNumber))
+                oDataParameters.$top = topNumber;
+        }
+        if (skip) {
+            const skipNumber = Number.parseInt(skip);
+            if (Number.isInteger(skipNumber))
+                oDataParameters.$skip = skipNumber;
+        }
+        return oDataParameters;
+    }
     /**
-     * An event that is emitted when the selected value changes.
+     * Creates {@link ODataParameters} from a {@link TableLazyLoadEvent} and an optional {@link Template}.
+     * @param event The {@link TableLazyLoadEvent} to create OData parameters from.
+     * @param template An optional {@link Template} to use for creating the OData parameters.
+     * @returns An {@link ODataParameters} object containing the `$filter`, `$orderby`, `$top`, and `$skip` parameters.
      */
-    onChange = output();
-    onOptionsFiltered = debounce(this.onOptionsFilteredInternal, 500);
-    optionsManager;
-    _formControl = computed(() => {
-        const formGroup = this._controlContainer.control;
-        return formGroup.controls[this.property().name];
-    }, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
-    _valueChangesSignal = toSignal(merge(
-    // Get the initial value when 'control' changes
-    toObservable(this._formControl).pipe(map((ctl) => ctl.value)), 
-    // Get the new value when 'control.value' changes
-    toObservable(this._formControl).pipe(mergeMap((ctl) => ctl.valueChanges))));
-    constructor(_controlContainer, optionsService) {
-        super();
-        this._controlContainer = _controlContainer;
-        //const valueChangesSignal = toSignal(this._formControl.valueChanges);
-        this.optionsManager = optionsService.getManager(this.apiName, this.property, this._valueChangesSignal, this.getLabel, this.getTooltip);
+    static createParametersFromTableLoadEvent(event, template) {
+        const oDataParameters = {
+            $filter: ODataService.createFilterFromTableLoadEvent(event, template?.properties),
+            $orderby: ODataService.createOrderByFromTableLoadEvent(event),
+            $top: ODataService.createTopFromTableLoadEvent(event),
+            $skip: ODataService.createSkipFromTableLoadEvent(event)
+        };
+        return oDataParameters;
     }
-    async ngOnInit() {
-        await this.optionsManager.initialize();
+    /**
+     * Creates a OData `$skip` value from a {@link TableLazyLoadEvent}.
+     * @param event The {@link TableLazyLoadEvent} to create the `$skip` value from.
+     * @returns The `$skip` value created from the {@link TableLazyLoadEvent}.
+     */
+    static createSkipFromTableLoadEvent(event) {
+        return event.first;
     }
-    onOptionsChanged(event) {
-        this.onChange.emit(event);
+    /**
+     * Creates a OData `$top` value from a {@link TableLazyLoadEvent}.
+     * @param event The {@link TableLazyLoadEvent} to create the `$top` value from.
+     * @returns The `$top` value created from the {@link TableLazyLoadEvent}.
+     */
+    static createTopFromTableLoadEvent(event) {
+        return event.rows === null ? undefined : event.rows;
     }
-    async onOptionsFilteredInternal(event) {
-        const options = this.optionsManager.options();
-        const currentItems = this.optionsManager.items();
-        if (!(event.filter) || event.filter === '')
-            return;
-        if (event.originalEvent.type === "input") {
-            const inputEvent = event.originalEvent;
-            if (inputEvent.inputType === "insertFromPaste") {
-                // If the user pasted in multiple ids as comma separated list, we want to get them all and set them as the selected value.
-                var values = event.filter
-                    .split(",")
-                    .filter(v => v !== '')
-                    .map(v => v.trim())
-                    .map(v => {
-                    const n = Number.parseFloat(v);
-                    return Number.isNaN(n) ? this.makeUpperIfCaseInsensitive(v.toUpperCase(), false) : n;
+    static createComparisonValue(property, value, isEnum) {
+        if (value === null || value === undefined)
+            return 'null';
+        const type = ODataService.getPropertyType(property, value);
+        switch (type) {
+            case PropertyType.Date:
+                return `cast(${value.toISOString()}, Edm.DateOnly)`;
+            case PropertyType.DatetimeLocal:
+                return `cast(${value.toISOString()}, Edm.DateTime)`;
+            case PropertyType.DatetimeOffset:
+                return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
+            case PropertyType.Time:
+                return `cast(${value.toISOString()}, Edm.TimeOnly)`;
+            case PropertyType.Duration:
+                return `cast(${value.toISOString()}, Edm.TimeSpan)`;
+            case PropertyType.Bool:
+            case PropertyType.Number:
+            case PropertyType.Currency:
+            case PropertyType.Month:
+                return '' + value;
+            case PropertyType.Percent:
+                return '' + (value / 100);
+            default:
+                return `'${isEnum && typeof value === "string" ? value.charAt(0).toUpperCase() + value.slice(1) : value}'`;
+        }
+    }
+    static createFilterForEnum(property, filter) {
+        if (filter.matchMode == TranslationKeys.NO_FILTER)
+            return undefined;
+        const options = property.options;
+        if (options === undefined)
+            throw Error(`Property ${property.name} has no options`);
+        const maxItems = options.maxItems ?? Number.MAX_SAFE_INTEGER;
+        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
+        // Normal enum
+        if (maxItems === 1) {
+            const comparisonValue = ODataService.createComparisonValue(property, filter.value, true);
+            return `${property.name} ${oDataOperator} ${comparisonValue}`;
+        }
+        // Flags enum
+        if (filter.value === null || filter.value === undefined)
+            return undefined;
+        const values = Array.isArray(filter.value) ? filter.value : [filter.value];
+        const comparisonValues = values.map(v => ODataService.createComparisonValue(property, v, true));
+        const filters = comparisonValues.map(v => `${property.name} has ${v}`);
+        const concatenatedFilters = filters.join(' and ');
+        return `(${concatenatedFilters})`;
+    }
+    static createODataOperator(matchMode) {
+        switch (matchMode) {
+            case FilterMatchMode.STARTS_WITH:
+                return 'startswith';
+            case FilterMatchMode.CONTAINS:
+                return 'contains';
+            case FilterMatchMode.NOT_CONTAINS:
+                return 'not contains';
+            case FilterMatchMode.ENDS_WITH:
+                return 'endswith';
+            case FilterMatchMode.EQUALS:
+                return 'eq';
+            case FilterMatchMode.NOT_EQUALS:
+                return 'ne';
+            case FilterMatchMode.IN:
+                return 'in';
+            case FilterMatchMode.LESS_THAN:
+                return 'lt';
+            case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
+                return 'le';
+            case FilterMatchMode.GREATER_THAN:
+                return 'gt';
+            case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
+                return 'ge';
+            case FilterMatchMode.IS:
+                return 'eq';
+            case FilterMatchMode.IS_NOT:
+                return 'ne';
+            case FilterMatchMode.BEFORE:
+                return 'lt';
+            case FilterMatchMode.AFTER:
+                return 'gt';
+            case FilterMatchMode.DATE_AFTER:
+                return 'ge';
+            case FilterMatchMode.DATE_BEFORE:
+                return 'lt';
+            case FilterMatchMode.DATE_IS:
+                return 'eq';
+            case FilterMatchMode.DATE_IS_NOT:
+                return 'ne';
+            default:
+                throw Error(`Unknown matchMode ${matchMode}`);
+        }
+    }
+    static getPropertyType(property, value) {
+        if (property.options) {
+            if (typeof value === "string" ||
+                Array.isArray(value) && value.every(v => typeof v === "string") ||
+                property.options.inline?.some(o => property.options.valueField !== undefined && typeof o[property.options.valueField] === "string"))
+                return PropertyType.Text;
+            return PropertyType.Number;
+        }
+        return property.type;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Displays one button for every `MenuItem` given in the items array.
+ * If a `MenuItem` has nested items, a button with a dropdown menu will be displayed.
+ * @example
+ * <rw-menu-button [items]="items"></rw-menu-button>
+ */
+class RestWorldMenuButtonComponent {
+    _router;
+    /**
+     * An array of menu items to be displayed.
+     */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    constructor(_router) {
+        this._router = _router;
+    }
+    onClick(event, item) {
+        const openInNewWindow = event.ctrlKey || event.button === 1 || event.metaKey;
+        if (item.url) {
+            window.open(item.url, openInNewWindow ? '_blank' : '_self');
+        }
+        else if (item.routerLink) {
+            if (openInNewWindow) {
+                const tree = this._router.createUrlTree(item.routerLink, {
+                    queryParams: item.queryParams,
+                    fragment: item.fragment,
+                    queryParamsHandling: item.queryParamsHandling,
+                    preserveFragment: item.preserveFragment,
                 });
-                if (!values || values.length === 0)
-                    return;
-                const allAreNumbers = values.every(v => typeof v === "number" && !isNaN(v));
-                const filter = allAreNumbers
-                    ? `${options.valueField} in (${values.join(',')})`
-                    : `contains(${this.makeUpperIfCaseInsensitive(options.promptField, true)}, '${values.join("', '")}')`;
-                if ((options?.link?.href))
-                    await this.optionsManager.updateItemsFromFilter(filter);
-                if (currentItems) {
-                    const selectedValues = currentItems
-                        .map(i => this.optionsManager.getValue(i))
-                        .filter(v => values.includes(v));
-                    this._formControl().setValue(selectedValues);
-                    this.multiSelect()?.resetFilter();
-                }
+                const url = this._router.serializeUrl(tree);
+                window.open(url, '_blank');
             }
             else {
-                // This is the normal case where the user types in a filter.
-                let filter = `contains(${this.makeUpperIfCaseInsensitive(options.promptField, true)}, '${this.makeUpperIfCaseInsensitive(event.filter, false)}')`;
-                if (options.valueField?.toLowerCase() === 'id' && !Number.isNaN(Number.parseInt(event.filter)))
-                    filter = `(${options.valueField} eq ${event.filter})  or (${filter})`;
-                if ((options?.link?.href))
-                    await this.optionsManager.updateItemsFromFilter(filter);
+                this._router.navigate(item.routerLink, {
+                    queryParams: item.queryParams,
+                    fragment: item.fragment,
+                    queryParamsHandling: item.queryParamsHandling,
+                    preserveFragment: item.preserveFragment,
+                    skipLocationChange: item.skipLocationChange,
+                    replaceUrl: item.replaceUrl,
+                });
             }
         }
+        else if (item.command) {
+            item.command({ item: item });
+        }
     }
-    makeUpperIfCaseInsensitive(filter, isOData) {
-        if (this.caseSensitive() || typeof filter !== "string")
-            return filter;
-        if (isOData)
-            return `toupper(${filter})`;
-        return filter.toUpperCase();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputDropdownComponent, deps: [{ token: i2$3.ControlContainer }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputDropdownComponent, isStandalone: true, selector: "rw-input-dropdown", inputs: { caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, getTooltip: { classPropertyName: "getTooltip", publicName: "getTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, queries: [{ propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true, isSignal: true }, { propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: MultiSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-select\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n    @else {\n        <p-select\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n</ng-template>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-multiSelect\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n    @else {\n        <p-multiSelect\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n</ng-template>\n\n@if(!optionsManager.options().maxItems || optionsManager.options().maxItems == 1) {\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef() ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n@else {\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef() ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"], dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertySelectAttributes, selector: "p-select[formControlProperty], p-select[propertyAttributes], p-multiSelect[formControlProperty], p-multiSelect[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldMenuButtonComponent, deps: [{ token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldMenuButtonComponent, isStandalone: true, selector: "rw-menu-button", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item; let i = $index) {\n    @if (!item.items) {\n        <p-button\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-button>\n    } \n    @else {\n        <p-splitButton\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [model]=\"item.items\"\n            appendTo=\"body\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-splitButton>\n    }\n}\n", styles: [":host{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i4$1.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldMenuButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-input-dropdown', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [Select, ReactiveFormsModule, MultiSelect, Tooltip, Chip, NgTemplateOutlet, HalFormsModule, FormsModule], template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-select\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n    @else {\n        <p-select\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n</ng-template>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-multiSelect\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n    @else {\n        <p-multiSelect\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n</ng-template>\n\n@if(!optionsManager.options().maxItems || optionsManager.options().maxItems == 1) {\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef() ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n@else {\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef() ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.ControlContainer }, { type: OptionsService }] });
+            args: [{ selector: 'rw-menu-button', standalone: true, imports: [ButtonModule, TooltipModule, SplitButtonModule], template: "@for (item of items(); track item; let i = $index) {\n    @if (!item.items) {\n        <p-button\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-button>\n    } \n    @else {\n        <p-splitButton\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [model]=\"item.items\"\n            appendTo=\"body\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-splitButton>\n    }\n}\n", styles: [":host{display:flex;justify-content:flex-end}\n"] }]
+        }], ctorParameters: () => [{ type: i3$3.Router }] });
+
 /**
- * A complex object with multiple properties that is automatically created from the given property.
- * The object can also be nested.
- * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
- * instead of using this component directly.
- * @example
- * <rw-input-object [property]="property" [apiName]="apiName"></rw-input-object>
+ * This component is used to display a filter element for a table column.
+ * It is used internally by the <rw-table> component, but can also be used in the #filter template of a column in the header of a <p-table>.
  */
-class RestWorldInputObjectComponent extends RestWorldInputLazyLoadBaseComponent {
-    _controlContainer;
-    inputObjectRef = contentChild("inputObject", ...(ngDevMode ? [{ debugName: "inputObjectRef" }] : []));
-    constructor(_controlContainer) {
-        super();
-        this._controlContainer = _controlContainer;
+class RestWorldTableColumnFilterElementComponent {
+    _formService;
+    /**
+     * The filter constraint to update when the value changes.
+     * This is coming from the $context of the #filter template
+     */
+    filterConstraint = input.required(...(ngDevMode ? [{ debugName: "filterConstraint" }] : []));
+    /**
+     * The HAL-Forms property to filter by.
+     * This is normally the column.
+     */
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
+    /**
+     * The name of the API to use when generating dropdowns.
+     */
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
+    /**
+     * The initial value of the filter.
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    form = computed(() => this._formService.createFormGroupFromTemplate(this.template()), ...(ngDevMode ? [{ debugName: "form" }] : []));
+    template = computed(() => new Template({
+        properties: [this.property()],
+    }), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    _formValueChangesSubscription;
+    constructor(_formService) {
+        this._formService = _formService;
+        effect(() => {
+            this._formValueChangesSubscription?.unsubscribe();
+            const form = this.form();
+            const property = this.property();
+            const value = untracked(() => this.value());
+            const formControl = form.controls[property.name];
+            this._formValueChangesSubscription = formControl.valueChanges.subscribe(this.setFilterValue.bind(this));
+            formControl.setValue(value);
+        });
     }
-    innerFormGroup = computed(() => {
-        const formGroup = this._controlContainer.control;
-        return formGroup.controls[this.property().name];
-    }, ...(ngDevMode ? [{ debugName: "innerFormGroup" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputObjectComponent, deps: [{ token: i2$3.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.1", type: RestWorldInputObjectComponent, isStandalone: true, selector: "rw-input-object", queries: [{ propertyName: "inputObjectRef", first: true, predicate: ["inputObject"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultInputObject let-property=\"property\" let-innerFormGroup=\"innerFormGroup\", let-apiName=\"apiName\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup()\" [template]=\"property()._templates.default\" [apiName]=\"apiName()\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef() || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>\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}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputTemplateComponent), selector: "rw-input-template", inputs: ["apiName", "template"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$3.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2$3.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    setFilterValue(value) {
+        this.filterConstraint().value = value;
+    }
+    ngOnDestroy() {
+        this._formValueChangesSubscription?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, deps: [{ token: i1$1.FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldTableColumnFilterElementComponent, isStandalone: true, selector: "rw-table-column-filter-element", inputs: { filterConstraint: { classPropertyName: "filterConstraint", publicName: "filterConstraint", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputObjectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-input-object', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputTemplateComponent), ReactiveFormsModule, NgTemplateOutlet], template: "<ng-template #defaultInputObject let-property=\"property\" let-innerFormGroup=\"innerFormGroup\", let-apiName=\"apiName\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup()\" [template]=\"property()._templates.default\" [apiName]=\"apiName()\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef() || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>\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}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.ControlContainer }] });
-/**
- * A simple input element, like a string, a number or a Date that is automatically created from the given property.
- * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
- * instead of using this component directly.
- * @example
- * <rw-input-simple [property]="property" [apiName]="apiName"></rw-input-simple>
- */
-class RestWorldInputSimpleComponent extends RestWorldInputBaseComponent {
-    static _dateFormat = new Date(3333, 10, 22) // months start at 0 in JS
-        .toLocaleDateString()
-        .replace("22", "dd")
-        .replace("11", "mm")
-        .replace("3333", "yy")
-        .replace("33", "y");
-    static _timeFormat = new Date(1, 1, 1, 22, 33, 44)
-        .toLocaleTimeString()
-        .replace("22", "hh")
-        .replace("33", "mm")
-        .replace("44", "ss");
-    _inputChild = viewChild("inputElement", ...(ngDevMode ? [{ debugName: "_inputChild" }] : []));
-    _controlChild = viewChild(NG_VALUE_ACCESSOR, ...(ngDevMode ? [{ debugName: "_controlChild" }] : []));
-    constructor() {
-        super();
-    }
-    writeValue(obj) {
-        const controlChild = this._controlChild();
-        const inputChild = this._inputChild();
-        if (controlChild !== undefined)
-            controlChild.writeValue(obj);
-        else if (inputChild !== undefined)
-            inputChild.nativeElement.value = obj;
-    }
-    registerOnChange(fn) {
-        const controlChild = this._controlChild();
-        const inputChild = this._inputChild();
-        if (controlChild !== undefined)
-            controlChild.registerOnChange(fn);
-        else if (inputChild !== undefined)
-            inputChild.nativeElement.oninput = (event) => fn(event.target.value);
-    }
-    registerOnTouched(fn) {
-        const controlChild = this._controlChild();
-        const inputChild = this._inputChild();
-        if (controlChild !== undefined)
-            controlChild.registerOnTouched(fn);
-        else if (inputChild !== undefined)
-            inputChild.nativeElement.onblur = (event) => fn();
-    }
-    setDisabledState(isDisabled) {
-        const controlChild = this._controlChild();
-        const inputChild = this._inputChild();
-        if (controlChild !== undefined && controlChild.setDisabledState !== undefined)
-            controlChild.setDisabledState(isDisabled);
-        else if (inputChild !== undefined) {
-            if (isDisabled)
-                inputChild.nativeElement.setAttribute("disabled", "disabled");
-            else
-                inputChild.nativeElement.removeAttribute("disabled");
-        }
-    }
-    get PropertyType() {
-        return PropertyType;
-    }
-    get PropertyWithImage() {
-        return PropertyWithImage;
-    }
-    get dateFormat() {
-        return RestWorldInputSimpleComponent._dateFormat;
-    }
-    // public readonly formControl = computed(() => {
-    //     const formGroup = this._controlContainer.control as FormGroup<any>;
-    //     return formGroup.controls[this.property().name] as FormControl<SimpleValue | SimpleValue[]>;
-    // });
-    get timeFormat() {
-        return RestWorldInputSimpleComponent._timeFormat;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputSimpleComponent, isStandalone: true, selector: "rw-input-simple", providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RestWorldInputSimpleComponent),
-                multi: true
-            }], viewQueries: [{ propertyName: "_inputChild", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_controlChild", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: TriStateCheckbox, selector: "p-tri-state-checkbox, p-tri-state-checkBox, p-tri-state-check-box, rw-tri-state-checkbox, rw-tri-state-checkBox, rw-tri-state-check-box", inputs: ["value", "name", "disabled", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "model", "variant"], outputs: ["disabledChange", "modelChange", "onChange", "onFocus", "onBlur"] }, { kind: "component", type: RestWorldImageComponent, selector: "rw-image", inputs: ["property", "backgroundColor", "displayCropDialog"], outputs: ["backgroundColorChange", "displayCropDialogChange"] }, { kind: "component", type: RestWorldFileComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: DefaultPropertyValueAccessor, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]" }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyInputNumberAttributes, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-input-simple', standalone: true, providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RestWorldInputSimpleComponent),
-                            multi: true
-                        }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [DatePicker, InputNumber, TriStateCheckbox, RestWorldImageComponent, RestWorldFileComponent, InputText, HalFormsModule, FormsModule], template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'rw-table-column-filter-element', imports: [RestWorldInputComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$1.FormService }] });
+
 /**
- * A collection of `<rw-form>` elements automatically created from a template.
- * Does not have any buttons on its own.
- * If you want buttons, use {@link RestWorldForm} `<rw-form>`.
+ * Displays a table based on a search-, an edit-template and a list of items.
+ * The search-template is required and used to display the table columns and to filter and sort the items.
+ * The edit-template is optional and used to edit the items. For the edit capability, the table must be part of a reactive form.
+ * The items are displayed as table rows.
+ * The table supports lazy loading, row selection, row menus, and context menus.
+ *
  * @example
- * <rw-form-collection [template]="template" [apiName]="apiName"></rw-form-collection>
+ * <rw-table
+ *   [apiName]="apiName"
+ *   [searchTemplate]="searchTemplate"
+ *   [editTemplate]="editTemplate"
+ *   [rows]="rows"
+ *   [rowsPerPageOptions]="[10, 25, 50]"
+ *   [headerMenu]="headerMenu"
+ *   [rowMenu]="rowMenu"
+ *   [rowStyleClass]="rowStyleClass"
+ *   [cellStyleClass]="cellStyleClass"
+ *   [totalRecords]="totalRecords"
+ *   [multiSortMeta]="multiSortMeta"
+ *   [styleClass]="styleClass"
+ *   [tableStyle]="tableStyle"
+ *   [scrollable]="scrollable"
+ *   [scrollHeight]="scrollHeight"
+ *   [selectionMode]="selectionMode"
+ *   [rowHover]="rowHover"
+ *   [selection]="selection"
+ *   [contextMenuItems]="contextMenuItems"
+ *   [isLoading]="isLoading"
+ *   [(selectedRows)]="selectedRows"
+ *   [(oDataParameters)]="oDataParameters"
+ * </rw-table>
+ *
  */
-class RestWorldInputTemplateComponent {
+class RestWorldTableComponent {
+    _controlContainer;
+    _formService;
+    onSort($event) {
+        if (this.lazy())
+            return;
+        console.log("Sort event:", $event);
+        // sort the form array for the indexes to line up with the sorted rows
+        const formArray = this.formArray();
+        const editTemplate = this.editTemplate();
+        if (!formArray || !editTemplate)
+            return;
+        formArray.controls.sort((a, b) => {
+            for (const sortMeta of $event.multisortmeta) {
+                const field = sortMeta.field;
+                const valueA = a.get(field)?.value;
+                const valueB = b.get(field)?.value;
+                const order = sortMeta.order ?? 1;
+                if (valueA === valueB)
+                    continue;
+                if (valueA === undefined || valueA === null)
+                    return -1 * order;
+                if (valueB === undefined || valueB === null)
+                    return 1 * order;
+                if (valueA < valueB)
+                    return -1 * order;
+                if (valueA > valueB)
+                    return 1 * order;
+            }
+            return 0;
+        });
+    }
+    PropertyType = PropertyType;
     /**
-     * The name of the API to use for the property.
-     * @required
-     * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
+     * The name of the api.
+     * For the editing capability, you must also set the editTemplate and the formArray.
      */
     apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
-     * The template to display.
-     * @required
-     * @remarks This is the template that defines the properties to display.
+     * A function that returns the style class for a cell.
+     * @param row The row for which to return the style class.
+     * @param column The column for which to return the style class.
+     * @param rowIndex The index of the row on the currently displayed page.
+     * @param columnIndex The index of the column.
+     * @returns The style class for the cell.
      */
-    template = input.required(...(ngDevMode ? [{ debugName: "template" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputTemplateComponent, isStandalone: true, selector: "rw-input-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputTemplateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-input-template', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [RestWorldFormElementComponent], template: "@for (property of template().properties; track property) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n" }]
-        }] });
-
-/**
- * A form with Save, Reload and Delete buttons.
- * If you do not want buttons, use RestWorldFormTemplateComponent <rw-form-template>.
- * You can also provide your own buttons by passing in a template.
- * @example
- * <rw-form
- *  [template]="template"
- *  apiName="apiName"
- *  rel="rel"
- *  [allowSubmit]="true"
- *  [allowDelete]="true"
- *  [allowReload]="true"
- *  [showSubmit]="true"
- *  [showDelete]="true"
- *  [showReload]="true">
- *  <ng-template #content let-form="form" let-template="template" let-apiName="apiName">
- *    <!-- Custom form content here -->
- *    <!-- This is optional and will replace the default which renders labels and inputs if present -->
- *  </ng-template>
- *  <ng-template #buttons let-form="form" let-template="template" let-apiName="apiName">
- *    <!-- Custom buttons here -->
- *    <!-- This is optional and will replace the default which renders the Save, Reload and Delete buttons if present -->
- *  </ng-template>
- * </rw-form>
- */
-class RestWorldFormComponent {
-    _clients;
-    _confirmationService;
-    _messageService;
-    _formService;
-    _elementRef;
-    _problemService;
+    cellStyleClass = input(() => "", ...(ngDevMode ? [{ debugName: "cellStyleClass" }] : []));
+    cellStyleClasses = computed(() => this.rows().map((r, ri) => Object.fromEntries(this.columns().map((c, ci) => [c.name, this.cellStyleClass()(r, c, ri, ci)]))), ...(ngDevMode ? [{ debugName: "cellStyleClasses" }] : []));
+    columns = computed(() => this.searchTemplate()?.properties.filter(p => p.type !== PropertyType.Hidden) ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    contextMenu = viewChild("contextMenu", ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
+    primeNgTable = viewChild.required("table");
+    contextMenuItems = signal([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : []));
+    dateFormat = new Date(3333, 10, 22) // months start at 0 in JS
+        .toLocaleDateString()
+        .replace("22", "dd")
+        .replace("11", "MM")
+        .replace("3333", "yy")
+        .replace("33", "y");
+    editProperties = computed(() => this.editTemplate()?.propertiesRecord ?? {}, ...(ngDevMode ? [{ debugName: "editProperties" }] : []));
     /**
-     * Emitted after the resource has been deleted.
+     * The template that is used to edit the items.
+     * Bind this to the template that is used to edit the items.
+     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
+     * For the editing capability, you must also set the apiName and the formArray.
      */
-    afterDelete = output();
+    editTemplate = input(...(ngDevMode ? [undefined, { debugName: "editTemplate" }] : []));
+    filters = computed(() => {
+        const filter = this.oDataParameters().$filter;
+        const properties = this.searchTemplate()?.propertiesRecord;
+        if (filter === null || filter === undefined || typeof filter !== "string" || properties === undefined)
+            return {};
+        return ODataService.createFilterMetadataFromODataFilter(filter, properties);
+    }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
     /**
-     * Emitted after the form has been submitted.
+     * The form array that contains the form groups for the items.
+     * Bind this to the form array that contains the form groups for the items.
+     * Each entry in the array represents one row in the currently displayed page of the table.
+     * For the editing capability, you must also set the apiName and the editTemplate.
      */
-    afterSubmit = output();
-    /**
-     * Determines whether to enable the delete button.
-    */
-    allowDelete = input(true, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
-    /**
-     * Determines whether to enable the reload button.
-    */
-    allowReload = input(true, ...(ngDevMode ? [{ debugName: "allowReload" }] : []));
-    /**
-     * Determines whether to enable the submit button.
-    */
-    allowSubmit = input(true, ...(ngDevMode ? [{ debugName: "allowSubmit" }] : []));
+    formArray = computed(() => this._controlContainer?.control, ...(ngDevMode ? [{ debugName: "formArray" }] : []));
     /**
-     * The name of the API to use.
+     * An optional menu that is displayed at the top right of the table.
+     * @see RestWorldMenuButtonComponent
      */
-    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
+    headerMenu = input([], ...(ngDevMode ? [{ debugName: "headerMenu" }] : []));
+    isEditable = computed(() => this.editTemplate() !== undefined && this.formArray() !== undefined && this.apiName() !== undefined, ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
     /**
-     * Determines whether the resource can be deleted.
+     * Indicates whether the table is currently loading.
+     * Set this to true while loading new items from the backend when reacting to the `onFilterOrSortChanged` event.
      */
-    canDelete = computed(() => this.allowDelete() &&
-        this.template() !== undefined &&
-        this.template().target !== undefined &&
-        this.template().method == "PUT" &&
-        this.formGroup() !== undefined &&
-        this.formGroup()?.value.id !== undefined &&
-        this.formGroup()?.value.timestamp !== undefined &&
-        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /**
-     * Determines whether the form can be reloaded.
+     * Indicates whether the table is lazy loaded.
+     * If set to true, sorting and filtering needs to be handled by the `load` event.
+     * If set to false, sorting and filtering is handled by the table component itself.
+     * The default is `true`.
+     * @see load
      */
-    canReload = computed(() => this.allowReload() &&
-        this.template() !== undefined &&
-        this.template().target !== undefined &&
-        this.template().title !== undefined &&
-        this.template().properties.some(p => p.name === "id" && p.value !== undefined && p.value !== null && p.value !== 0) &&
-        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canReload" }] : []));
+    lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
     /**
-     * Determines whether the form can be submitted.
+     * Indicates whether the table has a paginator.
+     * If set to true, the table will display a paginator at the bottom.
+     * If set to false, the table will not display a paginator and all rows will be displayed at once.
+     * The default is `true`.
+     * In order to customize the number of rows per page, you can set the `rowsPerPageOptions` property.
+     * @see rowsPerPageOptions
      */
-    canSubmit = computed(() => this.allowSubmit() &&
-        this.template() !== undefined &&
-        this.template().target !== undefined &&
-        !this.isLoading() &&
-        this.formGroup() !== undefined, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
+    paginator = input(true, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
+    multiSortMeta = computed(() => {
+        const orderBy = this.oDataParameters().$orderby;
+        if (orderBy === null || orderBy === undefined || typeof orderBy !== "string")
+            return undefined;
+        return orderBy
+            .split(",")
+            .map(o => o.trim())
+            .filter(o => o !== "")
+            .map(o => {
+            const [field, order] = o.split(" ");
+            const orderAsNumber = order?.toLowerCase() === "desc" ? -1 : 1;
+            return { field: field, order: orderAsNumber };
+        });
+    }, ...(ngDevMode ? [{ debugName: "multiSortMeta" }] : []));
+    oDataParameters = model({}, ...(ngDevMode ? [{ debugName: "oDataParameters" }] : []));
+    reflectParametersInUrl = input(true, ...(ngDevMode ? [{ debugName: "reflectParametersInUrl" }] : []));
     /**
-     * The form group that represents the form.
+     * Indicates whether the table rows are highlighted when the mouse hovers over them.
      */
-    formGroup = computed(() => this._formService.createFormGroupFromTemplate(this.template()), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    rowHover = input(false, ...(ngDevMode ? [{ debugName: "rowHover" }] : []));
     /**
-     * The rel of the form.
+     * A function that returns the menu for a row.
+     * Based on the openedByRightClick parameter, the function can return different menus.
+     * The menu when it has not been opened by a right click is displayed in an extra column to the right of the table if `showRowMenuAsColumn` is `true`.
+     * The menu when it has been opened by a right click is displayed as a context menu if `showRowMenuOnRightClick` is `true`.
+     * @param row The row for which to return the menu.
+     * @param openedByRightClick Indicates whether the menu was opened by a right click.
+     * @returns The menu for the row.
+     * @see showRowMenuAsColumn
+     * @see showRowMenuOnRightClick
+    */
+    rowMenu = input(() => [], ...(ngDevMode ? [{ debugName: "rowMenu" }] : []));
+    rowMenus = computed(() => {
+        return this.showRowMenuAsColumn() ? this.rows().map(r => this.rowMenu()(r, false)) : [];
+    }, ...(ngDevMode ? [{ debugName: "rowMenus" }] : []));
+    /**
+     * A function that returns the style class for a row.
+     * @param row The row for which to return the style class.
+     * @param rowIndex The index of the row on the currently displayed page.
+     * @returns The style class for the row.
      */
-    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
+    rowStyleClass = input(() => "", ...(ngDevMode ? [{ debugName: "rowStyleClass" }] : []));
+    rowStyleClasses = computed(() => this.rows().map((r, i) => this.rowStyleClass()(r, i)), ...(ngDevMode ? [{ debugName: "rowStyleClasses" }] : []));
     /**
-     * Determines whether to show the delete button.
-    */
-    showDelete = input(true, ...(ngDevMode ? [{ debugName: "showDelete" }] : []));
+     * The items that are displayed as table rows.
+     * Bind this to the items that are displayed as table rows.
+     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
+     */
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    rowsBeforeCurrentPage = computed(() => this.oDataParameters().$skip ?? 0, ...(ngDevMode ? [{ debugName: "rowsBeforeCurrentPage" }] : []));
     /**
-     * Determines whether to show the reload button.
-    */
-    showReload = input(true, ...(ngDevMode ? [{ debugName: "showReload" }] : []));
+     * The number of rows per page.
+     * The default is the first element of rowsPerPageOptions.
+     */
+    rowsPerPage = computed(() => this.oDataParameters().$top ?? this.rowsPerPageOptions()[0], ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : []));
     /**
-     * Determines whether to show the submit button.
-    */
-    showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : []));
+     * The possible values for the number of rows per page.
+     * The default is [10, 25, 50].
+     */
+    rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
     /**
-     * The template used to render the form.
+     * The height of the scrollable table.
+     * The default is "flex".
      */
-    template = model.required(...(ngDevMode ? [{ debugName: "template" }] : []));
+    scrollHeight = input("flex", ...(ngDevMode ? [{ debugName: "scrollHeight" }] : []));
     /**
-     * Emitted when the form value changes.
+     * Indicates whether the table is scrollable.
+     * The default is `true`.
      */
-    valueChanges = output();
+    scrollable = input(true, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
     /**
-     * A reference to a template that can be used to render custom buttons for the form.
-    */
-    buttonsRef = contentChild('buttons', ...(ngDevMode ? [{ debugName: "buttonsRef" }] : []));
+     * The template that is used to display the table columns and to filter and sort the items.
+     * Bind this to the template that is used to display the table columns and to filter and sort the items.
+     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
+     */
+    searchTemplate = input.required(...(ngDevMode ? [{ debugName: "searchTemplate" }] : []));
     /**
-     * A reference to a template that can be used to render content before the default buttons.
-    */
-    beforeButtonsRef = contentChild('beforeButtons', ...(ngDevMode ? [{ debugName: "beforeButtonsRef" }] : []));
+     * The currently selected rows.
+     */
+    selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
     /**
-     * A reference to a template that can be used to render content after the default buttons.
-    */
-    afterButtonsRef = contentChild('afterButtons', ...(ngDevMode ? [{ debugName: "afterButtonsRef" }] : []));
+     * The mode how rows can be selected.
+     * The default is `null` which means rows cannot be selected.
+     */
+    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    showMenuColumn = computed(() => this.headerMenu().length > 0 || (this.showRowMenuAsColumn() && this.rowMenus().some(m => m.length > 0)), ...(ngDevMode ? [{ debugName: "showMenuColumn" }] : []));
     /**
-     * A reference to a template that can be used to render custom content inside the <form> element instead of the default form.
-    */
-    contentRef = contentChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : []));
-    _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
-    _formValueChangesSubscription;
-    constructor(_clients, _confirmationService, _messageService, _formService, _elementRef, _problemService) {
-        this._clients = _clients;
-        this._confirmationService = _confirmationService;
-        this._messageService = _messageService;
+     * Indicates whether the row menu is displayed as a column to the right of the table.
+     */
+    showRowMenuAsColumn = input(true, ...(ngDevMode ? [{ debugName: "showRowMenuAsColumn" }] : []));
+    /**
+     * Indicates whether the row menu is displayed as a context menu when the user right clicks on a row.
+     */
+    showRowMenuOnRightClick = input(true, ...(ngDevMode ? [{ debugName: "showRowMenuOnRightClick" }] : []));
+    /**
+     * The style class for the table.
+     * The default is "".
+     */
+    styleClass = input("", ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    /**
+     * The inline style for the table.
+     */
+    tableStyle = input(...(ngDevMode ? [undefined, { debugName: "tableStyle" }] : []));
+    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    urlParameterPrefix = input("", ...(ngDevMode ? [{ debugName: "urlParameterPrefix" }] : []));
+    //   private _formArray?: FormArray<FormGroup<{ [K in keyof TListItem]: AbstractControl<unknown> }>>;
+    _filterMatchModeOptions;
+    timeFormat = new Date(1, 1, 1, 22, 33, 44)
+        .toLocaleTimeString()
+        .replace("22", "hh")
+        .replace("33", "mm")
+        .replace("44", "ss");
+    _initialQueryParamsSet = false;
+    _lastUsedFilters = {};
+    constructor(_controlContainer, _formService, router, activatedRoute, primeNGConfig, filterService) {
+        this._controlContainer = _controlContainer;
         this._formService = _formService;
-        this._elementRef = _elementRef;
-        this._problemService = _problemService;
-        // Update the form value changes subscription to always track the current form group.
+        this._filterMatchModeOptions = {
+            text: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.text].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
+            numeric: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.numeric].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
+            date: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.date].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
+            boolean: [TranslationKeys.NO_FILTER, TranslationKeys.EQUALS, TranslationKeys.NOT_EQUALS].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
+            enum: [TranslationKeys.NO_FILTER, TranslationKeys.EQUALS, TranslationKeys.NOT_EQUALS].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
+        };
+        filterService.register(TranslationKeys.NO_FILTER, () => true);
+        // Update the form array on changes
         effect(() => {
-            this._formValueChangesSubscription?.unsubscribe();
-            const formGroup = this.formGroup();
-            this._formValueChangesSubscription = formGroup?.valueChanges.subscribe(newValue => this.valueChanges.emit(newValue));
-            this.valueChanges.emit(formGroup?.value);
+            const formArray = this.formArray();
+            const editTemplate = this.editTemplate();
+            const rows = this.rows();
+            const lazy = this.lazy();
+            if (!this.isEditable() || !formArray || !editTemplate || !lazy)
+                return;
+            formArray.clear();
+            const newControls = rows
+                .map(r => {
+                const formGroup = this._formService.createFormGroupFromTemplate(editTemplate);
+                formGroup.patchValue(r);
+                return formGroup;
+            });
+            for (const control of newControls)
+                formArray.push(control);
+        });
+        // update the url when the oDataParameters change
+        effect(async () => {
+            if (!this.reflectParametersInUrl())
+                return;
+            const urlParameterPrefix = this.urlParameterPrefix();
+            const oDataParameters = this.oDataParameters();
+            // Set the initial query parameters on the first change
+            if (!this._initialQueryParamsSet) {
+                this._initialQueryParamsSet = true;
+                const oDataParametersFromUrl = ODataService.createParametersFromRoute(activatedRoute, urlParameterPrefix);
+                const mergedParameters = { ...oDataParameters, ...oDataParametersFromUrl };
+                this.oDataParameters.set(mergedParameters);
+                return;
+            }
+            // Update the query parameters in the url after the first change
+            const parameters = this.prefixObjectProperties(oDataParameters, urlParameterPrefix);
+            await router.navigate([], { queryParams: parameters, queryParamsHandling: 'merge' });
         });
     }
-    async delete() {
-        if (!this.canDelete())
+    getFormGroupAtIndex(indexOnCurrentPage) {
+        const formArray = this.formArray();
+        if (!formArray)
+            return undefined;
+        const finalIndex = this.getAbsoluteIndex(indexOnCurrentPage);
+        return formArray.at(finalIndex);
+    }
+    getAbsoluteIndex(indexOnCurrentPage) {
+        const lazy = this.lazy();
+        if (!lazy)
+            return indexOnCurrentPage;
+        const primeNgTable = this.primeNgTable();
+        if (!primeNgTable)
+            return indexOnCurrentPage;
+        return indexOnCurrentPage - (primeNgTable.first ?? 0);
+    }
+    load(event) {
+        this.fixUserFilterErrors(event.filters);
+        // this.multiSortMeta = event.multiSortMeta;
+        const currentParameters = this.oDataParameters();
+        const searchTemplate = this.searchTemplate();
+        if (!searchTemplate || searchTemplate.properties.length === 0)
             return;
-        const formGroup = this.formGroup();
-        if (formGroup === undefined)
-            throw new Error("formGroup cannot be undefined.");
-        const template = this.template();
-        if (template === undefined)
-            throw new Error("template cannot be undefined.");
-        // canDelete already checks that the timestamp is present, so the cast is safe.
-        const result = await this._client().deleteByTemplateAndForm(template, formGroup);
-        if (this._problemService.checkResponseAndDisplayErrors(result, formGroup)) {
-            this._messageService.add({ severity: 'success', summary: 'Deleted', detail: 'The resource has been deleted.' });
-            this.afterDelete.emit();
-        }
+        const parameters = ODataService.createParametersFromTableLoadEvent(event, searchTemplate);
+        ODataService.createFilterMetadataFromODataFilter(parameters.$filter, searchTemplate.propertiesRecord);
+        if (currentParameters.$filter !== parameters.$filter || currentParameters.$orderby !== parameters.$orderby || currentParameters.$top !== parameters.$top || currentParameters.$skip !== parameters.$skip)
+            this.oDataParameters.set(parameters);
     }
-    async reload() {
-        const canReload = this.canReload();
-        const template = this.template();
-        if (!canReload || template === undefined)
+    openContextMenu(event, row) {
+        const contextMenu = this.contextMenu();
+        if (!this.showRowMenuOnRightClick() || contextMenu === undefined)
             return;
-        this.isLoading.set(true);
-        try {
-            const response = await this._client().getForm(template.target);
-            if (this._problemService.checkResponseAndDisplayErrors(response, this.formGroup())) {
-                this.template.set(response.body.getTemplateByTitle(template.title));
-            }
-        }
-        catch (e) {
-            this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
-            console.log(e);
-        }
-        this.isLoading.set(false);
+        this.contextMenuItems.set(this.rowMenu()(row, true));
+        contextMenu.show(event);
+        event.stopPropagation();
     }
-    showDeleteConfirmatioModal() {
-        this._confirmationService.confirm({
-            message: 'Do you really want to delete this resource?',
-            header: 'Confirm delete',
-            icon: 'far fa-trash-alt',
-            accept: () => this.delete()
-        });
+    showInputField(column) {
+        if (!this.isEditable())
+            return false;
+        const editProperty = this.editProperties()[column.name];
+        return editProperty !== undefined && editProperty.type !== PropertyType.Hidden && !editProperty.readOnly;
     }
-    async submit() {
-        const formGroup = this.formGroup();
-        const template = this.template();
-        if (formGroup !== undefined) {
-            formGroup.markAllAsTouched();
-            if (!formGroup.valid) {
-                this._messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: 'Please correct the errors before submitting.',
-                });
-                ProblemService.scrollToFirstValidationError(this._elementRef.nativeElement);
-                return;
-            }
+    toColumnFilterType(property) {
+        if (!property)
+            return ColumnFilterType.text;
+        const propertyType = property.type;
+        switch (propertyType) {
+            case PropertyType.Number:
+            case PropertyType.Percent:
+            case PropertyType.Currency:
+            case PropertyType.Month:
+                return ColumnFilterType.numeric;
+            case PropertyType.Bool:
+                return ColumnFilterType.boolean;
+            case PropertyType.Date:
+            case PropertyType.DatetimeLocal:
+            case PropertyType.DatetimeOffset:
+                return ColumnFilterType.date;
+            default:
+                return property.options ? property.options.link ? ColumnFilterType.numeric : ColumnFilterType.enum : ColumnFilterType.text;
         }
-        if (!this.canSubmit() || formGroup === undefined || template === undefined)
+    }
+    toMatchModeOptions(property) {
+        const columnFilterType = this.toColumnFilterType(property);
+        return this._filterMatchModeOptions[columnFilterType];
+    }
+    toMaxFractionDigits(property) {
+        switch (property.type) {
+            case PropertyType.Number:
+            case PropertyType.Percent:
+            case PropertyType.Currency:
+                return property.step?.toString().split(".")[1]?.length ?? 2;
+            case PropertyType.Month:
+                return 0;
+            default:
+                return undefined;
+        }
+    }
+    fixUserFilterError(filterEntry, lastFilterEntry, propertyName) {
+        if (!filterEntry)
             return;
-        this.isLoading.set(true);
-        try {
-            const response = await this._client().submit(template, formGroup.value);
-            if (!this._problemService.checkResponseAndDisplayErrors(response, formGroup, "Error while saving the resource")) {
-            }
-            else if (response.status == 201) {
-                if (!response.headers.has('Location')) {
-                    this._messageService.add({ severity: 'error', summary: 'Error', detail: 'The server returned a 201 Created response, but did not return a Location header.', data: response, sticky: true });
-                    return;
-                }
-                this._messageService.add({ severity: 'success', summary: 'Created', detail: 'The resource has been created.' });
-                var createdAtUri = response.headers.get('Location');
-                this.afterSubmit.emit({ location: createdAtUri, status: 201 });
+        if (lastFilterEntry !== undefined &&
+            lastFilterEntry.matchMode !== TranslationKeys.NO_FILTER &&
+            filterEntry.matchMode === TranslationKeys.NO_FILTER) {
+            // The user changed the mode from something to no filter
+            // => We reset the value
+            filterEntry.value = null;
+        }
+        else if (filterEntry.matchMode === TranslationKeys.NO_FILTER &&
+            (lastFilterEntry === undefined || lastFilterEntry.value === null) &&
+            filterEntry.value !== null) {
+            // The user entered a value into the filter, but forgot to change the mode
+            // => We set the match mode to the default for the type that is not no filter
+            filterEntry.matchMode = this._filterMatchModeOptions[this.toColumnFilterType(this.searchTemplate().propertiesRecord[propertyName])][1].value;
+        }
+    }
+    fixUserFilterErrors(filters) {
+        if (!filters)
+            return;
+        Object.entries(filters).forEach(([propertyName, filter]) => {
+            const lastFilter = this._lastUsedFilters[propertyName];
+            if (Array.isArray(filter)) {
+                filter.forEach((filterEntry, index) => this.fixUserFilterError(filterEntry, Array.isArray(lastFilter) ? lastFilter[index] : lastFilter, propertyName));
             }
             else {
-                const responseResource = response.body;
-                const newTemplate = responseResource.getTemplateByTitle(template.title);
-                this.template.set(newTemplate);
-                this._messageService.add({ severity: 'success', summary: 'Saved', detail: 'The resource has been saved.' });
-                this.afterSubmit.emit({ old: template, new: newTemplate, status: 200 });
+                this.fixUserFilterError(filter, Array.isArray(lastFilter) ? lastFilter[0] : lastFilter, propertyName);
             }
-        }
-        catch (e) {
-            this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
-            console.log(e);
-        }
-        this.isLoading.set(false);
+        });
+        this._lastUsedFilters = JSON.parse(JSON.stringify(filters));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: i1$1.FormService }, { token: i0.ElementRef }, { token: ProblemService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldFormComponent, isStandalone: true, selector: "rw-form", inputs: { allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowReload: { classPropertyName: "allowReload", publicName: "allowReload", isSignal: true, isRequired: false, transformFunction: null }, allowSubmit: { classPropertyName: "allowSubmit", publicName: "allowSubmit", isSignal: true, isRequired: false, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null }, showReload: { classPropertyName: "showReload", publicName: "showReload", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { afterDelete: "afterDelete", afterSubmit: "afterSubmit", template: "templateChange", valueChanges: "valueChanges" }, queries: [{ propertyName: "buttonsRef", first: true, predicate: ["buttons"], descendants: true, isSignal: true }, { propertyName: "beforeButtonsRef", first: true, predicate: ["beforeButtons"], descendants: true, isSignal: true }, { propertyName: "afterButtonsRef", first: true, predicate: ["afterButtons"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (formGroup() !== undefined && template() !== undefined) {\n    <form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n        <div class=\"blockable-container\">\n            <div class=\"blockable-element\">\n                <div class=\"grid field\">\n                    <div class=\"col-12 md:col-10 md:col-offset-2\">\n                        <rw-validation-errors [form]=\"formGroup()\"></rw-validation-errors>\n                    </div>\n                </div>\n                <ng-template #defaultContent>\n                    <rw-input-template [template]=\"template()\" [apiName]=\"apiName()\"></rw-input-template>\n                </ng-template>\n                <ng-container\n                    *ngTemplateOutlet=\"contentRef() ?? defaultContent; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n            </div>\n            @if (isLoading()) {\n                <div class=\"blockable-overlay\">\n                    <p-progressSpinner></p-progressSpinner>\n                </div>\n            }\n        </div>\n\n        <div class=\"grid\">\n            <div class=\"col\">\n                <div class=\"flex justify-content-end w-full\">\n                    <ng-template #defaultButtons>\n                        @if (beforeButtonsRef(); as beforeButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"beforeButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                        <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                            [disabled]=\"!allowSubmit()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                            (click)=\"reload()\" [disabled]=\"!canReload()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                            class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                            [disabled]=\"!canDelete()\"></button>\n                        @if (afterButtonsRef(); as afterButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"afterButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"buttonsRef() ?? defaultButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </form>\n}\n", styles: [".blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RestWorldValidationErrorsComponent, selector: "rw-validation-errors", inputs: ["form", "property"] }, { kind: "component", type: RestWorldInputTemplateComponent, selector: "rw-input-template", inputs: ["apiName", "template"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    prefixObjectProperties(obj, prefix) {
+        return Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${prefix}${key}`, value]));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableComponent, deps: [{ token: i2$3.ControlContainer }, { token: i1$1.FormService }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i4$2.PrimeNG }, { token: i2$1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldTableComponent, isStandalone: true, selector: "rw-table", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, cellStyleClass: { classPropertyName: "cellStyleClass", publicName: "cellStyleClass", isSignal: true, isRequired: false, transformFunction: null }, editTemplate: { classPropertyName: "editTemplate", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, oDataParameters: { classPropertyName: "oDataParameters", publicName: "oDataParameters", isSignal: true, isRequired: false, transformFunction: null }, reflectParametersInUrl: { classPropertyName: "reflectParametersInUrl", publicName: "reflectParametersInUrl", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowMenu: { classPropertyName: "rowMenu", publicName: "rowMenu", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: true, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuAsColumn: { classPropertyName: "showRowMenuAsColumn", publicName: "showRowMenuAsColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuOnRightClick: { classPropertyName: "showRowMenuOnRightClick", publicName: "showRowMenuOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, urlParameterPrefix: { classPropertyName: "urlParameterPrefix", publicName: "urlParameterPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { oDataParameters: "oDataParametersChange", selectedRows: "selectedRowsChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "primeNgTable", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"lazy()\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  [paginator]=\"paginator()\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [class]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  (onSort)=\"onSort($event)\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col.name) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        @if (lazy()) {\r\n                            <p-columnFilter #f\r\n                                [type]=\"toColumnFilterType(col.type)\"\r\n                                [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                                matchMode=\"noFilter\"\r\n                                [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                                [showMatchModes]=\"true\"\r\n                                [field]=\"col.name\"\r\n                                display=\"menu\"\r\n                                [maxConstraints]=\"100\"\r\n                                [class.has-filter]=\"f.hasFilter\">\r\n                            <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                                <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                            </ng-template>\r\n                            </p-columnFilter>\r\n                        }\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[getAbsoluteIndex(rowIndex)]\">\r\n        @for (col of columns; track col.name) {\r\n            <td [className]=\"cellStyleClasses()[getAbsoluteIndex(rowIndex)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    @let formControl = getFormGroupAtIndex(rowIndex);\r\n                    @if (formControl) {\r\n                        <ng-container [formGroup]=\"formControl\" >\r\n                            <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[getAbsoluteIndex(rowIndex)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter, p-column-filter, 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", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: ["items"] }, { kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldTableColumnFilterElementComponent, selector: "rw-table-column-filter-element", inputs: ["filterConstraint", "property", "apiName", "value"] }], viewProviders: [{
+                provide: ControlContainer,
+                deps: [[Optional, FormArrayName]],
+                useFactory: (arrayName) => arrayName,
+            }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-form', standalone: true, imports: [ReactiveFormsModule, RestWorldValidationErrorsComponent, RestWorldInputTemplateComponent, ProgressSpinnerModule, ButtonModule, RippleModule, NgTemplateOutlet], template: "@if (formGroup() !== undefined && template() !== undefined) {\n    <form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n        <div class=\"blockable-container\">\n            <div class=\"blockable-element\">\n                <div class=\"grid field\">\n                    <div class=\"col-12 md:col-10 md:col-offset-2\">\n                        <rw-validation-errors [form]=\"formGroup()\"></rw-validation-errors>\n                    </div>\n                </div>\n                <ng-template #defaultContent>\n                    <rw-input-template [template]=\"template()\" [apiName]=\"apiName()\"></rw-input-template>\n                </ng-template>\n                <ng-container\n                    *ngTemplateOutlet=\"contentRef() ?? defaultContent; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n            </div>\n            @if (isLoading()) {\n                <div class=\"blockable-overlay\">\n                    <p-progressSpinner></p-progressSpinner>\n                </div>\n            }\n        </div>\n\n        <div class=\"grid\">\n            <div class=\"col\">\n                <div class=\"flex justify-content-end w-full\">\n                    <ng-template #defaultButtons>\n                        @if (beforeButtonsRef(); as beforeButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"beforeButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                        <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                            [disabled]=\"!allowSubmit()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                            (click)=\"reload()\" [disabled]=\"!canReload()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                            class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                            [disabled]=\"!canDelete()\"></button>\n                        @if (afterButtonsRef(); as afterButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"afterButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"buttonsRef() ?? defaultButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </form>\n}\n", styles: [".blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}\n"] }]
-        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: i1$1.FormService }, { type: i0.ElementRef }, { type: ProblemService }] });
+            args: [{ selector: 'rw-table', standalone: true, viewProviders: [{
+                            provide: ControlContainer,
+                            deps: [[Optional, FormArrayName]],
+                            useFactory: (arrayName) => arrayName,
+                        }], imports: [TableModule, RestWorldMenuButtonComponent, RestWorldInputComponent, RestWorldDisplayComponent, ReactiveFormsModule, ContextMenuModule, RestWorldTableColumnFilterElementComponent, RestWorldTableColumnFilterElementComponent], template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"lazy()\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  [paginator]=\"paginator()\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [class]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  (onSort)=\"onSort($event)\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col.name) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        @if (lazy()) {\r\n                            <p-columnFilter #f\r\n                                [type]=\"toColumnFilterType(col.type)\"\r\n                                [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                                matchMode=\"noFilter\"\r\n                                [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                                [showMatchModes]=\"true\"\r\n                                [field]=\"col.name\"\r\n                                display=\"menu\"\r\n                                [maxConstraints]=\"100\"\r\n                                [class.has-filter]=\"f.hasFilter\">\r\n                            <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                                <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                            </ng-template>\r\n                            </p-columnFilter>\r\n                        }\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[getAbsoluteIndex(rowIndex)]\">\r\n        @for (col of columns; track col.name) {\r\n            <td [className]=\"cellStyleClasses()[getAbsoluteIndex(rowIndex)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    @let formControl = getFormGroupAtIndex(rowIndex);\r\n                    @if (formControl) {\r\n                        <ng-container [formGroup]=\"formControl\" >\r\n                            <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[getAbsoluteIndex(rowIndex)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.ControlContainer }, { type: i1$1.FormService }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i4$2.PrimeNG }, { type: i2$1.FilterService }] });
+var ColumnFilterType;
+(function (ColumnFilterType) {
+    ColumnFilterType["text"] = "text";
+    ColumnFilterType["numeric"] = "numeric";
+    ColumnFilterType["boolean"] = "boolean";
+    ColumnFilterType["date"] = "date";
+    ColumnFilterType["enum"] = "enum";
+})(ColumnFilterType || (ColumnFilterType = {}));
 
 /**
- * Component for navigating to a resource by its ID.
- *
- * @remarks
- * This component is used to navigate to a resource by its ID. It takes in the API name, the `rel` of the resource, and an optional `urlPrefix` to use for the URL that is returned from the backend. It also provides a form for entering the ID of the resource to navigate to.
+ * A base class for all input components..
  */
-class RestWorldIdNavigationComponent {
-    _clients;
-    _messageService;
-    _router;
-    _route;
-    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
-    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
+class RestWorldInputBaseComponent {
     /**
-     * A prefix to use for the URL that is returned from the backend.
-     * If none is provided, a relative navigation will be performed which means that the last part of the current URL is replaced with the one from the backend.
+     * The property to display.
+     * @required
      */
-    urlPrefix = input(...(ngDevMode ? [undefined, { debugName: "urlPrefix" }] : []));
-    idNavigationForm = new FormGroup({
-        id: new FormControl(null, Validators.compose([Validators.min(1), Validators.max(Number.MAX_SAFE_INTEGER)]))
-    });
-    _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
-    constructor(_clients, _messageService, _router, _route) {
-        this._clients = _clients;
-        this._messageService = _messageService;
-        this._router = _router;
-        this._route = _route;
-    }
-    async navigateById() {
-        const rel = this.rel();
-        if (!rel)
-            throw new Error('The "rel" must be set through the uri of this page for the ID navigation to work.');
-        if (!this.idNavigationForm.valid) {
-            this._messageService.add({ detail: 'You must enter a valid ID to naviage to.', severity: 'error' });
-            return;
-        }
-        var idToNavigateTo = this.idNavigationForm.controls.id.value;
-        var client = this._client();
-        var response = await client.getList(rel, { $filter: `id eq ${idToNavigateTo}` });
-        if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
-            this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resources from the API.', data: response });
-            return;
-        }
-        var resource = response.body?._embedded?.items?.[0];
-        if (!resource) {
-            this._messageService.add({ severity: 'error', summary: 'Error', detail: 'No resource found with the specified ID.' });
-            return;
-        }
-        const urlPrefix = this.urlPrefix();
-        if (urlPrefix !== undefined)
-            await this._router.navigate([urlPrefix, resource._links.self[0].href]);
-        else
-            await this._router.navigate(["..", resource._links.self[0].href], { relativeTo: this._route });
-        this.idNavigationForm.reset();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldIdNavigationComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.MessageService }, { token: i3$4.Router }, { token: i3$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldIdNavigationComponent, isStandalone: true, selector: "rw-id-navigation", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, urlPrefix: { classPropertyName: "urlPrefix", publicName: "urlPrefix", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    property = model.required(...(ngDevMode ? [{ debugName: "property" }] : []));
+    /**
+     * Set this to true if the input should use template driven forms instead of the default reactive forms.
+     */
+    useTemplateDrivenForms = input(false, ...(ngDevMode ? [{ debugName: "useTemplateDrivenForms" }] : []));
+    model = model(...(ngDevMode ? [undefined, { debugName: "model" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldInputBaseComponent, isStandalone: true, inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, useTemplateDrivenForms: { classPropertyName: "useTemplateDrivenForms", publicName: "useTemplateDrivenForms", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { property: "propertyChange", model: "modelChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldIdNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rw-id-navigation', standalone: true, imports: [InputNumberModule, ButtonModule, ReactiveFormsModule], template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.MessageService }, { type: i3$4.Router }, { type: i3$4.ActivatedRoute }] });
-
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputBaseComponent, decorators: [{
+            type: Directive
+        }] });
 /**
- * Displays one button for every `MenuItem` given in the items array.
- * If a `MenuItem` has nested items, a button with a dropdown menu will be displayed.
- * @example
- * <rw-menu-button [items]="items"></rw-menu-button>
+ * A base class for all input components which also feature lazy loading, like dropdowns.
  */
-class RestWorldMenuButtonComponent {
-    _router;
+class RestWorldInputLazyLoadBaseComponent extends RestWorldInputBaseComponent {
     /**
-     * An array of menu items to be displayed.
+     * The name of the API to use for the property.
+     * @required
+     * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
-    constructor(_router) {
-        this._router = _router;
-    }
-    onClick(event, item) {
-        const openInNewWindow = event.ctrlKey || event.button === 1 || event.metaKey;
-        if (item.url) {
-            window.open(item.url, openInNewWindow ? '_blank' : '_self');
-        }
-        else if (item.routerLink) {
-            if (openInNewWindow) {
-                const tree = this._router.createUrlTree(item.routerLink, {
-                    queryParams: item.queryParams,
-                    fragment: item.fragment,
-                    queryParamsHandling: item.queryParamsHandling,
-                    preserveFragment: item.preserveFragment,
-                });
-                const url = this._router.serializeUrl(tree);
-                window.open(url, '_blank');
-            }
-            else {
-                this._router.navigate(item.routerLink, {
-                    queryParams: item.queryParams,
-                    fragment: item.fragment,
-                    queryParamsHandling: item.queryParamsHandling,
-                    preserveFragment: item.preserveFragment,
-                    skipLocationChange: item.skipLocationChange,
-                    replaceUrl: item.replaceUrl,
-                });
-            }
-        }
-        else if (item.command) {
-            item.command({ item: item });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldMenuButtonComponent, deps: [{ token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldMenuButtonComponent, isStandalone: true, selector: "rw-menu-button", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item; let i = $index) {\n    @if (!item.items) {\n        <p-button\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-button>\n    } \n    @else {\n        <p-splitButton\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [model]=\"item.items\"\n            appendTo=\"body\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-splitButton>\n    }\n}\n", styles: [":host{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i4$1.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldMenuButtonComponent, decorators: [{
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldInputLazyLoadBaseComponent, isStandalone: true, inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, decorators: [{
+            type: Directive
+        }] });
+/**
+ * A form element with a label that is automatically created from a property in a form template.
+ * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
+ * If you want a form element without a label, use {@link RestWorldFormInput} `<rw-input>`.
+ * @example
+ * <rw-form-element [property]="property" [apiName]="apiName"></rw-form-element>
+ */
+class RestWorldFormElementComponent extends RestWorldInputLazyLoadBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: RestWorldFormElementComponent, isStandalone: true, selector: "rw-form-element", usesInheritance: true, ngImport: i0, template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property()\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName()\" [property]=\"property()\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputComponent), selector: "rw-input" }, { kind: "component", type: i0.forwardRef(() => RestWorldLabelComponent), selector: "rw-label", inputs: ["property"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-menu-button', standalone: true, imports: [ButtonModule, TooltipModule, SplitButtonModule], template: "@for (item of items(); track item; let i = $index) {\n    @if (!item.items) {\n        <p-button\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-button>\n    } \n    @else {\n        <p-splitButton\n            [label]=\"item.label!\"\n            [icon]=\"item.icon!\"\n            [model]=\"item.items\"\n            appendTo=\"body\"\n            [disabled]=\"item.disabled!\"\n            [style]=\"item.style\"\n            [styleClass]=\"item.styleClass!\"\n            [pTooltip]=\"item.tooltip!\"\n            [tooltipPosition]=\"item.tooltipPosition!\"\n            (onClick)=\"onClick($event, item)\"\n            [class.ml-2]=\"i > 0\">\n        </p-splitButton>\n    }\n}\n", styles: [":host{display:flex;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [{ type: i3$4.Router }] });
-
+            args: [{ selector: 'rw-form-element', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputComponent), RestWorldLabelComponent], template: "<div class=\"grid field\">\r\n    <rw-label [property]=\"property()\" class=\"col-12 md:col-2 flex align-items-center\"></rw-label>\r\n    <rw-input [apiName]=\"apiName()\" [property]=\"property()\" class=\"col-12 md:col-10\"></rw-input>\r\n</div>\r\n" }]
+        }] });
 /**
- * This visitor turns a parsed OData $filter query string represented as a {@link Token} into a map of property names to filter metadata.
- * The filter metadata is used by the PrimeNG table component to filter the rows of
- * a table based on the values of the columns.
+ * A collection that is automatically created from the given property.
+ * The collection supports drag & drop to re order the elements and can also be nested.
+ * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ * @example
+ * <rw-input-collection [property]="property" [apiName]="apiName"></rw-input-collection>
  */
-class OdataVisitor {
-    _filters = new Map();
-    operator;
-    propertyName;
-    value;
-    static correctFilterMatchMode(matchMode, literalValue) {
-        if (literalValue instanceof Date) {
-            switch (matchMode) {
-                case FilterMatchMode.EQUALS:
-                    return FilterMatchMode.DATE_IS;
-                case FilterMatchMode.NOT_EQUALS:
-                    return FilterMatchMode.DATE_IS_NOT;
-                case FilterMatchMode.LESS_THAN:
-                    return FilterMatchMode.DATE_BEFORE;
-                case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
-                    return FilterMatchMode.DATE_BEFORE;
-                case FilterMatchMode.GREATER_THAN:
-                    return FilterMatchMode.DATE_AFTER;
-                case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
-                    return FilterMatchMode.DATE_AFTER;
+class RestWorldInputCollectionComponent extends RestWorldInputLazyLoadBaseComponent {
+    _formService;
+    _controlContainer;
+    defaultTemplate = computed(() => this.property()._templates.default, ...(ngDevMode ? [{ debugName: "defaultTemplate" }] : []));
+    innerFormArray = computed(() => this._controlContainer.control?.controls[this.property().name], ...(ngDevMode ? [{ debugName: "innerFormArray" }] : []));
+    templates = computed(() => this.getCollectionEntryTemplates(this.property()), ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    rows = toSignal(merge(
+    // Get the initial value when 'control' changes
+    toObservable(this.innerFormArray).pipe(map((ctl) => ctl.value)), 
+    // Get the new value when 'control.value' changes
+    toObservable(this.innerFormArray).pipe(mergeMap((ctl) => ctl.valueChanges))), { initialValue: [] });
+    inputCollectionRef;
+    headerMenu = computed(() => {
+        const isReadOnly = this.property().readOnly;
+        if (isReadOnly)
+            return [];
+        return [
+            {
+                icon: "fas fa-plus",
+                styleClass: "p-button-outlined p-button-info",
+                command: () => this.addNewItemToCollection()
             }
-        }
-        return matchMode;
-    }
-    static parseLiteralValue(node) {
-        const type = node.value;
-        switch (type) {
-            case PrimitiveTypeEnum.Binary:
-            case PrimitiveTypeEnum.Boolean:
-                return node.raw === "true";
-            case PrimitiveTypeEnum.Byte:
-            case PrimitiveTypeEnum.Int16:
-            case PrimitiveTypeEnum.Int32:
-            case PrimitiveTypeEnum.Int64:
-            case PrimitiveTypeEnum.SByte:
-                return Number.parseInt(node.raw);
-            case PrimitiveTypeEnum.Date:
-            case PrimitiveTypeEnum.DateTime:
-            case PrimitiveTypeEnum.DateTimeOffset:
-            case PrimitiveTypeEnum.Duration:
-            case PrimitiveTypeEnum.TimeOfDay:
-                return new Date(node.raw);
-            case PrimitiveTypeEnum.Decimal:
-            case PrimitiveTypeEnum.Double:
-            case PrimitiveTypeEnum.Single:
-                return Number.parseFloat(node.raw);
-            default:
-                switch (node.raw) {
-                    case "null":
-                        return null;
-                    default:
-                        return node.raw.startsWith("'") ? node.raw.substring(1, node.raw.length - 1) : node.raw;
-                }
-        }
-    }
-    static parseMethodCallExpression(node) {
-        switch (node.value.method) {
-            case 'startswith':
-                return FilterMatchMode.STARTS_WITH;
-            case 'contains':
-                return FilterMatchMode.CONTAINS;
-            case 'not contains':
-                return FilterMatchMode.NOT_CONTAINS;
-            case 'endswith':
-                return FilterMatchMode.ENDS_WITH;
-            default:
-                throw Error(`Unknown method call ${node.value.method}`);
-        }
-    }
-    /***
-     * Parses an OData $filter query string and returns a map of property names to filter metadata.
-     * @param node The root node of the OData $filter query string.
-     * @param logToConsole If true, logs the type and raw value of each token to the console.
-     * @returns A map of property names to filter metadata.
-     */
-    parse(node, logToConsole) {
-        if (logToConsole) {
-            const visitLogAll = createTraverser(Object.fromEntries(Object.entries(TokenType)
-                .map(([key, value]) => [key, (node) => console.log(`${node.type}: ${node.raw}`)])), true);
-            visitLogAll(node);
-        }
-        const visit = createTraverser({
-            EqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.EQUALS),
-            NotEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.NOT_EQUALS),
-            GreaterThanExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.GREATER_THAN),
-            GreaterOrEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO),
-            LesserThanExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.LESS_THAN),
-            LesserOrEqualsExpression: (node) => this.CreateFilter(this.propertyName, this.value, FilterMatchMode.LESS_THAN_OR_EQUAL_TO),
-            HasExpression: (node) => this.CreateFilter(this.propertyName, [this.value], FilterMatchMode.EQUALS),
-            ODataIdentifier: (node) => this.propertyName = node.value.name,
-            Literal: (node) => this.value = OdataVisitor.parseLiteralValue(node),
-            AndExpression: (node) => this.operator = "and",
-            OrExpression: (node) => this.operator = "or",
-            BoolParenExpression: (node) => this.SetOperatorForFilters(),
-            MethodCallExpression: (node) => this.visitMethodCallExpression(node, visit),
-        }, true);
-        visit(node);
-        return this._filters;
+        ];
+    }, ...(ngDevMode ? [{ debugName: "headerMenu" }] : []));
+    rowMenu = computed(() => (row, openedByRightClick) => {
+        const isReadOnly = this.property().readOnly;
+        if (isReadOnly)
+            return [];
+        return [
+            {
+                icon: "fas fa-trash-alt",
+                label: openedByRightClick ? "Delete" : undefined,
+                tooltip: !openedByRightClick ? "Delete" : undefined,
+                tooltipPosition: "left",
+                styleClass: "p-button-outlined p-button-danger",
+                command: () => this.deleteItemFromCollection(row)
+            }
+        ];
+    }, ...(ngDevMode ? [{ debugName: "rowMenu" }] : []));
+    constructor(_formService, _controlContainer) {
+        super();
+        this._formService = _formService;
+        this._controlContainer = _controlContainer;
     }
-    CreateFilter(propertyName, value, matchMode) {
-        if (propertyName === undefined)
-            throw Error(`Cannot add a filter for the value ${value} and the match mode ${matchMode} without a property name`);
-        matchMode = OdataVisitor.correctFilterMatchMode(matchMode, value);
-        const filter = this._filters.get(propertyName);
-        if (filter === undefined) {
-            this._filters.set(propertyName, [{ value, operator: "and", matchMode: matchMode }]);
-        }
-        else if (filter.length === 1 && Array.isArray(filter[0].value) && Array.isArray(value)) {
-            filter[0].value.push(...value); // Flags enum
-        }
-        else {
-            filter.push({ value, operator: "and", matchMode: matchMode });
-        }
+    getCollectionEntryTemplates(property) {
+        if (!property)
+            return [];
+        return Object.entries(property._templates)
+            .filter(([key, value]) => Number.isInteger(Number.parseInt(key)) && Number.isInteger(Number.parseInt(value?.title ?? "")))
+            .map(([, value]) => new NumberTemplate(value));
     }
-    SetOperatorForFilters() {
-        // In this case we are in the outermost expression which is just parantheses around the complete $filter value
-        if (this.propertyName === undefined)
-            return;
-        // If we have not found an operator, or it is "and", we can just stay with the default created with the filter.
-        if (this.operator === undefined || this.operator === "and")
-            return;
-        const filter = this._filters.get(this.propertyName);
-        if (filter === undefined)
-            return;
-        // The operator is "or", so we need to set the operator for all filters to "or"
-        for (const f of filter)
-            f.operator = this.operator;
+    addNewItemToCollection() {
+        const templates = this.templates();
+        const defaultTemplate = this.defaultTemplate();
+        const maxIndex = Math.max(...Object.keys(templates)
+            .map(key => Number.parseInt(key))
+            .filter(key => Number.isSafeInteger(key)));
+        const nextIndex = maxIndex < 0 ? 0 : maxIndex + 1;
+        const copiedTemplateDto = JSON.parse(JSON.stringify(defaultTemplate));
+        copiedTemplateDto.title = nextIndex.toString();
+        const copiedTemplate = new Template(copiedTemplateDto);
+        this.innerFormArray().push(this._formService.createFormGroupFromTemplate(this.defaultTemplate()));
+        this.property.update((property) => { property._templates[nextIndex] = copiedTemplate; return { ...property }; });
     }
-    // The visitor does not correctly implement the MethodCallExpressionToken, so we need to do this manually
-    visitMethodCallExpression(node, visit) {
-        for (const parameter of node.value.parameters)
-            visit(parameter);
-        const matchMode = OdataVisitor.parseMethodCallExpression(node);
-        this.CreateFilter(this.propertyName, this.value, matchMode);
+    deleteItemFromCollection(row) {
+        const index = this.rows().indexOf(row);
+        this.innerFormArray().removeAt(index);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputCollectionComponent, deps: [{ token: i1$1.FormService }, { token: i2$3.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: RestWorldInputCollectionComponent, isStandalone: true, selector: "rw-input-collection", queries: [{ propertyName: "inputCollectionRef", first: true, predicate: ["inputCollection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<rw-table\n    [apiName]=\"apiName()\"\n    [editTemplate]=\"defaultTemplate()\"\n    [formArrayName]=\"property().name\"\n    [lazy]=\"false\"\n    [rows]=\"rows()\"\n    [searchTemplate]=\"defaultTemplate()\"\n    [headerMenu]=\"headerMenu()\"\n    [rowMenu]=\"rowMenu()\"\n\n    >\n</rw-table>\n", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$3.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2$3.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i0.forwardRef(() => RestWorldTableComponent), selector: "rw-table", inputs: ["apiName", "cellStyleClass", "editTemplate", "headerMenu", "isLoading", "lazy", "paginator", "oDataParameters", "reflectParametersInUrl", "rowHover", "rowMenu", "rowStyleClass", "rows", "rowsPerPageOptions", "scrollHeight", "scrollable", "searchTemplate", "selectedRows", "selectionMode", "showRowMenuAsColumn", "showRowMenuOnRightClick", "styleClass", "tableStyle", "totalRecords", "urlParameterPrefix"], outputs: ["oDataParametersChange", "selectedRowsChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-collection', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputTemplateComponent), DragDropModule, ReactiveFormsModule, RestWorldTableComponent], template: "<rw-table\n    [apiName]=\"apiName()\"\n    [editTemplate]=\"defaultTemplate()\"\n    [formArrayName]=\"property().name\"\n    [lazy]=\"false\"\n    [rows]=\"rows()\"\n    [searchTemplate]=\"defaultTemplate()\"\n    [headerMenu]=\"headerMenu()\"\n    [rowMenu]=\"rowMenu()\"\n\n    >\n</rw-table>\n", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormService }, { type: i2$3.ControlContainer }], propDecorators: { inputCollectionRef: [{
+                type: ContentChild,
+                args: ['inputCollection', { static: false }]
+            }] } });
 /**
- * This class is used to parse an OData $filter string into a Record of filter constraints.
+ * A form input element that is automatically created from a property in a form template.
+ * This may also be a complex object or a collection in which case multiple and nested input elements may be rendered.
+ * If you also want a label, use {@link RestWorldFormElement} `<rw-form-element>`.
+ * You can also use one of the different RestWorldInput... `<rw-input-...>` elements to render a specific input,
+ * but it is advised to control the rendered input through the passed in property.
+ * @example
+ * <rw-input [property]="property" [apiName]="apiName"></rw-input>
  */
-class ODataFilterParser {
-    static parseFilter(filter, properties) {
-        if (!filter)
-            return {};
-        // The parser has a bug where it does not correctly parse cast expressions, so we need to replace them with the first argument
-        // See https://github.com/Soontao/odata-v4-parser/issues/283
-        filter = ODataFilterParser.replaceCastExpressions(filter);
-        const ast = defaultParser.filter(filter);
-        const visitor = new OdataVisitor();
-        const filters = visitor.parse(ast);
-        /// OData needs enum values in pascal case, but JSON and therefor HAL-Forms needs them in camel case
-        ODataFilterParser.MakeEnumValuesCamelCase(filters, properties);
-        return Object.fromEntries(filters);
+class RestWorldInputComponent extends RestWorldInputLazyLoadBaseComponent {
+    get PropertyType() {
+        return PropertyType;
     }
-    static MakeEnumValuesCamelCase(filters, properties) {
-        for (const [key, value] of filters) {
-            for (const filter of value) {
-                const options = properties[key]?.options;
-                if (options && !options.link && typeof filter.value === "string") {
-                    filter.value = filter.value.charAt(0).toLowerCase() + filter.value.slice(1);
-                }
-            }
-        }
-    }
-    static replaceCastExpressions(input) {
-        // Regular expression to match cast(x, y) and extract x
-        const regex = /cast\(([^,]+),\s*[^)]+\)/g;
-        // Replace matches with the first captured group (x)
-        const result = input.replace(regex, (match, x) => x.trim());
-        return result;
+    get PropertyWithOptions() {
+        return PropertyWithOptions;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputComponent, isStandalone: true, selector: "rw-input", usesInheritance: true, ngImport: i0, template: "@if (property()) {\r\n    @if (property().options) {\r\n        <rw-input-dropdown [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-input-object [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-input-collection [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-collection>\r\n            }\r\n            @default {\r\n                <rw-input-simple [property]=\"property()\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-simple>\r\n            }\r\n        }\r\n    }\r\n\r\n    <rw-validation-errors [property]=\"property()\"></rw-validation-errors>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputDropdownComponent), selector: "rw-input-dropdown", inputs: ["caseSensitive", "getLabel", "getTooltip"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => RestWorldInputObjectComponent), selector: "rw-input-object" }, { kind: "component", type: i0.forwardRef(() => RestWorldInputSimpleComponent), selector: "rw-input-simple" }, { kind: "component", type: i0.forwardRef(() => RestWorldInputCollectionComponent), selector: "rw-input-collection" }, { kind: "component", type: i0.forwardRef(() => RestWorldValidationErrorsComponent), selector: "rw-validation-errors", inputs: ["form", "property"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputDropdownComponent), forwardRef(() => RestWorldInputObjectComponent), forwardRef(() => RestWorldInputSimpleComponent), RestWorldInputCollectionComponent, RestWorldValidationErrorsComponent, FormsModule], template: "@if (property()) {\r\n    @if (property().options) {\r\n        <rw-input-dropdown [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-input-object [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-input-collection [apiName]=\"apiName()\" [property]=\"$any(property())\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-collection>\r\n            }\r\n            @default {\r\n                <rw-input-simple [property]=\"property()\" [useTemplateDrivenForms]=\"useTemplateDrivenForms()\"></rw-input-simple>\r\n            }\r\n        }\r\n    }\r\n\r\n    <rw-validation-errors [property]=\"property()\"></rw-validation-errors>\r\n}\r\n" }]
+        }] });
 /**
- * A static class that provides utility methods for creating OData filters, order by clauses, and parameters from {@link TableLazyLoadEvent} objects.
+ * A dropdown that is automatically created from the given property.
+ * The dropdown supports searching through a RESTWorld list endpoint on the backend if the `link` of the options is set.
+ * Otherwise the dropdown will use the `inline` of the options.
+ * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ * @example
+ * <rw-input-dropdown [property]="property" [apiName]="apiName"></rw-input-dropdown>
  */
-class ODataService {
+class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponent {
+    _controlContainer;
     /**
-     * Creates an OData filter string for a given property and filter metadata.
-     * @param property - The property to filter on.
-     * @param filter - The filter metadata to use.
-     * @returns The OData filter string, or undefined if the filter value is falsy.
+     * A flag that indicates if the search should be case sensitive.
+     * The default is false.
      */
-    static createFilterForProperty(property, filter) {
-        if (filter.matchMode == TranslationKeys.NO_FILTER)
-            return undefined;
-        // Enums are handled differently
-        if (property.options && !property.options.link)
-            return ODataService.createFilterForEnum(property, filter);
-        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
-        const comparisonValue = ODataService.createComparisonValue(property, filter.value);
-        switch (oDataOperator) {
-            case 'contains':
-            case 'not contains':
-            case 'startswith':
-            case 'endswith':
-                return `${oDataOperator}(${property.name}, ${comparisonValue})`;
-            default:
-                return `${property.name} ${oDataOperator} ${comparisonValue}`;
-        }
-    }
+    caseSensitive = input(false, ...(ngDevMode ? [{ debugName: "caseSensitive" }] : []));
     /**
-     * Creates an OData `$filter` value for an array of {@link FilterMetadata} objects and a given {@link Property}.
-     * @param property - The {@link Property} to filter on.
-     * @param filters - An array of {@link FilterMetadata} objects.
-     * @returns The OData `$filter` value, or undefined if no filters were provided.
+     * A function that returns the label for the given item.
+     * The default returns the prompt and optionally the value in brackets.
+     * The value in brackets will only be displayed if the `cols` field of the property is undefined or greater than 1.
+     * Overwrite this function to change the label.
+     * @param item The item to get the label for.
      */
-    static createFilterForPropertyArray(property, filters) {
-        const filter = filters
-            .map(f => ODataService.createFilterForProperty(property, f))
-            .filter(f => !!f)
-            .join(` ${filters[0].operator} `);
-        if (filter === '')
-            return undefined;
-        return `(${filter})`;
-    }
+    getLabel = input(...(ngDevMode ? [undefined, { debugName: "getLabel" }] : []));
     /**
-     * Creates an OData `$filter` value from a {@link TableLazyLoadEvent} and an array of {@link Property Properties}.
-     * @param event The {@link TableLazyLoadEvent} containing the filter data.
-     * @param properties An optional array of {@link Property Properties} to filter on.
-     * @returns The OData $`$filter` value, or undefined if no filters were applied or no properties were provided.
+     * A function that returns the tooltip for the given item.
+     * The default returns all properties of the item except the ones that start with an underscore or the ones that are in the list of default properties to exclude.
+     * The default properties to exclude are: createdAt, createdBy, lastChangedAt, lastChangedBy, timestamp, promptField, valueField.
+     * Overwrite this function to change the tooltip.
+     * @param item The item to get the label for.
      */
-    static createFilterFromTableLoadEvent(event, properties) {
-        const eventFilters = event.filters;
-        if (eventFilters === undefined || properties === undefined)
-            return undefined;
-        const filter = properties
-            .map(property => ({ property, filters: eventFilters[property.name] }))
-            .filter(f => f.filters !== undefined)
-            .map(f => ODataService.createFilterForPropertyArray(f.property, f.filters))
-            .filter(f => !!f)
-            .join(' and ');
-        if (filter === '')
-            return undefined;
-        return `(${filter})`;
-    }
+    getTooltip = input(...(ngDevMode ? [undefined, { debugName: "getTooltip" }] : []));
+    inputOptionsMultipleRef = contentChild("inputOptionsMultiple", ...(ngDevMode ? [{ debugName: "inputOptionsMultipleRef" }] : []));
+    inputOptionsSingleRef = contentChild("inputOptionsSingle", ...(ngDevMode ? [{ debugName: "inputOptionsSingleRef" }] : []));
+    multiSelect = viewChild(MultiSelect, ...(ngDevMode ? [{ debugName: "multiSelect" }] : []));
     /**
-     * Creates a map of property names to filter metadata from an OData $filter string.
-     * @param filter The OData filter string to parse.
-     * @returns A record of property names to filter metadata.
+     * An event that is emitted when the selected value changes.
      */
-    static createFilterMetadataFromODataFilter(filter, properties) {
-        const filters = ODataFilterParser.parseFilter(filter, properties);
-        return filters;
+    onChange = output();
+    onOptionsFiltered = debounce(this.onOptionsFilteredInternal, 500);
+    optionsManager;
+    _formControl = computed(() => {
+        const formGroup = this._controlContainer.control;
+        return formGroup.controls[this.property().name];
+    }, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _value = toSignal(toObservable(this._formControl).pipe(distinctUntilChanged(), switchMap(formControl => formControl
+        ? formControl.valueChanges.pipe(debounceTime(0), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))).pipe(startWith(formControl.value))
+        : EMPTY)));
+    constructor(_controlContainer, optionsService) {
+        super();
+        this._controlContainer = _controlContainer;
+        this.optionsManager = optionsService.getManager(this.apiName, this.property, this._value, this.getLabel, this.getTooltip);
     }
-    /**
-     * Creates a OData `$orderby` value from a {@link TableLazyLoadEvent}.
-     * @param event The {@link TableLazyLoadEvent} to create the `$orderby` value from.
-     * @returns The `$orderby` value created from the {@link TableLazyLoadEvent}.
-     */
-    static createOrderByFromTableLoadEvent(event) {
-        if (event.multiSortMeta && event.multiSortMeta.length > 0) {
-            return event.multiSortMeta
-                .map(m => `${m.field} ${m.order > 0 ? 'asc' : 'desc'}`)
-                .join(', ');
-        }
-        if (event.sortField) {
-            const order = !event.sortOrder || event.sortOrder > 0 ? 'asc' : 'desc';
-            return `${event.sortField} ${order}`;
-        }
-        return undefined;
+    onOptionsChanged(event) {
+        this.onChange.emit(event);
     }
-    /**
-     * Creates an {@link ODataParameters} object from a given {@link ActivatedRoute}.
-     * @param route The {@link ActivatedRoute} to create the {@link ODataParameters} from.
-     * @param prefix An optional prefix to use for the query parameter keys.
-     * @returns The {@link ODataParameters} object created from the {@link ActivatedRoute}.
-     */
-    static createParametersFromRoute(route, prefix) {
-        const snapshot = route.snapshot;
-        let oDataParameters = {};
-        const filter = snapshot.queryParamMap.get(`${prefix}$filter`);
-        const orderBy = snapshot.queryParamMap.get(`${prefix}$orderby`);
-        const top = snapshot.queryParamMap.get(`${prefix}$top`);
-        const skip = snapshot.queryParamMap.get(`${prefix}$skip`);
-        if (filter)
-            oDataParameters.$filter = filter;
-        if (orderBy)
-            oDataParameters.$orderby = orderBy;
-        if (top) {
-            const topNumber = Number.parseInt(top);
-            if (Number.isInteger(topNumber))
-                oDataParameters.$top = topNumber;
-        }
-        if (skip) {
-            const skipNumber = Number.parseInt(skip);
-            if (Number.isInteger(skipNumber))
-                oDataParameters.$skip = skipNumber;
+    async onOptionsFilteredInternal(event) {
+        const options = this.optionsManager.options();
+        const currentItems = this.optionsManager.items.value();
+        if (!(event.filter) || event.filter === '')
+            return;
+        if (event.originalEvent.type === "input") {
+            const inputEvent = event.originalEvent;
+            if (inputEvent.inputType === "insertFromPaste") {
+                // If the user pasted in multiple ids as comma separated list, we want to get them all and set them as the selected value.
+                var values = event.filter
+                    .split(",")
+                    .filter(v => v !== '')
+                    .map(v => v.trim())
+                    .map(v => {
+                    const n = Number.parseFloat(v);
+                    return Number.isNaN(n) ? this.makeUpperIfCaseInsensitive(v.toUpperCase(), false) : n;
+                });
+                if (!values || values.length === 0)
+                    return;
+                const allAreNumbers = values.every(v => typeof v === "number" && !isNaN(v));
+                const filter = allAreNumbers
+                    ? `${options.valueField} in (${values.join(',')})`
+                    : `contains(${this.makeUpperIfCaseInsensitive(options.promptField, true)}, '${values.join("', '")}')`;
+                if ((options?.link?.href))
+                    await this.optionsManager.updateItemsFromFilter(filter);
+                if (currentItems) {
+                    const selectedValues = currentItems
+                        .map(i => this.optionsManager.getValue(i))
+                        .filter(v => values.includes(v));
+                    this._formControl().setValue(selectedValues);
+                    this.multiSelect()?.resetFilter();
+                }
+            }
+            else {
+                // This is the normal case where the user types in a filter.
+                let filter = `contains(${this.makeUpperIfCaseInsensitive(options.promptField, true)}, '${this.makeUpperIfCaseInsensitive(event.filter, false)}')`;
+                if (options.valueField?.toLowerCase() === 'id' && !Number.isNaN(Number.parseInt(event.filter)))
+                    filter = `(${options.valueField} eq ${event.filter})  or (${filter})`;
+                if ((options?.link?.href))
+                    await this.optionsManager.updateItemsFromFilter(filter);
+            }
         }
-        return oDataParameters;
     }
-    /**
-     * Creates {@link ODataParameters} from a {@link TableLazyLoadEvent} and an optional {@link Template}.
-     * @param event The {@link TableLazyLoadEvent} to create OData parameters from.
-     * @param template An optional {@link Template} to use for creating the OData parameters.
-     * @returns An {@link ODataParameters} object containing the `$filter`, `$orderby`, `$top`, and `$skip` parameters.
-     */
-    static createParametersFromTableLoadEvent(event, template) {
-        const oDataParameters = {
-            $filter: ODataService.createFilterFromTableLoadEvent(event, template?.properties),
-            $orderby: ODataService.createOrderByFromTableLoadEvent(event),
-            $top: ODataService.createTopFromTableLoadEvent(event),
-            $skip: ODataService.createSkipFromTableLoadEvent(event)
-        };
-        return oDataParameters;
+    makeUpperIfCaseInsensitive(filter, isOData) {
+        if (this.caseSensitive() || typeof filter !== "string")
+            return filter;
+        if (isOData)
+            return `toupper(${filter})`;
+        return filter.toUpperCase();
     }
-    /**
-     * Creates a OData `$skip` value from a {@link TableLazyLoadEvent}.
-     * @param event The {@link TableLazyLoadEvent} to create the `$skip` value from.
-     * @returns The `$skip` value created from the {@link TableLazyLoadEvent}.
-     */
-    static createSkipFromTableLoadEvent(event) {
-        return event.first;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputDropdownComponent, deps: [{ token: i2$3.ControlContainer }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputDropdownComponent, isStandalone: true, selector: "rw-input-dropdown", inputs: { caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, getTooltip: { classPropertyName: "getTooltip", publicName: "getTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, queries: [{ propertyName: "inputOptionsMultipleRef", first: true, predicate: ["inputOptionsMultiple"], descendants: true, isSignal: true }, { propertyName: "inputOptionsSingleRef", first: true, predicate: ["inputOptionsSingle"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: MultiSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-select\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n    @else {\n        <p-select\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n</ng-template>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-multiSelect\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n    @else {\n        <p-multiSelect\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n</ng-template>\n\n@if(!optionsManager.options().maxItems || optionsManager.options().maxItems == 1) {\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef() ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n@else {\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef() ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"], dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertySelectAttributes, selector: "p-select[formControlProperty], p-select[propertyAttributes], p-multiSelect[formControlProperty], p-multiSelect[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-dropdown', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [Select, ReactiveFormsModule, MultiSelect, Tooltip, Chip, NgTemplateOutlet, HalFormsModule, FormsModule], template: "<ng-template #defaultInputOptionsSingle let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-select\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n    @else {\n        <p-select\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n            <ng-template #selectedItem let-selectedItem>\n                <span [pTooltip]=\"optionsManager.getTooltip()(selectedItem)\">{{optionsManager.getLabel()(selectedItem)}}</span>\n            </ng-template>\n            <ng-template #item let-item>\n                <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n            </ng-template>\n        </p-select>\n    }\n</ng-template>\n\n<ng-template #defaultInputOptionsMultiple let-property=\"property\" let-template=\"template\" let-items=\"items\" let-useTemplateDrivenForms=\"useTemplateDrivenForms\">\n    @if (useTemplateDrivenForms()) {\n        <p-multiSelect\n            [propertyAttributes]=\"property()\"\n            [(ngModel)]=\"model\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n    @else {\n        <p-multiSelect\n            [formControlProperty]=\"property()\"\n            [options]=\"optionsManager.items.value()\"\n            (onFilter)=\"onOptionsFiltered($event)\"\n            (onChange)=\"onOptionsChanged($event)\"\n            styleClass=\"w-full\"\n            [panelStyleClass]=\"optionsManager.loading() ? 'loading' : ''\"\n            [emptyFilterMessage]=\"optionsManager.loading() ? 'Loading...' : ''\"\n            [loading]=\"optionsManager.loading()\"\n        >\n        <ng-template #selecteditems let-items let-removeChip=\"removeChip\">\n            @for (item of items; track item; let i = $index) {\n                <p-chip\n                    [pTooltip]=\"optionsManager.getTooltip()(item)\"\n                    [label]=\"optionsManager.getLabel()(item)\"\n                    [removable]=\"true\"\n                    (onRemove)=\"removeChip(optionsManager.getValue(item), $event)\"\n                >\n                </p-chip>\n        }\n        </ng-template>\n        <ng-template #item let-item>\n            <span [pTooltip]=\"optionsManager.getTooltip()(item)\">{{optionsManager.getLabel()(item)}}</span>\n        </ng-template>\n    </p-multiSelect>\n    }\n</ng-template>\n\n@if(!optionsManager.options().maxItems || optionsManager.options().maxItems == 1) {\n    <ng-container *ngTemplateOutlet=\"inputOptionsSingleRef() ?? defaultInputOptionsSingle; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n@else {\n    <ng-container *ngTemplateOutlet=\"inputOptionsMultipleRef() ?? defaultInputOptionsMultiple; context: { property: property, apiName: apiName, items: optionsManager.items, useTemplateDrivenForms: useTemplateDrivenForms, model: model }\"></ng-container>\n}\n", styles: ["::ng-deep .p-multiselect-label{display:inline-flex!important}::ng-deep .p-multiselect-label-empty{height:36px}::ng-deep .p-chip{background-color:#eff6ff;color:#1d4ed8}::ng-deep .pi-chip-remove-icon:hover{filter:brightness(.6)}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.ControlContainer }, { type: OptionsService }] });
+/**
+ * A complex object with multiple properties that is automatically created from the given property.
+ * The object can also be nested.
+ * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ * @example
+ * <rw-input-object [property]="property" [apiName]="apiName"></rw-input-object>
+ */
+class RestWorldInputObjectComponent extends RestWorldInputLazyLoadBaseComponent {
+    _controlContainer;
+    inputObjectRef = contentChild("inputObject", ...(ngDevMode ? [{ debugName: "inputObjectRef" }] : []));
+    constructor(_controlContainer) {
+        super();
+        this._controlContainer = _controlContainer;
     }
-    /**
-     * Creates a OData `$top` value from a {@link TableLazyLoadEvent}.
-     * @param event The {@link TableLazyLoadEvent} to create the `$top` value from.
-     * @returns The `$top` value created from the {@link TableLazyLoadEvent}.
-     */
-    static createTopFromTableLoadEvent(event) {
-        return event.rows === null ? undefined : event.rows;
+    innerFormGroup = computed(() => {
+        const formGroup = this._controlContainer.control;
+        return formGroup.controls[this.property().name];
+    }, ...(ngDevMode ? [{ debugName: "innerFormGroup" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputObjectComponent, deps: [{ token: i2$3.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.1", type: RestWorldInputObjectComponent, isStandalone: true, selector: "rw-input-object", queries: [{ propertyName: "inputObjectRef", first: true, predicate: ["inputObject"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultInputObject let-property=\"property\" let-innerFormGroup=\"innerFormGroup\", let-apiName=\"apiName\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup()\" [template]=\"property()._templates.default\" [apiName]=\"apiName()\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef() || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>\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}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldInputTemplateComponent), selector: "rw-input-template", inputs: ["apiName", "template"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$3.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2$3.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputObjectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-object', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [forwardRef(() => RestWorldInputTemplateComponent), ReactiveFormsModule, NgTemplateOutlet], template: "<ng-template #defaultInputObject let-property=\"property\" let-innerFormGroup=\"innerFormGroup\", let-apiName=\"apiName\">\n    <div class=\"flex align-items-center\">\n        <div class=\"brace\">\n        </div>\n        <div class=\"w-full\">\n            <rw-input-template [formGroup]=\"innerFormGroup()\" [template]=\"property()._templates.default\" [apiName]=\"apiName()\"></rw-input-template>\n        </div>\n    </div>\n</ng-template>\n\n<ng-container>\n    <ng-container *ngTemplateOutlet=\"inputObjectRef() || defaultInputObject; context: { property: property, innerFormGroup: innerFormGroup, apiName: apiName }\"></ng-container>\n</ng-container>\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}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.ControlContainer }] });
+/**
+ * A simple input element, like a string, a number or a Date that is automatically created from the given property.
+ * @remarks It is advised to use {@link RestWorldInputComponent} `<rw-input>` and control the rendered inputs with the passed in property
+ * instead of using this component directly.
+ * @example
+ * <rw-input-simple [property]="property" [apiName]="apiName"></rw-input-simple>
+ */
+class RestWorldInputSimpleComponent extends RestWorldInputBaseComponent {
+    static _dateFormat = new Date(3333, 10, 22) // months start at 0 in JS
+        .toLocaleDateString()
+        .replace("22", "dd")
+        .replace("11", "mm")
+        .replace("3333", "yy")
+        .replace("33", "y");
+    static _timeFormat = new Date(1, 1, 1, 22, 33, 44)
+        .toLocaleTimeString()
+        .replace("22", "hh")
+        .replace("33", "mm")
+        .replace("44", "ss");
+    _inputChild = viewChild("inputElement", ...(ngDevMode ? [{ debugName: "_inputChild" }] : []));
+    _controlChild = viewChild(NG_VALUE_ACCESSOR, ...(ngDevMode ? [{ debugName: "_controlChild" }] : []));
+    constructor() {
+        super();
     }
-    static createComparisonValue(property, value, isEnum) {
-        if (value === null || value === undefined)
-            return 'null';
-        const type = ODataService.getPropertyType(property, value);
-        switch (type) {
-            case PropertyType.Date:
-                return `cast(${value.toISOString()}, Edm.DateOnly)`;
-            case PropertyType.DatetimeLocal:
-                return `cast(${value.toISOString()}, Edm.DateTime)`;
-            case PropertyType.DatetimeOffset:
-                return `cast(${value.toISOString()}, Edm.DateTimeOffset)`;
-            case PropertyType.Time:
-                return `cast(${value.toISOString()}, Edm.TimeOnly)`;
-            case PropertyType.Duration:
-                return `cast(${value.toISOString()}, Edm.TimeSpan)`;
-            case PropertyType.Bool:
-            case PropertyType.Number:
-            case PropertyType.Currency:
-            case PropertyType.Month:
-                return '' + value;
-            case PropertyType.Percent:
-                return '' + (value / 100);
-            default:
-                return `'${isEnum && typeof value === "string" ? value.charAt(0).toUpperCase() + value.slice(1) : value}'`;
+    writeValue(obj) {
+        const controlChild = this._controlChild();
+        const inputChild = this._inputChild();
+        if (controlChild !== undefined)
+            controlChild.writeValue(obj);
+        else if (inputChild !== undefined)
+            inputChild.nativeElement.value = obj;
+    }
+    registerOnChange(fn) {
+        const controlChild = this._controlChild();
+        const inputChild = this._inputChild();
+        if (controlChild !== undefined)
+            controlChild.registerOnChange(fn);
+        else if (inputChild !== undefined)
+            inputChild.nativeElement.oninput = (event) => fn(event.target.value);
+    }
+    registerOnTouched(fn) {
+        const controlChild = this._controlChild();
+        const inputChild = this._inputChild();
+        if (controlChild !== undefined)
+            controlChild.registerOnTouched(fn);
+        else if (inputChild !== undefined)
+            inputChild.nativeElement.onblur = (event) => fn();
+    }
+    setDisabledState(isDisabled) {
+        const controlChild = this._controlChild();
+        const inputChild = this._inputChild();
+        if (controlChild !== undefined && controlChild.setDisabledState !== undefined)
+            controlChild.setDisabledState(isDisabled);
+        else if (inputChild !== undefined) {
+            if (isDisabled)
+                inputChild.nativeElement.setAttribute("disabled", "disabled");
+            else
+                inputChild.nativeElement.removeAttribute("disabled");
         }
     }
-    static createFilterForEnum(property, filter) {
-        if (filter.matchMode == TranslationKeys.NO_FILTER)
-            return undefined;
-        const options = property.options;
-        if (options === undefined)
-            throw Error(`Property ${property.name} has no options`);
-        const maxItems = options.maxItems ?? Number.MAX_SAFE_INTEGER;
-        const oDataOperator = ODataService.createODataOperator(filter.matchMode);
-        // Normal enum
-        if (maxItems === 1) {
-            const comparisonValue = ODataService.createComparisonValue(property, filter.value, true);
-            return `${property.name} ${oDataOperator} ${comparisonValue}`;
-        }
-        // Flags enum
-        if (filter.value === null || filter.value === undefined)
-            return undefined;
-        const values = Array.isArray(filter.value) ? filter.value : [filter.value];
-        const comparisonValues = values.map(v => ODataService.createComparisonValue(property, v, true));
-        const filters = comparisonValues.map(v => `${property.name} has ${v}`);
-        const concatenatedFilters = filters.join(' and ');
-        return `(${concatenatedFilters})`;
+    get PropertyType() {
+        return PropertyType;
     }
-    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}`);
-        }
+    get PropertyWithImage() {
+        return PropertyWithImage;
     }
-    static getPropertyType(property, value) {
-        if (property.options) {
-            if (typeof value === "string" ||
-                Array.isArray(value) && value.every(v => typeof v === "string") ||
-                property.options.inline?.some(o => property.options.valueField !== undefined && typeof o[property.options.valueField] === "string"))
-                return PropertyType.Text;
-            return PropertyType.Number;
-        }
-        return property.type;
+    get dateFormat() {
+        return RestWorldInputSimpleComponent._dateFormat;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, providedIn: 'root' });
+    // public readonly formControl = computed(() => {
+    //     const formGroup = this._controlContainer.control as FormGroup<any>;
+    //     return formGroup.controls[this.property().name] as FormControl<SimpleValue | SimpleValue[]>;
+    // });
+    get timeFormat() {
+        return RestWorldInputSimpleComponent._timeFormat;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputSimpleComponent, isStandalone: true, selector: "rw-input-simple", providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RestWorldInputSimpleComponent),
+                multi: true
+            }], viewQueries: [{ propertyName: "_inputChild", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_controlChild", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: TriStateCheckbox, selector: "p-tri-state-checkbox, p-tri-state-checkBox, p-tri-state-check-box, rw-tri-state-checkbox, rw-tri-state-checkBox, rw-tri-state-check-box", inputs: ["value", "name", "disabled", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "model", "variant"], outputs: ["disabledChange", "modelChange", "onChange", "onFocus", "onBlur"] }, { kind: "component", type: RestWorldImageComponent, selector: "rw-image", inputs: ["property", "backgroundColor", "displayCropDialog"], outputs: ["backgroundColorChange", "displayCropDialogChange"] }, { kind: "component", type: RestWorldFileComponent, selector: "rw-file", inputs: ["accept", "fileName"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: HalFormsModule }, { kind: "directive", type: FormControlProperty, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: ["formControlProperty"] }, { kind: "directive", type: DefaultPropertyValueAccessor, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]" }, { kind: "directive", type: PropertyControlStatus, selector: "[formControlProperty]" }, { kind: "directive", type: PropertyAttributes, selector: "[formControlProperty],[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: PropertyInputNumberAttributes, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: ["formControlProperty", "propertyAttributes"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-input-simple', standalone: true, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RestWorldInputSimpleComponent),
+                            multi: true
+                        }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [DatePicker, InputNumber, TriStateCheckbox, RestWorldImageComponent, RestWorldFileComponent, InputText, HalFormsModule, FormsModule], template: "@switch(property().type) {\r\n    @case (PropertyType.Textarea) {\r\n        @if (useTemplateDrivenForms()){\r\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n        @else {\r\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\r\n        }\r\n    }\r\n    @case (PropertyType.Date) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Month) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Time) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeLocal) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Number) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n        @else {\r\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\r\n        }\r\n        @else {\r\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\r\n        }\r\n    }\r\n    @case (PropertyType.DatetimeOffset) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Duration) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n        @else {\r\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\r\n        }\r\n    }\r\n    @case (PropertyType.Image) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n        @else {\r\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\r\n        }\r\n    }\r\n    @case (PropertyType.File) {\r\n        @if (useTemplateDrivenForms()) {\r\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n        @else {\r\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\r\n        }\r\n    }\r\n    @default {\r\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\r\n        @if (useTemplateDrivenForms()) {\r\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\r\n        }\r\n        @else {\r\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\r\n        }\r\n    }\r\n}\r\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"] }]
+        }], ctorParameters: () => [] });
 /**
- * This component is used to display a filter element for a table column.
- * It is used internally by the <rw-table> component, but can also be used in the #filter template of a column in the header of a <p-table>.
+ * A collection of `<rw-form>` elements automatically created from a template.
+ * Does not have any buttons on its own.
+ * If you want buttons, use {@link RestWorldForm} `<rw-form>`.
+ * @example
+ * <rw-form-collection [template]="template" [apiName]="apiName"></rw-form-collection>
  */
-class RestWorldTableColumnFilterElementComponent {
-    _formService;
-    /**
-     * The filter constraint to update when the value changes.
-     * This is coming from the $context of the #filter template
-     */
-    filterConstraint = input.required(...(ngDevMode ? [{ debugName: "filterConstraint" }] : []));
-    /**
-     * The HAL-Forms property to filter by.
-     * This is normally the column.
-     */
-    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
+class RestWorldInputTemplateComponent {
     /**
-     * The name of the API to use when generating dropdowns.
+     * The name of the API to use for the property.
+     * @required
+     * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
     apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
-     * The initial value of the filter.
+     * The template to display.
+     * @required
+     * @remarks This is the template that defines the properties to display.
      */
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    form = computed(() => this._formService.createFormGroupFromTemplate(this.template()), ...(ngDevMode ? [{ debugName: "form" }] : []));
-    template = computed(() => new Template({
-        properties: [this.property()],
-    }), ...(ngDevMode ? [{ debugName: "template" }] : []));
-    _formValueChangesSubscription;
-    constructor(_formService) {
-        this._formService = _formService;
-        effect(() => {
-            this._formValueChangesSubscription?.unsubscribe();
-            const form = this.form();
-            const property = this.property();
-            const value = untracked(() => this.value());
-            const formControl = form.controls[property.name];
-            this._formValueChangesSubscription = formControl.valueChanges.subscribe(this.setFilterValue.bind(this));
-            formControl.setValue(value);
-        });
-    }
-    setFilterValue(value) {
-        this.filterConstraint().value = value;
-    }
-    ngOnDestroy() {
-        this._formValueChangesSubscription?.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, deps: [{ token: i1$1.FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldTableColumnFilterElementComponent, isStandalone: true, selector: "rw-table-column-filter-element", inputs: { filterConstraint: { classPropertyName: "filterConstraint", publicName: "filterConstraint", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    template = input.required(...(ngDevMode ? [{ debugName: "template" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldInputTemplateComponent, isStandalone: true, selector: "rw-input-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property.name) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-table-column-filter-element', imports: [RestWorldInputComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form()\">\r\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\r\n</form>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.FormService }] });
+            args: [{ selector: 'rw-input-template', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [RestWorldFormElementComponent], template: "@for (property of template().properties; track property.name) {\r\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\r\n}\r\n" }]
+        }] });
 
 /**
- * Displays a table based on a search-, an edit-template and a list of items.
- * The search-template is required and used to display the table columns and to filter and sort the items.
- * The edit-template is optional and used to edit the items. For the edit capability, the table must be part of a reactive form.
- * The items are displayed as table rows.
- * The table supports lazy loading, row selection, row menus, and context menus.
- *
+ * A form with Save, Reload and Delete buttons.
+ * If you do not want buttons, use RestWorldFormTemplateComponent <rw-form-template>.
+ * You can also provide your own buttons by passing in a template.
  * @example
- * <rw-table
- *   [apiName]="apiName"
- *   [searchTemplate]="searchTemplate"
- *   [editTemplate]="editTemplate"
- *   [rows]="rows"
- *   [rowsPerPageOptions]="[10, 25, 50]"
- *   [headerMenu]="headerMenu"
- *   [rowMenu]="rowMenu"
- *   [rowStyleClass]="rowStyleClass"
- *   [cellStyleClass]="cellStyleClass"
- *   [totalRecords]="totalRecords"
- *   [multiSortMeta]="multiSortMeta"
- *   [styleClass]="styleClass"
- *   [tableStyle]="tableStyle"
- *   [scrollable]="scrollable"
- *   [scrollHeight]="scrollHeight"
- *   [selectionMode]="selectionMode"
- *   [rowHover]="rowHover"
- *   [selection]="selection"
- *   [contextMenuItems]="contextMenuItems"
- *   [isLoading]="isLoading"
- *   [(selectedRows)]="selectedRows"
- *   [(oDataParameters)]="oDataParameters"
- * </rw-table>
- *
- */
-class RestWorldTableComponent {
-    _controlContainer;
-    _formService;
-    PropertyType = PropertyType;
-    /**
-     * The name of the api.
-     * For the editing capability, you must also set the editTemplate and the formArray.
-     */
-    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
-    /**
-     * A function that returns the style class for a cell.
-     * @param row The row for which to return the style class.
-     * @param column The column for which to return the style class.
-     * @param rowIndex The index of the row on the currently displayed page.
-     * @param columnIndex The index of the column.
-     * @returns The style class for the cell.
-     */
-    cellStyleClass = input(() => "", ...(ngDevMode ? [{ debugName: "cellStyleClass" }] : []));
-    cellStyleClasses = computed(() => this.rows().map((r, ri) => Object.fromEntries(this.columns().map((c, ci) => [c.name, this.cellStyleClass()(r, c, ri, ci)]))), ...(ngDevMode ? [{ debugName: "cellStyleClasses" }] : []));
-    columns = computed(() => this.searchTemplate()?.properties.filter(p => p.type !== PropertyType.Hidden) ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    contextMenu = viewChild("contextMenu", ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
-    contextMenuItems = signal([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : []));
-    dateFormat = new Date(3333, 10, 22) // months start at 0 in JS
-        .toLocaleDateString()
-        .replace("22", "dd")
-        .replace("11", "MM")
-        .replace("3333", "yy")
-        .replace("33", "y");
-    editProperties = computed(() => this.editTemplate()?.propertiesRecord ?? {}, ...(ngDevMode ? [{ debugName: "editProperties" }] : []));
+ * <rw-form
+ *  [template]="template"
+ *  apiName="apiName"
+ *  rel="rel"
+ *  [allowSubmit]="true"
+ *  [allowDelete]="true"
+ *  [allowReload]="true"
+ *  [showSubmit]="true"
+ *  [showDelete]="true"
+ *  [showReload]="true">
+ *  <ng-template #content let-form="form" let-template="template" let-apiName="apiName">
+ *    <!-- Custom form content here -->
+ *    <!-- This is optional and will replace the default which renders labels and inputs if present -->
+ *  </ng-template>
+ *  <ng-template #buttons let-form="form" let-template="template" let-apiName="apiName">
+ *    <!-- Custom buttons here -->
+ *    <!-- This is optional and will replace the default which renders the Save, Reload and Delete buttons if present -->
+ *  </ng-template>
+ * </rw-form>
+ */
+class RestWorldFormComponent {
+    _clients;
+    _confirmationService;
+    _messageService;
+    _formService;
+    _elementRef;
+    _problemService;
     /**
-     * The template that is used to edit the items.
-     * Bind this to the template that is used to edit the items.
-     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
-     * For the editing capability, you must also set the apiName and the formArray.
+     * Emitted after the resource has been deleted.
      */
-    editTemplate = input(...(ngDevMode ? [undefined, { debugName: "editTemplate" }] : []));
-    filters = computed(() => {
-        const filter = this.oDataParameters().$filter;
-        const properties = this.searchTemplate()?.propertiesRecord;
-        if (filter === null || filter === undefined || typeof filter !== "string" || properties === undefined)
-            return {};
-        return ODataService.createFilterMetadataFromODataFilter(filter, properties);
-    }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    afterDelete = output();
     /**
-     * The form array that contains the form groups for the items.
-     * Bind this to the form array that contains the form groups for the items.
-     * Each entry in the array represents one row in the currently displayed page of the table.
-     * For the editing capability, you must also set the apiName and the editTemplate.
+     * Emitted after the form has been submitted.
      */
-    formArray = computed(() => this._controlContainer?.control, ...(ngDevMode ? [{ debugName: "formArray" }] : []));
+    afterSubmit = output();
     /**
-     * An optional menu that is displayed at the top right of the table.
-     * @see RestWorldMenuButtonComponent
-     */
-    headerMenu = input([], ...(ngDevMode ? [{ debugName: "headerMenu" }] : []));
-    isEditable = computed(() => this.editTemplate() !== undefined && this.formArray() !== undefined && this.apiName() !== undefined, ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
+     * Determines whether to enable the delete button.
+    */
+    allowDelete = input(true, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
     /**
-     * Indicates whether the table is currently loading.
-     * Set this to true while loading new items from the backend when reacting to the `onFilterOrSortChanged` event.
-     */
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+     * Determines whether to enable the reload button.
+    */
+    allowReload = input(true, ...(ngDevMode ? [{ debugName: "allowReload" }] : []));
     /**
-     * Indicates whether the table is lazy loaded.
-     * If set to true, sorting and filtering needs to be handled by the `load` event.
-     * If set to false, sorting and filtering is handled by the table component itself.
-     * The default is `true`.
-     * @see load
-     */
-    lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
+     * Determines whether to enable the submit button.
+    */
+    allowSubmit = input(true, ...(ngDevMode ? [{ debugName: "allowSubmit" }] : []));
     /**
-     * Indicates whether the table has a paginator.
-     * If set to true, the table will display a paginator at the bottom.
-     * If set to false, the table will not display a paginator and all rows will be displayed at once.
-     * The default is `true`.
-     * In order to customize the number of rows per page, you can set the `rowsPerPageOptions` property.
-     * @see rowsPerPageOptions
+     * The name of the API to use.
      */
-    paginator = input(true, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
-    multiSortMeta = computed(() => {
-        const orderBy = this.oDataParameters().$orderby;
-        if (orderBy === null || orderBy === undefined || typeof orderBy !== "string")
-            return undefined;
-        return orderBy
-            .split(",")
-            .map(o => o.trim())
-            .filter(o => o !== "")
-            .map(o => {
-            const [field, order] = o.split(" ");
-            const orderAsNumber = order?.toLowerCase() === "desc" ? -1 : 1;
-            return { field: field, order: orderAsNumber };
-        });
-    }, ...(ngDevMode ? [{ debugName: "multiSortMeta" }] : []));
-    oDataParameters = model({}, ...(ngDevMode ? [{ debugName: "oDataParameters" }] : []));
-    reflectParametersInUrl = input(true, ...(ngDevMode ? [{ debugName: "reflectParametersInUrl" }] : []));
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
-     * Indicates whether the table rows are highlighted when the mouse hovers over them.
+     * Determines whether the resource can be deleted.
      */
-    rowHover = input(false, ...(ngDevMode ? [{ debugName: "rowHover" }] : []));
-    /**
-     * A function that returns the menu for a row.
-     * Based on the openedByRightClick parameter, the function can return different menus.
-     * The menu when it has not been opened by a right click is displayed in an extra column to the right of the table if `showRowMenuAsColumn` is `true`.
-     * The menu when it has been opened by a right click is displayed as a context menu if `showRowMenuOnRightClick` is `true`.
-     * @param row The row for which to return the menu.
-     * @param openedByRightClick Indicates whether the menu was opened by a right click.
-     * @returns The menu for the row.
-     * @see showRowMenuAsColumn
-     * @see showRowMenuOnRightClick
-    */
-    rowMenu = input(() => [], ...(ngDevMode ? [{ debugName: "rowMenu" }] : []));
-    rowMenus = computed(() => {
-        return this.showRowMenuAsColumn() ? this.rows().map(r => this.rowMenu()(r, false)) : [];
-    }, ...(ngDevMode ? [{ debugName: "rowMenus" }] : []));
+    canDelete = computed(() => this.allowDelete() &&
+        this.template() !== undefined &&
+        this.template().target !== undefined &&
+        this.template().method == "PUT" &&
+        this.formGroup() !== undefined &&
+        this.formGroup()?.value.id !== undefined &&
+        this.formGroup()?.value.timestamp !== undefined &&
+        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
     /**
-     * A function that returns the style class for a row.
-     * @param row The row for which to return the style class.
-     * @param rowIndex The index of the row on the currently displayed page.
-     * @returns The style class for the row.
+     * Determines whether the form can be reloaded.
      */
-    rowStyleClass = input(() => "", ...(ngDevMode ? [{ debugName: "rowStyleClass" }] : []));
-    rowStyleClasses = computed(() => this.rows().map((r, i) => this.rowStyleClass()(r, i)), ...(ngDevMode ? [{ debugName: "rowStyleClasses" }] : []));
+    canReload = computed(() => this.allowReload() &&
+        this.template() !== undefined &&
+        this.template().target !== undefined &&
+        this.template().title !== undefined &&
+        this.template().properties.some(p => p.name === "id" && p.value !== undefined && p.value !== null && p.value !== 0) &&
+        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canReload" }] : []));
     /**
-     * The items that are displayed as table rows.
-     * Bind this to the items that are displayed as table rows.
-     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
+     * Determines whether the form can be submitted.
      */
-    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
-    rowsBeforeCurrentPage = computed(() => this.oDataParameters().$skip ?? 0, ...(ngDevMode ? [{ debugName: "rowsBeforeCurrentPage" }] : []));
+    canSubmit = computed(() => this.allowSubmit() &&
+        this.template() !== undefined &&
+        this.template().target !== undefined &&
+        !this.isLoading() &&
+        this.formGroup() !== undefined, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
     /**
-     * The number of rows per page.
-     * The default is the first element of rowsPerPageOptions.
+     * The form group that represents the form.
      */
-    rowsPerPage = computed(() => this.oDataParameters().$top ?? this.rowsPerPageOptions()[0], ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : []));
+    formGroup = computed(() => this._formService.createFormGroupFromTemplate(this.template()), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /**
-     * The possible values for the number of rows per page.
-     * The default is [10, 25, 50].
+     * The rel of the form.
      */
-    rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
+    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
     /**
-     * The height of the scrollable table.
-     * The default is "flex".
-     */
-    scrollHeight = input("flex", ...(ngDevMode ? [{ debugName: "scrollHeight" }] : []));
+     * Determines whether to show the delete button.
+    */
+    showDelete = input(true, ...(ngDevMode ? [{ debugName: "showDelete" }] : []));
     /**
-     * Indicates whether the table is scrollable.
-     * The default is `true`.
-     */
-    scrollable = input(true, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
+     * Determines whether to show the reload button.
+    */
+    showReload = input(true, ...(ngDevMode ? [{ debugName: "showReload" }] : []));
     /**
-     * The template that is used to display the table columns and to filter and sort the items.
-     * Bind this to the template that is used to display the table columns and to filter and sort the items.
-     * Normally this is returned from the backend as part of the hal-forms resource from a list endpoint.
-     */
-    searchTemplate = input.required(...(ngDevMode ? [{ debugName: "searchTemplate" }] : []));
+     * Determines whether to show the submit button.
+    */
+    showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : []));
     /**
-     * The currently selected rows.
+     * The template used to render the form.
      */
-    selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    template = model.required(...(ngDevMode ? [{ debugName: "template" }] : []));
     /**
-     * The mode how rows can be selected.
-     * The default is `null` which means rows cannot be selected.
+     * Emitted when the form value changes.
      */
-    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
-    showMenuColumn = computed(() => this.headerMenu().length > 0 || (this.showRowMenuAsColumn() && this.rowMenus().some(m => m.length > 0)), ...(ngDevMode ? [{ debugName: "showMenuColumn" }] : []));
+    valueChanges = output();
     /**
-     * Indicates whether the row menu is displayed as a column to the right of the table.
-     */
-    showRowMenuAsColumn = input(true, ...(ngDevMode ? [{ debugName: "showRowMenuAsColumn" }] : []));
+     * A reference to a template that can be used to render custom buttons for the form.
+    */
+    buttonsRef = contentChild('buttons', ...(ngDevMode ? [{ debugName: "buttonsRef" }] : []));
     /**
-     * Indicates whether the row menu is displayed as a context menu when the user right clicks on a row.
-     */
-    showRowMenuOnRightClick = input(true, ...(ngDevMode ? [{ debugName: "showRowMenuOnRightClick" }] : []));
+     * A reference to a template that can be used to render content before the default buttons.
+    */
+    beforeButtonsRef = contentChild('beforeButtons', ...(ngDevMode ? [{ debugName: "beforeButtonsRef" }] : []));
     /**
-     * The style class for the table.
-     * The default is "".
-     */
-    styleClass = input("", ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+     * A reference to a template that can be used to render content after the default buttons.
+    */
+    afterButtonsRef = contentChild('afterButtons', ...(ngDevMode ? [{ debugName: "afterButtonsRef" }] : []));
     /**
-     * The inline style for the table.
-     */
-    tableStyle = input(...(ngDevMode ? [undefined, { debugName: "tableStyle" }] : []));
-    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
-    urlParameterPrefix = input("", ...(ngDevMode ? [{ debugName: "urlParameterPrefix" }] : []));
-    //   private _formArray?: FormArray<FormGroup<{ [K in keyof TListItem]: AbstractControl<unknown> }>>;
-    _filterMatchModeOptions;
-    timeFormat = new Date(1, 1, 1, 22, 33, 44)
-        .toLocaleTimeString()
-        .replace("22", "hh")
-        .replace("33", "mm")
-        .replace("44", "ss");
-    _initialQueryParamsSet = false;
-    _lastUsedFilters = {};
-    constructor(_controlContainer, _formService, router, activatedRoute, primeNGConfig) {
-        this._controlContainer = _controlContainer;
-        this._formService = _formService;
-        this._filterMatchModeOptions = {
-            text: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.text].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
-            numeric: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.numeric].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
-            date: [TranslationKeys.NO_FILTER, ...primeNGConfig.filterMatchModeOptions.date].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
-            boolean: [TranslationKeys.NO_FILTER, TranslationKeys.EQUALS, TranslationKeys.NOT_EQUALS].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
-            enum: [TranslationKeys.NO_FILTER, TranslationKeys.EQUALS, TranslationKeys.NOT_EQUALS].map(o => ({ label: primeNGConfig.getTranslation(o), value: o })),
-        };
-        // Update the form array on changes
-        effect(() => {
-            const formArray = this.formArray();
-            const editTemplate = this.editTemplate();
-            const rows = this.rows();
-            if (!this.isEditable() || !formArray || !editTemplate)
-                return;
-            formArray.clear();
-            const newControls = rows
-                .map(r => {
-                const formGroup = this._formService.createFormGroupFromTemplate(editTemplate);
-                formGroup.patchValue(r);
-                return formGroup;
-            });
-            for (const control of newControls)
-                formArray.push(control);
-        });
-        // update the url when the oDataParameters change
-        effect(async () => {
-            if (!this.reflectParametersInUrl())
-                return;
-            const urlParameterPrefix = this.urlParameterPrefix();
-            const oDataParameters = this.oDataParameters();
-            // Set the initial query parameters on the first change
-            if (!this._initialQueryParamsSet) {
-                this._initialQueryParamsSet = true;
-                const oDataParametersFromUrl = ODataService.createParametersFromRoute(activatedRoute, urlParameterPrefix);
-                const mergedParameters = { ...oDataParameters, ...oDataParametersFromUrl };
-                this.oDataParameters.set(mergedParameters);
-                return;
-            }
-            // Update the query parameters in the url after the first change
-            const parameters = this.prefixObjectProperties(oDataParameters, urlParameterPrefix);
-            await router.navigate([], { queryParams: parameters, queryParamsHandling: 'merge' });
+     * A reference to a template that can be used to render custom content inside the <form> element instead of the default form.
+    */
+    contentRef = contentChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : []));
+    _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
+    _formValueChangesSubscription;
+    constructor(_clients, _confirmationService, _messageService, _formService, _elementRef, _problemService) {
+        this._clients = _clients;
+        this._confirmationService = _confirmationService;
+        this._messageService = _messageService;
+        this._formService = _formService;
+        this._elementRef = _elementRef;
+        this._problemService = _problemService;
+        // Update the form value changes subscription to always track the current form group.
+        effect(() => {
+            this._formValueChangesSubscription?.unsubscribe();
+            const formGroup = this.formGroup();
+            this._formValueChangesSubscription = formGroup?.valueChanges.subscribe(newValue => this.valueChanges.emit(newValue));
+            this.valueChanges.emit(formGroup?.value);
         });
     }
-    load(event) {
-        this.fixUserFilterErrors(event.filters);
-        // this.multiSortMeta = event.multiSortMeta;
-        const currentParameters = this.oDataParameters();
-        const searchTemplate = this.searchTemplate();
-        if (!searchTemplate || searchTemplate.properties.length === 0)
-            return;
-        const parameters = ODataService.createParametersFromTableLoadEvent(event, searchTemplate);
-        ODataService.createFilterMetadataFromODataFilter(parameters.$filter, searchTemplate.propertiesRecord);
-        if (currentParameters.$filter !== parameters.$filter || currentParameters.$orderby !== parameters.$orderby || currentParameters.$top !== parameters.$top || currentParameters.$skip !== parameters.$skip)
-            this.oDataParameters.set(parameters);
-    }
-    openContextMenu(event, row) {
-        const contextMenu = this.contextMenu();
-        if (!this.showRowMenuOnRightClick() || contextMenu === undefined)
+    async delete() {
+        if (!this.canDelete())
             return;
-        this.contextMenuItems.set(this.rowMenu()(row, true));
-        contextMenu.show(event);
-        event.stopPropagation();
-    }
-    showInputField(column) {
-        if (!this.isEditable())
-            return false;
-        const editProperty = this.editProperties()[column.name];
-        return editProperty !== undefined && editProperty.type !== PropertyType.Hidden && !editProperty.readOnly;
-    }
-    toColumnFilterType(property) {
-        if (!property)
-            return ColumnFilterType.text;
-        const propertyType = property.type;
-        switch (propertyType) {
-            case PropertyType.Number:
-            case PropertyType.Percent:
-            case PropertyType.Currency:
-            case PropertyType.Month:
-                return ColumnFilterType.numeric;
-            case PropertyType.Bool:
-                return ColumnFilterType.boolean;
-            case PropertyType.Date:
-            case PropertyType.DatetimeLocal:
-            case PropertyType.DatetimeOffset:
-                return ColumnFilterType.date;
-            default:
-                return property.options ? property.options.link ? ColumnFilterType.numeric : ColumnFilterType.enum : ColumnFilterType.text;
-        }
-    }
-    toMatchModeOptions(property) {
-        const columnFilterType = this.toColumnFilterType(property);
-        return this._filterMatchModeOptions[columnFilterType];
-    }
-    toMaxFractionDigits(property) {
-        switch (property.type) {
-            case PropertyType.Number:
-            case PropertyType.Percent:
-            case PropertyType.Currency:
-                return property.step?.toString().split(".")[1]?.length ?? 2;
-            case PropertyType.Month:
-                return 0;
-            default:
-                return undefined;
+        const formGroup = this.formGroup();
+        if (formGroup === undefined)
+            throw new Error("formGroup cannot be undefined.");
+        const template = this.template();
+        if (template === undefined)
+            throw new Error("template cannot be undefined.");
+        // canDelete already checks that the timestamp is present, so the cast is safe.
+        const result = await this._client().deleteByTemplateAndForm(template, formGroup);
+        if (this._problemService.checkResponseAndDisplayErrors(result, formGroup)) {
+            this._messageService.add({ severity: 'success', summary: 'Deleted', detail: 'The resource has been deleted.' });
+            this.afterDelete.emit();
         }
     }
-    fixUserFilterError(filterEntry, lastFilterEntry, propertyName) {
-        if (!filterEntry)
+    async reload() {
+        const canReload = this.canReload();
+        const template = this.template();
+        if (!canReload || template === undefined)
             return;
-        if (lastFilterEntry !== undefined &&
-            lastFilterEntry.matchMode !== TranslationKeys.NO_FILTER &&
-            filterEntry.matchMode === TranslationKeys.NO_FILTER) {
-            // The user changed the mode from something to no filter
-            // => We reset the value
-            filterEntry.value = null;
+        this.isLoading.set(true);
+        try {
+            const response = await this._client().getForm(template.target);
+            if (this._problemService.checkResponseAndDisplayErrors(response, this.formGroup())) {
+                this.template.set(response.body.getTemplateByTitle(template.title));
+            }
         }
-        else if (filterEntry.matchMode === TranslationKeys.NO_FILTER &&
-            (lastFilterEntry === undefined || lastFilterEntry.value === null) &&
-            filterEntry.value !== null) {
-            // The user entered a value into the filter, but forgot to change the mode
-            // => We set the match mode to the default for the type that is not no filter
-            filterEntry.matchMode = this._filterMatchModeOptions[this.toColumnFilterType(this.searchTemplate().propertiesRecord[propertyName])][1].value;
+        catch (e) {
+            this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
+            console.log(e);
         }
+        this.isLoading.set(false);
     }
-    fixUserFilterErrors(filters) {
-        if (!filters)
+    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 submit() {
+        const formGroup = this.formGroup();
+        const template = this.template();
+        if (formGroup !== undefined) {
+            formGroup.markAllAsTouched();
+            if (!formGroup.valid) {
+                this._messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Please correct the errors before submitting.',
+                });
+                ProblemService.scrollToFirstValidationError(this._elementRef.nativeElement);
+                return;
+            }
+        }
+        if (!this.canSubmit() || formGroup === undefined || template === undefined)
             return;
-        Object.entries(filters).forEach(([propertyName, filter]) => {
-            const lastFilter = this._lastUsedFilters[propertyName];
-            if (Array.isArray(filter)) {
-                filter.forEach((filterEntry, index) => this.fixUserFilterError(filterEntry, Array.isArray(lastFilter) ? lastFilter[index] : lastFilter, propertyName));
+        this.isLoading.set(true);
+        try {
+            const response = await this._client().submit(template, formGroup.value);
+            if (!this._problemService.checkResponseAndDisplayErrors(response, formGroup, "Error while saving the resource")) {
+            }
+            else if (response.status == 201) {
+                if (!response.headers.has('Location')) {
+                    this._messageService.add({ severity: 'error', summary: 'Error', detail: 'The server returned a 201 Created response, but did not return a Location header.', data: response, sticky: true });
+                    return;
+                }
+                this._messageService.add({ severity: 'success', summary: 'Created', detail: 'The resource has been created.' });
+                var createdAtUri = response.headers.get('Location');
+                this.afterSubmit.emit({ location: createdAtUri, status: 201 });
             }
             else {
-                this.fixUserFilterError(filter, Array.isArray(lastFilter) ? lastFilter[0] : lastFilter, propertyName);
+                const responseResource = response.body;
+                const newTemplate = responseResource.getTemplateByTitle(template.title);
+                this.template.set(newTemplate);
+                this._messageService.add({ severity: 'success', summary: 'Saved', detail: 'The resource has been saved.' });
+                this.afterSubmit.emit({ old: template, new: newTemplate, status: 200 });
             }
-        });
-        this._lastUsedFilters = JSON.parse(JSON.stringify(filters));
+        }
+        catch (e) {
+            this._messageService.add({ severity: 'error', summary: 'Error', detail: `An unknown error occurred. ${JSON.stringify(e)}`, sticky: true });
+            console.log(e);
+        }
+        this.isLoading.set(false);
     }
-    prefixObjectProperties(obj, prefix) {
-        return Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${prefix}${key}`, value]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: i1$1.FormService }, { token: i0.ElementRef }, { token: ProblemService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldFormComponent, isStandalone: true, selector: "rw-form", inputs: { allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowReload: { classPropertyName: "allowReload", publicName: "allowReload", isSignal: true, isRequired: false, transformFunction: null }, allowSubmit: { classPropertyName: "allowSubmit", publicName: "allowSubmit", isSignal: true, isRequired: false, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null }, showReload: { classPropertyName: "showReload", publicName: "showReload", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { afterDelete: "afterDelete", afterSubmit: "afterSubmit", template: "templateChange", valueChanges: "valueChanges" }, queries: [{ propertyName: "buttonsRef", first: true, predicate: ["buttons"], descendants: true, isSignal: true }, { propertyName: "beforeButtonsRef", first: true, predicate: ["beforeButtons"], descendants: true, isSignal: true }, { propertyName: "afterButtonsRef", first: true, predicate: ["afterButtons"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (formGroup() !== undefined && template() !== undefined) {\n    <form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n        <div class=\"blockable-container\">\n            <div class=\"blockable-element\">\n                <div class=\"grid field\">\n                    <div class=\"col-12 md:col-10 md:col-offset-2\">\n                        <rw-validation-errors [form]=\"formGroup()\"></rw-validation-errors>\n                    </div>\n                </div>\n                <ng-template #defaultContent>\n                    <rw-input-template [template]=\"template()\" [apiName]=\"apiName()\"></rw-input-template>\n                </ng-template>\n                <ng-container\n                    *ngTemplateOutlet=\"contentRef() ?? defaultContent; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n            </div>\n            @if (isLoading()) {\n                <div class=\"blockable-overlay\">\n                    <p-progressSpinner></p-progressSpinner>\n                </div>\n            }\n        </div>\n\n        <div class=\"grid\">\n            <div class=\"col\">\n                <div class=\"flex justify-content-end w-full\">\n                    <ng-template #defaultButtons>\n                        @if (beforeButtonsRef(); as beforeButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"beforeButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                        <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                            [disabled]=\"!allowSubmit()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                            (click)=\"reload()\" [disabled]=\"!canReload()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                            class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                            [disabled]=\"!canDelete()\"></button>\n                        @if (afterButtonsRef(); as afterButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"afterButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"buttonsRef() ?? defaultButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </form>\n}\n", styles: [".blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RestWorldValidationErrorsComponent, selector: "rw-validation-errors", inputs: ["form", "property"] }, { kind: "component", type: RestWorldInputTemplateComponent, selector: "rw-input-template", inputs: ["apiName", "template"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rw-form', standalone: true, imports: [ReactiveFormsModule, RestWorldValidationErrorsComponent, RestWorldInputTemplateComponent, ProgressSpinnerModule, ButtonModule, RippleModule, NgTemplateOutlet], template: "@if (formGroup() !== undefined && template() !== undefined) {\n    <form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n        <div class=\"blockable-container\">\n            <div class=\"blockable-element\">\n                <div class=\"grid field\">\n                    <div class=\"col-12 md:col-10 md:col-offset-2\">\n                        <rw-validation-errors [form]=\"formGroup()\"></rw-validation-errors>\n                    </div>\n                </div>\n                <ng-template #defaultContent>\n                    <rw-input-template [template]=\"template()\" [apiName]=\"apiName()\"></rw-input-template>\n                </ng-template>\n                <ng-container\n                    *ngTemplateOutlet=\"contentRef() ?? defaultContent; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n            </div>\n            @if (isLoading()) {\n                <div class=\"blockable-overlay\">\n                    <p-progressSpinner></p-progressSpinner>\n                </div>\n            }\n        </div>\n\n        <div class=\"grid\">\n            <div class=\"col\">\n                <div class=\"flex justify-content-end w-full\">\n                    <ng-template #defaultButtons>\n                        @if (beforeButtonsRef(); as beforeButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"beforeButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                        <button pButton pRipple type=\"submit\" label=\"Save\" icon=\"far fa-save\" class=\"mx-2 p-button-success\"\n                            [disabled]=\"!allowSubmit()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Reload\" icon=\"fas fa-redo\" class=\"mx-2 p-button-info\"\n                            (click)=\"reload()\" [disabled]=\"!canReload()\"></button>\n                        <button pButton pRipple type=\"button\" label=\"Delete\" icon=\"far fa-trash-alt\"\n                            class=\"ml-2 p-button-danger\" (click)=\"showDeleteConfirmatioModal()\"\n                            [disabled]=\"!canDelete()\"></button>\n                        @if (afterButtonsRef(); as afterButtons) {\n                            <ng-container\n                                *ngTemplateOutlet=\"afterButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                        }\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"buttonsRef() ?? defaultButtons; context: { form: formGroup, template: template, apiName: apiName() }\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </form>\n}\n", styles: [".blockable-container{display:grid;place-items:center;grid-template-areas:\"inner\"}.blockable-element{grid-area:inner;width:100%}.blockable-overlay{grid-area:inner;height:100%;width:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1}\n"] }]
+        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: i1$1.FormService }, { type: i0.ElementRef }, { type: ProblemService }] });
+
+/**
+ * Component for navigating to a resource by its ID.
+ *
+ * @remarks
+ * This component is used to navigate to a resource by its ID. It takes in the API name, the `rel` of the resource, and an optional `urlPrefix` to use for the URL that is returned from the backend. It also provides a form for entering the ID of the resource to navigate to.
+ */
+class RestWorldIdNavigationComponent {
+    _clients;
+    _messageService;
+    _router;
+    _route;
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
+    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
+    /**
+     * A prefix to use for the URL that is returned from the backend.
+     * If none is provided, a relative navigation will be performed which means that the last part of the current URL is replaced with the one from the backend.
+     */
+    urlPrefix = input(...(ngDevMode ? [undefined, { debugName: "urlPrefix" }] : []));
+    idNavigationForm = new FormGroup({
+        id: new FormControl(null, Validators.compose([Validators.min(1), Validators.max(Number.MAX_SAFE_INTEGER)]))
+    });
+    _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
+    constructor(_clients, _messageService, _router, _route) {
+        this._clients = _clients;
+        this._messageService = _messageService;
+        this._router = _router;
+        this._route = _route;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableComponent, deps: [{ token: i2$3.ControlContainer }, { token: i1$1.FormService }, { token: i3$4.Router }, { token: i3$4.ActivatedRoute }, { token: i4$2.PrimeNG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldTableComponent, isStandalone: true, selector: "rw-table", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, cellStyleClass: { classPropertyName: "cellStyleClass", publicName: "cellStyleClass", isSignal: true, isRequired: false, transformFunction: null }, editTemplate: { classPropertyName: "editTemplate", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, oDataParameters: { classPropertyName: "oDataParameters", publicName: "oDataParameters", isSignal: true, isRequired: false, transformFunction: null }, reflectParametersInUrl: { classPropertyName: "reflectParametersInUrl", publicName: "reflectParametersInUrl", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowMenu: { classPropertyName: "rowMenu", publicName: "rowMenu", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: true, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuAsColumn: { classPropertyName: "showRowMenuAsColumn", publicName: "showRowMenuAsColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowMenuOnRightClick: { classPropertyName: "showRowMenuOnRightClick", publicName: "showRowMenuOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, urlParameterPrefix: { classPropertyName: "urlParameterPrefix", publicName: "urlParameterPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { oDataParameters: "oDataParametersChange", selectedRows: "selectedRowsChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"lazy()\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  responsiveLayout=\"scroll\"\r\n  [paginator]=\"paginator()\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [styleClass]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        <p-columnFilter #f\r\n                            [type]=\"toColumnFilterType(col.type)\"\r\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                            matchMode=\"noFilter\"\r\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                            [showMatchModes]=\"true\"\r\n                            [field]=\"col.name\"\r\n                            display=\"menu\"\r\n                            [maxConstraints]=\"100\"\r\n                            [class.has-filter]=\"f.hasFilter\">\r\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                        </ng-template>\r\n                        </p-columnFilter>\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\r\n        @for (col of columns; track col) {\r\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\r\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                    </ng-container>\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter, p-column-filter, 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", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldMenuButtonComponent, selector: "rw-menu-button", inputs: ["items"] }, { kind: "component", type: RestWorldInputComponent, selector: "rw-input" }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldTableColumnFilterElementComponent, selector: "rw-table-column-filter-element", inputs: ["filterConstraint", "property", "apiName", "value"] }], viewProviders: [{
-                provide: ControlContainer,
-                deps: [[Optional, FormArrayName]],
-                useFactory: (arrayName) => arrayName,
-            }] });
+    async navigateById() {
+        const rel = this.rel();
+        if (!rel)
+            throw new Error('The "rel" must be set through the uri of this page for the ID navigation to work.');
+        if (!this.idNavigationForm.valid) {
+            this._messageService.add({ detail: 'You must enter a valid ID to naviage to.', severity: 'error' });
+            return;
+        }
+        var idToNavigateTo = this.idNavigationForm.controls.id.value;
+        var client = this._client();
+        var response = await client.getList(rel, { $filter: `id eq ${idToNavigateTo}` });
+        if (!response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body) {
+            this._messageService.add({ severity: 'error', summary: 'Error', detail: 'Error while loading the resources from the API.', data: response });
+            return;
+        }
+        var resource = response.body?._embedded?.items?.[0];
+        if (!resource) {
+            this._messageService.add({ severity: 'error', summary: 'Error', detail: 'No resource found with the specified ID.' });
+            return;
+        }
+        const urlPrefix = this.urlPrefix();
+        if (urlPrefix !== undefined)
+            await this._router.navigate([urlPrefix, resource._links.self[0].href]);
+        else
+            await this._router.navigate(["..", resource._links.self[0].href], { relativeTo: this._route });
+        this.idNavigationForm.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldIdNavigationComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.MessageService }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldIdNavigationComponent, isStandalone: true, selector: "rw-id-navigation", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, urlPrefix: { classPropertyName: "urlPrefix", publicName: "urlPrefix", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldIdNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-table', standalone: true, viewProviders: [{
-                            provide: ControlContainer,
-                            deps: [[Optional, FormArrayName]],
-                            useFactory: (arrayName) => arrayName,
-                        }], imports: [TableModule, RestWorldMenuButtonComponent, RestWorldInputComponent, RestWorldDisplayComponent, ReactiveFormsModule, ContextMenuModule, RestWorldTableColumnFilterElementComponent, RestWorldTableColumnFilterElementComponent], template: "<p-table\r\n  #table\r\n  [value]=\"rows()\"\r\n  [columns]=\"columns()\"\r\n  [lazy]=\"lazy()\"\r\n  [lazyLoadOnInit]=\"false\"\r\n  (onLazyLoad)=\"load($event)\"\r\n  responsiveLayout=\"scroll\"\r\n  [paginator]=\"paginator()\"\r\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n  [rows]=\"rowsPerPage()\"\r\n  [totalRecords]=\"totalRecords()\"\r\n  [loading]=\"isLoading()\"\r\n  sortMode=\"multiple\"\r\n  [multiSortMeta]=\"multiSortMeta()\"\r\n  [styleClass]=\"styleClass()\"\r\n  [tableStyle]=\"tableStyle()\"\r\n  [scrollable]=\"scrollable()\"\r\n  [scrollHeight]=\"scrollHeight()\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [rowHover]=\"rowHover()\"\r\n  [(selection)]=\"selectedRows\"\r\n  [filters]=\"$any(filters())\"\r\n  [first]=\"rowsBeforeCurrentPage()\"\r\n  >\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n        @for (col of columns; track col) {\r\n            <th [pSortableColumn]=\"col.name\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\r\n                    {{col.prompt}}\r\n                    @if(!col.readOnly) {\r\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n                        <p-columnFilter #f\r\n                            [type]=\"toColumnFilterType(col.type)\"\r\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\r\n                            matchMode=\"noFilter\"\r\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\r\n                            [showMatchModes]=\"true\"\r\n                            [field]=\"col.name\"\r\n                            display=\"menu\"\r\n                            [maxConstraints]=\"100\"\r\n                            [class.has-filter]=\"f.hasFilter\">\r\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\r\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\r\n                        </ng-template>\r\n                        </p-columnFilter>\r\n                    }\r\n                </div>\r\n            </th>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <th>\r\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\r\n            </th>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\r\n        @for (col of columns; track col) {\r\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\r\n                @let fomrArray = formArray();\r\n                @if (showInputField(col) && fomrArray) {\r\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\r\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\r\n                    </ng-container>\r\n                }\r\n                @else {\r\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\r\n                }\r\n            </td>\r\n        }\r\n        @if (showMenuColumn()) {\r\n            <td>\r\n                @if (showRowMenuAsColumn()) {\r\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\r\n                }\r\n            </td>\r\n        }\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}::ng-deep rw-table rw-label.md\\:col-2{width:100%;font-weight:600}::ng-deep rw-table .p-d-flex{display:flex}::ng-deep rw-table .p-ai-center{align-items:center}::ng-deep rw-table .has-filter filtericon{color:var(--p-datatable-header-cell-selected-color)}::ng-deep rw-table p-columnfilter .p-datatable-column-filter-button{width:unset;height:23px!important;padding-block-end:0;padding-block-start:0}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.ControlContainer }, { type: i1$1.FormService }, { type: i3$4.Router }, { type: i3$4.ActivatedRoute }, { type: i4$2.PrimeNG }] });
-var ColumnFilterType;
-(function (ColumnFilterType) {
-    ColumnFilterType["text"] = "text";
-    ColumnFilterType["numeric"] = "numeric";
-    ColumnFilterType["boolean"] = "boolean";
-    ColumnFilterType["date"] = "date";
-    ColumnFilterType["enum"] = "enum";
-})(ColumnFilterType || (ColumnFilterType = {}));
+            args: [{ selector: 'rw-id-navigation', standalone: true, imports: [InputNumberModule, ButtonModule, ReactiveFormsModule], template: "<form [formGroup]=\"idNavigationForm\" (ngSubmit)=\"navigateById()\" class=\"mr-3\">\n  <div class=\"p-inputgroup\">\n    <p-inputNumber formControlName=\"id\" placeholder=\"Navigate by ID\"></p-inputNumber>\n    <button type=\"submit\" pButton pRipple icon=\"fa-solid fa-arrow-right\"></button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.MessageService }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }] });
 
 class RestWorldOptions {
     BaseUrl;
@@ -4677,7 +4743,7 @@ class OpenTelemetryService {
     getTracer() {
         return this._tracer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, deps: [{ token: SettingsService }, { token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, deps: [{ token: SettingsService }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, providedIn: "root" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, decorators: [{
@@ -4685,7 +4751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
             args: [{
                     providedIn: "root"
                 }]
-        }], ctorParameters: () => [{ type: SettingsService }, { type: i3$4.Router }] });
+        }], ctorParameters: () => [{ type: SettingsService }, { type: i3$3.Router }] });
 
 /**
 * Component for editing a resource in the RESTworld application.
@@ -4707,14 +4773,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class RESTworldEditViewComponent {
     _clients;
     _messageService;
+    _problemService;
     _router;
     extraTabsRef;
     idNavigationForm = new FormGroup({
         id: new FormControl(null, Validators.compose([Validators.min(1), Validators.max(Number.MAX_SAFE_INTEGER)]))
     });
-    constructor(_clients, _messageService, _router, valdemortConfig) {
+    constructor(_clients, _messageService, _problemService, _router, valdemortConfig) {
         this._clients = _clients;
         this._messageService = _messageService;
+        this._problemService = _problemService;
         this._router = _router;
         valdemortConfig.errorClasses = "p-error text-sm";
     }
@@ -4733,9 +4801,19 @@ class RESTworldEditViewComponent {
     * The name of the API to load the resource from.
     */
     apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
+    newHref = computed(() => this.resource.value()?.findLink('new')?.href, ...(ngDevMode ? [{ debugName: "newHref" }] : []));
     templates = resource({
+        params: () => ({ apiName: this.apiName(), resource: this.resource.value() }),
+        loader: ({ params }) => this.loadTemplatesInternal(params.apiName, params.resource)
+    });
+    resource = resource({
         params: () => ({ apiName: this.apiName(), uri: this.uri() }),
-        loader: ({ params }) => this.loadInternal(params.apiName, params.uri)
+        loader: async ({ params }) => {
+            const client = this._clients.getClient(params.apiName);
+            const resourceResponse = await client.getSingleByUri(params.uri);
+            this._problemService.checkResponseDisplayErrorsAndThrow(resourceResponse);
+            return resourceResponse.body;
+        }
     });
     displayTab = model("Loading", ...(ngDevMode ? [{ debugName: "displayTab" }] : []));
     async afterSubmit($event) {
@@ -4744,14 +4822,17 @@ class RESTworldEditViewComponent {
         }
     }
     async afterDelete() {
-        await this._router.navigate(["list", this.apiName, this.rel()]);
+        await this._router.navigate(["list", this.apiName(), this.rel()]);
+    }
+    createNew() {
+        return this._router.navigate(["edit", this.apiName(), this.rel(), this.newHref()]);
     }
-    async loadInternal(apiName, uri) {
-        if (!apiName || !uri)
+    async loadTemplatesInternal(apiName, resource) {
+        if (!apiName || !resource)
             return [];
         try {
             const client = this._clients.getClient(apiName);
-            const templatesOrProblemDetails = await client.getAllTemplatesByUri(uri);
+            const templatesOrProblemDetails = await client.getAllTemplates(resource);
             // Check if we got ProblemDetails instead of Templates
             if (ProblemDetails.isProblemDetails(templatesOrProblemDetails)) {
                 this._messageService.add({
@@ -4778,13 +4859,13 @@ class RESTworldEditViewComponent {
             return [];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.MessageService }, { token: i3$4.Router }, { token: i4$3.ValdemortConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RESTworldEditViewComponent, isStandalone: true, selector: "rw-edit", inputs: { rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, uri: { classPropertyName: "uri", publicName: "uri", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, displayTab: { classPropertyName: "displayTab", publicName: "displayTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayTab: "displayTabChange" }, queries: [{ propertyName: "extraTabsRef", first: true, predicate: ["extraTabs"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n    <div class=\"col-12 md:col-10\">\r\n        <h1>Edit resource</h1>\r\n    </div>\r\n    <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n        <rw-id-navigation [apiName]=\"apiName()\" [rel]=\"rel()\"></rw-id-navigation>\r\n    </div>\r\n</div>\r\n\r\n<p-tabs [(value)]=\"displayTab\">\r\n    <p-tablist>\r\n        @if (templates.isLoading()) {\r\n            <p-tab value=\"Loading\">Loading</p-tab>\r\n        }\r\n        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tab [value]=\"template.title ?? i\">{{template.title}}</p-tab>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tab value=\"Extra\">Extra</p-tab>\r\n            }\r\n        }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n        @if (templates.isLoading()) {\r\n            <p-tabpanel value=\"Loading\">\r\n                @for(i of [1, 2, 3, 4, 5]; track i) {\r\n                    <div 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                }\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        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tabpanel [value]=\"template.title ?? i\">\r\n                    <rw-form\r\n                        [template]=\"template\"\r\n                        [apiName]=\"apiName()\"\r\n                        [rel]=\"rel()\"\r\n                        (afterDelete)=\"afterDelete()\"\r\n                        (afterSubmit)=\"afterSubmit($event)\"\r\n                        ></rw-form>\r\n                </p-tabpanel>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tabpanel value=\"Extra\">\r\n                    <ng-container *ngTemplateOutlet=\"extraTabsRef\"></ng-container>\r\n                </p-tabpanel>\r\n            }\r\n        }\r\n    </p-tabpanels>\r\n</p-tabs>\r\n\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: ["::ng-deep .p-tooltip{max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "component", type: RestWorldIdNavigationComponent, selector: "rw-id-navigation", inputs: ["apiName", "rel", "urlPrefix"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i5$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6$1.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6$1.TabList, selector: "p-tablist" }, { kind: "component", type: i6$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: RestWorldFormComponent, selector: "rw-form", inputs: ["allowDelete", "allowReload", "allowSubmit", "apiName", "rel", "showDelete", "showReload", "showSubmit", "template"], outputs: ["afterDelete", "afterSubmit", "templateChange", "valueChanges"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldEditViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.MessageService }, { token: ProblemService }, { token: i3$3.Router }, { token: i5.ValdemortConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RESTworldEditViewComponent, isStandalone: true, selector: "rw-edit", inputs: { rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: true, transformFunction: null }, uri: { classPropertyName: "uri", publicName: "uri", isSignal: true, isRequired: true, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, displayTab: { classPropertyName: "displayTab", publicName: "displayTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayTab: "displayTabChange" }, queries: [{ propertyName: "extraTabsRef", first: true, predicate: ["extraTabs"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n    <div class=\"col-12 md:col-10\">\r\n        <h1>Edit resource</h1>\r\n    </div>\r\n    <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n        <rw-id-navigation [apiName]=\"apiName()\" [rel]=\"rel()\"></rw-id-navigation>\r\n        @if (newHref()) {\r\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-success mr-3\" (click)=\"createNew()\" pTooltip=\"Create new\"></button>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<p-tabs [(value)]=\"displayTab\">\r\n    <p-tablist>\r\n        @if (templates.isLoading()) {\r\n            <p-tab value=\"Loading\">Loading</p-tab>\r\n        }\r\n        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tab [value]=\"template.title ?? i\">{{template.title}}</p-tab>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tab value=\"Extra\">Extra</p-tab>\r\n            }\r\n        }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n        @if (templates.isLoading()) {\r\n            <p-tabpanel value=\"Loading\">\r\n                @for(i of [1, 2, 3, 4, 5]; track i) {\r\n                    <div 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                }\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        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tabpanel [value]=\"template.title ?? i\">\r\n                    <rw-form\r\n                        [template]=\"template\"\r\n                        [apiName]=\"apiName()\"\r\n                        [rel]=\"rel()\"\r\n                        (afterDelete)=\"afterDelete()\"\r\n                        (afterSubmit)=\"afterSubmit($event)\"\r\n                        ></rw-form>\r\n                </p-tabpanel>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tabpanel value=\"Extra\">\r\n                    <ng-container *ngTemplateOutlet=\"extraTabsRef\"></ng-container>\r\n                </p-tabpanel>\r\n            }\r\n        }\r\n    </p-tabpanels>\r\n</p-tabs>\r\n\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: ["::ng-deep .p-tooltip{max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "component", type: RestWorldIdNavigationComponent, selector: "rw-id-navigation", inputs: ["apiName", "rel", "urlPrefix"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i7$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.TabList, selector: "p-tablist" }, { kind: "component", type: i7$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: RestWorldFormComponent, selector: "rw-form", inputs: ["allowDelete", "allowReload", "allowSubmit", "apiName", "rel", "showDelete", "showReload", "showSubmit", "template"], outputs: ["afterDelete", "afterSubmit", "templateChange", "valueChanges"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i8$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldEditViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rw-edit", standalone: true, imports: [RestWorldIdNavigationComponent, SkeletonModule, TabsModule, RestWorldFormComponent, ConfirmDialogModule, NgTemplateOutlet], template: "<div class=\"grid\">\r\n    <div class=\"col-12 md:col-10\">\r\n        <h1>Edit resource</h1>\r\n    </div>\r\n    <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n        <rw-id-navigation [apiName]=\"apiName()\" [rel]=\"rel()\"></rw-id-navigation>\r\n    </div>\r\n</div>\r\n\r\n<p-tabs [(value)]=\"displayTab\">\r\n    <p-tablist>\r\n        @if (templates.isLoading()) {\r\n            <p-tab value=\"Loading\">Loading</p-tab>\r\n        }\r\n        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tab [value]=\"template.title ?? i\">{{template.title}}</p-tab>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tab value=\"Extra\">Extra</p-tab>\r\n            }\r\n        }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n        @if (templates.isLoading()) {\r\n            <p-tabpanel value=\"Loading\">\r\n                @for(i of [1, 2, 3, 4, 5]; track i) {\r\n                    <div 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                }\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        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tabpanel [value]=\"template.title ?? i\">\r\n                    <rw-form\r\n                        [template]=\"template\"\r\n                        [apiName]=\"apiName()\"\r\n                        [rel]=\"rel()\"\r\n                        (afterDelete)=\"afterDelete()\"\r\n                        (afterSubmit)=\"afterSubmit($event)\"\r\n                        ></rw-form>\r\n                </p-tabpanel>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tabpanel value=\"Extra\">\r\n                    <ng-container *ngTemplateOutlet=\"extraTabsRef\"></ng-container>\r\n                </p-tabpanel>\r\n            }\r\n        }\r\n    </p-tabpanels>\r\n</p-tabs>\r\n\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: ["::ng-deep .p-tooltip{max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"] }]
-        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.MessageService }, { type: i3$4.Router }, { type: i4$3.ValdemortConfig }], propDecorators: { extraTabsRef: [{
+            args: [{ selector: "rw-edit", standalone: true, imports: [RestWorldIdNavigationComponent, SkeletonModule, TabsModule, RestWorldFormComponent, ConfirmDialogModule, NgTemplateOutlet, ButtonDirective, Tooltip], template: "<div class=\"grid\">\r\n    <div class=\"col-12 md:col-10\">\r\n        <h1>Edit resource</h1>\r\n    </div>\r\n    <div class=\"col-12 md:col-2 align-items-center justify-content-end flex\">\r\n        <rw-id-navigation [apiName]=\"apiName()\" [rel]=\"rel()\"></rw-id-navigation>\r\n        @if (newHref()) {\r\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-success mr-3\" (click)=\"createNew()\" pTooltip=\"Create new\"></button>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<p-tabs [(value)]=\"displayTab\">\r\n    <p-tablist>\r\n        @if (templates.isLoading()) {\r\n            <p-tab value=\"Loading\">Loading</p-tab>\r\n        }\r\n        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tab [value]=\"template.title ?? i\">{{template.title}}</p-tab>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tab value=\"Extra\">Extra</p-tab>\r\n            }\r\n        }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n        @if (templates.isLoading()) {\r\n            <p-tabpanel value=\"Loading\">\r\n                @for(i of [1, 2, 3, 4, 5]; track i) {\r\n                    <div 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                }\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        @else {\r\n            @for (template of templates.value(); track template; let i = $index) {\r\n                <p-tabpanel [value]=\"template.title ?? i\">\r\n                    <rw-form\r\n                        [template]=\"template\"\r\n                        [apiName]=\"apiName()\"\r\n                        [rel]=\"rel()\"\r\n                        (afterDelete)=\"afterDelete()\"\r\n                        (afterSubmit)=\"afterSubmit($event)\"\r\n                        ></rw-form>\r\n                </p-tabpanel>\r\n            }\r\n            @if (extraTabsRef) {\r\n                <p-tabpanel value=\"Extra\">\r\n                    <ng-container *ngTemplateOutlet=\"extraTabsRef\"></ng-container>\r\n                </p-tabpanel>\r\n            }\r\n        }\r\n    </p-tabpanels>\r\n</p-tabs>\r\n\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: ["::ng-deep .p-tooltip{max-width:fit-content!important}.field.grid>label.hasChildren{border-right:1px solid rgba(0,0,0,.1)}\n"] }]
+        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.MessageService }, { type: ProblemService }, { type: i3$3.Router }, { type: i5.ValdemortConfig }], propDecorators: { extraTabsRef: [{
                 type: ContentChild,
                 args: ["extraTabs", { static: false }]
             }] } });
@@ -4976,13 +5057,13 @@ class RESTworldListViewComponent {
             return undefined;
         return this._clients.getClient(apiName);
     }, ...(ngDevMode ? [{ debugName: "_client" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }, { token: i3$4.Router }, { token: ProblemService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RESTworldListViewComponent, isStandalone: true, selector: "rw-list", inputs: { createButtonMenu: { classPropertyName: "createButtonMenu", publicName: "createButtonMenu", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "$filter", isSignal: true, isRequired: false, transformFunction: null }, orderby: { classPropertyName: "orderby", publicName: "$orderby", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "$skip", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "$top", isSignal: true, isRequired: false, transformFunction: null }, editLink: { classPropertyName: "editLink", publicName: "editLink", isSignal: true, isRequired: false, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "$filterChange", orderby: "$orderbyChange", skip: "$skipChange", top: "$topChange" }, ngImport: i0, template: "@let search = searchTemplate.value();\r\n@let api = apiName();\r\n@if (search && api) {\r\n    <rw-table\r\n        [apiName]=\"api\"\r\n        [searchTemplate]=\"search\"\r\n        [rows]=\"items()\"\r\n        [headerMenu]=\"headerMenu()\"\r\n        [rowMenu]=\"rowMenu()\"\r\n        [totalRecords]=\"totalRecords()\"\r\n        [isLoading]=\"isLoading()\"\r\n    >\r\n    </rw-table>\r\n}\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}\n"], dependencies: [{ kind: "component", type: RestWorldTableComponent, selector: "rw-table", inputs: ["apiName", "cellStyleClass", "editTemplate", "headerMenu", "isLoading", "lazy", "paginator", "oDataParameters", "reflectParametersInUrl", "rowHover", "rowMenu", "rowStyleClass", "rows", "rowsPerPageOptions", "scrollHeight", "scrollable", "searchTemplate", "selectedRows", "selectionMode", "showRowMenuAsColumn", "showRowMenuOnRightClick", "styleClass", "tableStyle", "totalRecords", "urlParameterPrefix"], outputs: ["oDataParametersChange", "selectedRowsChange"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RestWorldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }, { token: i3$3.Router }, { token: ProblemService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RESTworldListViewComponent, isStandalone: true, selector: "rw-list", inputs: { createButtonMenu: { classPropertyName: "createButtonMenu", publicName: "createButtonMenu", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "$filter", isSignal: true, isRequired: false, transformFunction: null }, orderby: { classPropertyName: "orderby", publicName: "$orderby", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "$skip", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "$top", isSignal: true, isRequired: false, transformFunction: null }, editLink: { classPropertyName: "editLink", publicName: "editLink", isSignal: true, isRequired: false, transformFunction: null }, apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "$filterChange", orderby: "$orderbyChange", skip: "$skipChange", top: "$topChange" }, ngImport: i0, template: "@let search = searchTemplate.value();\r\n@let api = apiName();\r\n@if (search && api) {\r\n    <rw-table\r\n        [apiName]=\"api\"\r\n        [searchTemplate]=\"search\"\r\n        [rows]=\"items()\"\r\n        [headerMenu]=\"headerMenu()\"\r\n        [rowMenu]=\"rowMenu()\"\r\n        [totalRecords]=\"totalRecords()\"\r\n        [isLoading]=\"isLoading()\"\r\n    >\r\n    </rw-table>\r\n}\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}\n"], dependencies: [{ kind: "component", type: RestWorldTableComponent, selector: "rw-table", inputs: ["apiName", "cellStyleClass", "editTemplate", "headerMenu", "isLoading", "lazy", "paginator", "oDataParameters", "reflectParametersInUrl", "rowHover", "rowMenu", "rowStyleClass", "rows", "rowsPerPageOptions", "scrollHeight", "scrollable", "searchTemplate", "selectedRows", "selectionMode", "showRowMenuAsColumn", "showRowMenuOnRightClick", "styleClass", "tableStyle", "totalRecords", "urlParameterPrefix"], outputs: ["oDataParametersChange", "selectedRowsChange"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i8$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-list', standalone: true, imports: [RestWorldTableComponent, ConfirmDialogModule], template: "@let search = searchTemplate.value();\r\n@let api = apiName();\r\n@if (search && api) {\r\n    <rw-table\r\n        [apiName]=\"api\"\r\n        [searchTemplate]=\"search\"\r\n        [rows]=\"items()\"\r\n        [headerMenu]=\"headerMenu()\"\r\n        [rowMenu]=\"rowMenu()\"\r\n        [totalRecords]=\"totalRecords()\"\r\n        [isLoading]=\"isLoading()\"\r\n    >\r\n    </rw-table>\r\n}\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
-        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }, { type: i3$4.Router }, { type: ProblemService }] });
+        }], ctorParameters: () => [{ type: RestWorldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }, { type: i3$3.Router }, { type: ProblemService }] });
 
 /**
  * This is an HttpInterceptor that ensures all HttpClient requests