@wertzui/ngx-restworld-client 16.4.0 → 17.0.0

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

@@ -15,10 +15,9 @@ import * as i2$1 from 'primeng/api';
 import { PrimeTemplate, SharedModule, FilterMatchMode, TranslationKeys } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { CheckboxStyle } from 'primeng/checkbox';
-import { CheckIcon, MinusIcon } from 'primeng/icons';
-import { HttpHeaders } from '@angular/common/http';
+import { HttpHeaders, HttpEventType, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgHttpCachingHeaders, withNgHttpCachingLocalStorage, NgHttpCachingStrategy, provideNgHttpCaching } from 'ng-http-caching';
-import { lastValueFrom, merge, map, mergeMap } from 'rxjs';
+import { lastValueFrom, merge, map, mergeMap, tap, finalize } from 'rxjs';
 import * as i1$3 from 'primeng/button';
 import { ButtonModule, ButtonDirective } from 'primeng/button';
 import * as i2$2 from 'primeng/fileupload';
@@ -44,12 +43,14 @@ import { Dialog, DialogModule } from 'primeng/dialog';
 import * as i4 from 'primeng/colorpicker';
 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';
@@ -59,11 +60,13 @@ import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i4$2 from 'primeng/config';
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
 import { WebTracerProvider, SimpleSpanProcessor, ConsoleSpanExporter, BatchSpanProcessor, AlwaysOnSampler, ParentBasedSampler, TraceIdRatioBasedSampler, AlwaysOffSampler } from '@opentelemetry/sdk-trace-web';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+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 { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i5$1 from 'primeng/skeleton';
@@ -194,10 +197,10 @@ class AvatarGenerator {
         };
         return style;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: AvatarGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: AvatarGenerator, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarGenerator, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: AvatarGenerator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarGenerator, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -216,18 +219,18 @@ class RestWorldAvatarComponent {
     /**
      * The username of the user to display an avatar for.
      */
-    user = input.required();
-    image = computed(async () => await this._generator.getImageAsync(this.user()));
-    label = computed(async () => await this._generator.getLabelAsync(this.user()));
-    style = computed(async () => await this._generator.getStyleAsync(this.user()));
-    tooltip = computed(() => this.user() ?? '');
+    user = input.required(...(ngDevMode ? [{ debugName: "user" }] : []));
+    image = computed(async () => await this._generator.getImageAsync(this.user()), ...(ngDevMode ? [{ debugName: "image" }] : []));
+    label = computed(async () => await this._generator.getLabelAsync(this.user()), ...(ngDevMode ? [{ debugName: "label" }] : []));
+    style = computed(async () => await this._generator.getStyleAsync(this.user()), ...(ngDevMode ? [{ debugName: "style" }] : []));
+    tooltip = computed(() => this.user() ?? '', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
     constructor(_generator) {
         this._generator = _generator;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldAvatarComponent, deps: [{ token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: RestWorldAvatarComponent, isStandalone: true, selector: "rw-avatar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<p-avatar \n    [pTooltip]=\"tooltip()\" \n    tooltipPosition=\"top\" \n    [image]=\"$any(image() | async)\" \n    [label]=\"$any(label() | async)\" \n    [style]=\"style() | async\"\n    shape=\"circle\">\n</p-avatar>", styles: [""], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldAvatarComponent, deps: [{ token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldAvatarComponent, isStandalone: true, selector: "rw-avatar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<p-avatar \n    [pTooltip]=\"tooltip()\" \n    tooltipPosition=\"top\" \n    [image]=\"$any(image() | async)\" \n    [label]=\"$any(label() | async)\" \n    [style]=\"style() | async\"\n    shape=\"circle\">\n</p-avatar>", styles: [""], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { 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: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-avatar', standalone: true, imports: [AvatarModule, TooltipModule, AsyncPipe], template: "<p-avatar \n    [pTooltip]=\"tooltip()\" \n    tooltipPosition=\"top\" \n    [image]=\"$any(image() | async)\" \n    [label]=\"$any(label() | async)\" \n    [style]=\"style() | async\"\n    shape=\"circle\">\n</p-avatar>" }]
         }], ctorParameters: () => [{ type: AvatarGenerator }] });
@@ -257,14 +260,14 @@ class RestWorldLabelComponent {
      * The property to be displayed.
      * @required
      **/
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     get PropertyType() {
         return PropertyType;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldLabelComponent, isStandalone: true, selector: "rw-label", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    <label \r\n        [attr.for]=\"property().name\"\r\n        [class.p-disabled]=\"property().readOnly\">\r\n        {{property().prompt ?? property().name}}\r\n    </label>\r\n}", styles: [".label-hidden{visibility:hidden}.label-collapsed{display:none}\n"], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldLabelComponent, isStandalone: true, selector: "rw-label", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    <label \r\n        [attr.for]=\"property().name\"\r\n        [class.p-disabled]=\"property().readOnly\">\r\n        {{property().prompt ?? property().name}}\r\n    </label>\r\n}", styles: [".label-hidden{visibility:hidden}.label-collapsed{display:none}\n"], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-label', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "@if (property().type !== PropertyType.Hidden) {\r\n    <label \r\n        [attr.for]=\"property().name\"\r\n        [class.p-disabled]=\"property().readOnly\">\r\n        {{property().prompt ?? property().name}}\r\n    </label>\r\n}", styles: [".label-hidden{visibility:hidden}.label-collapsed{display:none}\n"] }]
         }] });
@@ -286,10 +289,10 @@ class ClrFormatPipe {
             return value;
         return format.includes("{0") ? ClrFormatPipe.formatFunction(format, value) : ClrFormatPipe.formatFunction("{0:" + format + "}", value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ClrFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: ClrFormatPipe, isStandalone: true, name: "clrFormat" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ClrFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: ClrFormatPipe, isStandalone: true, name: "clrFormat" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ClrFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ClrFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'clrFormat',
@@ -349,10 +352,10 @@ class PropertyTypeFormatPipe {
         const format = type === undefined ? "{0}" : (PropertyTypeFormatPipe._typeToFormatMap.get(type) ?? "{0}");
         return this._clrFormatPipe.transform(value, format);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyTypeFormatPipe, deps: [{ token: ClrFormatPipe }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: PropertyTypeFormatPipe, isStandalone: true, name: "propertyTypeFormat" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyTypeFormatPipe, deps: [{ token: ClrFormatPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: PropertyTypeFormatPipe, isStandalone: true, name: "propertyTypeFormat" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyTypeFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyTypeFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'propertyTypeFormat',
@@ -401,93 +404,93 @@ class TriStateCheckbox extends BaseComponent {
      * Value of the checkbox.
      * @group Props
      */
-    value = input();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     /**
      * Name of the checkbox group.
      * @group Props
      */
-    name = input();
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     /**
      * When present, it specifies that the element should be disabled.
      * @group Props
      */
-    disabled = model(undefined);
+    disabled = model(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      * @group Props
      */
-    ariaLabelledBy = input();
+    ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
     /**
      * Used to define a string that labels the input element.
      * @group Props
      */
-    ariaLabel = input();
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     /**
      * Index of the element in tabbing order.
      * @group Props
      */
-    tabindex = input(undefined, { transform: numberAttribute });
+    tabindex = input(undefined, ...(ngDevMode ? [{ debugName: "tabindex", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * Identifier of the focus input to match a label defined for the component.
      * @group Props
      */
-    inputId = input();
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Inline style of the component.
      * @group Props
      */
-    style = input();
+    style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
     /**
      * Inline style of the input element.
      * @group Props
      */
-    inputStyle = input();
+    inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : []));
     /**
      * Style class of the component.
      * @group Props
      */
-    styleClass = input("");
+    styleClass = input("", ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
     /**
      * Style class of the input element.
      * @group Props
      */
-    inputClass = input("");
+    inputClass = input("", ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
     /**
      * Defines the size of the component.
      * @group Props
      */
-    size = input();
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
     /**
      * Form control value.
      * @group Props
      */
-    formControl = input();
+    formControl = input(...(ngDevMode ? [undefined, { debugName: "formControl" }] : []));
     /**
      * Icon class of the checkbox icon.
      * @group Props
      */
-    checkboxIcon = input();
+    checkboxIcon = input(...(ngDevMode ? [undefined, { debugName: "checkboxIcon" }] : []));
     /**
      * When present, it specifies that the component cannot be edited.
      * @group Props
      */
-    readonly = input(undefined, { transform: booleanAttribute });
+    readonly = input(undefined, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * When present, it specifies that checkbox must be checked before submitting the form.
      * @group Props
      */
-    required = input(undefined, { transform: booleanAttribute });
+    required = input(undefined, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
      */
-    autofocus = input(undefined, { transform: booleanAttribute });
-    model = model(null);
+    autofocus = input(undefined, ...(ngDevMode ? [{ debugName: "autofocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    model = model(null, ...(ngDevMode ? [{ debugName: "model" }] : []));
     /**
      * Specifies the input variant of the component.
      * @group Props
      */
-    variant = input('outlined');
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /**
      * Callback to invoke on value change.
      * @param {CheckboxChangeEvent} event - Custom value change event.
@@ -516,13 +519,13 @@ class TriStateCheckbox extends BaseComponent {
             this.config.inputVariant() === 'filled',
         'p-checkbox-sm p-inputfield-sm': this.size() === 'small',
         'p-checkbox-lg p-inputfield-lg': this.size() === 'large',
-    }));
+    }), ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
     /**
      * The template of the checkbox icon.
      * @group Templates
      */
-    checkboxIconTemplate = contentChild('checkboxicon', { descendants: false });
-    templates = contentChildren(PrimeTemplate);
+    checkboxIconTemplate = contentChild('checkboxicon', ...(ngDevMode ? [{ debugName: "checkboxIconTemplate", descendants: false }] : [{ descendants: false }]));
+    templates = contentChildren(PrimeTemplate, ...(ngDevMode ? [{ debugName: "templates" }] : []));
     _checkboxIconTemplate;
     onModelChange = () => { };
     onModelTouched = () => { };
@@ -600,8 +603,8 @@ class TriStateCheckbox extends BaseComponent {
             this.cd.markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TriStateCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: TriStateCheckbox, isStandalone: true, 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: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, checkboxIcon: { classPropertyName: "checkboxIcon", publicName: "checkboxIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", model: "modelChange", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, providers: [TRI_STATE_CHECKBOX_VALUE_ACCESSOR, CheckboxStyle], queries: [{ propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TriStateCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TriStateCheckbox, isStandalone: true, 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: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, checkboxIcon: { classPropertyName: "checkboxIcon", publicName: "checkboxIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", model: "modelChange", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, providers: [TRI_STATE_CHECKBOX_VALUE_ACCESSOR, CheckboxStyle], queries: [{ propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
         <div [style]="style()" [class]="styleClass()" [ngClass]="containerClass()" [attr.data-p-highlight]="model() === true" [attr.data-p-checked]="model() === true" [attr.data-p-disabled]="disabled()" [title]="model()">
             <input
                 #input
@@ -630,24 +633,24 @@ class TriStateCheckbox extends BaseComponent {
                         <span class="p-checkbox-icon" [ngClass]="checkboxIcon()" [attr.data-pc-section]="'icon'"></span>
                   }
                   @else {
-                        <CheckIcon [styleClass]="'p-checkbox-icon'" [attr.data-pc-section]="'icon'" />
+                        <span class="p-checkbox-icon pi pi-check" [attr.data-pc-section]="'icon'"></span>
                   }
                 }
                 @else if (model() === null) {
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" [attr.data-pc-section]="'icon'" />
+                    <span class="p-checkbox-icon pi pi-minus" [attr.data-pc-section]="'icon'"></span>
                 }
               }
                 <ng-template *ngTemplateOutlet="checkboxIconTemplate() ?? _checkboxIconTemplate ?? null; context: { model: model, class: 'p-checkbox-icon' }"></ng-template>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: MinusIcon, selector: "MinusIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TriStateCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TriStateCheckbox, decorators: [{
             type: Component,
             args: [{
                     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',
                     standalone: true,
-                    imports: [CommonModule, CheckIcon, MinusIcon, SharedModule],
+                    imports: [CommonModule, SharedModule],
                     template: `
         <div [style]="style()" [class]="styleClass()" [ngClass]="containerClass()" [attr.data-p-highlight]="model() === true" [attr.data-p-checked]="model() === true" [attr.data-p-disabled]="disabled()" [title]="model()">
             <input
@@ -677,11 +680,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         <span class="p-checkbox-icon" [ngClass]="checkboxIcon()" [attr.data-pc-section]="'icon'"></span>
                   }
                   @else {
-                        <CheckIcon [styleClass]="'p-checkbox-icon'" [attr.data-pc-section]="'icon'" />
+                        <span class="p-checkbox-icon pi pi-check" [attr.data-pc-section]="'icon'"></span>
                   }
                 }
                 @else if (model() === null) {
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" [attr.data-pc-section]="'icon'" />
+                    <span class="p-checkbox-icon pi pi-minus" [attr.data-pc-section]="'icon'"></span>
                 }
               }
                 <ng-template *ngTemplateOutlet="checkboxIconTemplate() ?? _checkboxIconTemplate ?? null; context: { model: model, class: 'p-checkbox-icon' }"></ng-template>
@@ -710,6 +713,8 @@ class ProblemService {
         const enclosingElement = nativeElement ?? document;
         setTimeout(() => {
             const validationErrorElements = enclosingElement.querySelectorAll('rw-validation-errors>val-errors>div');
+            if (validationErrorElements.length === 0)
+                return;
             const firstError = validationErrorElements[0];
             firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }, 100);
@@ -726,6 +731,33 @@ class ProblemService {
         }
         return control;
     }
+    /**
+     * Adds errors to a control's existing errors.
+     * @param control The control to add errors to.
+     * @param newErrors The new errors to add.
+     */
+    addErrors(control, newErrors) {
+        if (!newErrors)
+            return;
+        // Get existing remote errors or initialize an empty array
+        const existingErrors = control.errors?.remote;
+        // Combine the errors
+        let combinedErrors;
+        if (!existingErrors) {
+            // No existing errors, just use the new ones
+            combinedErrors = [newErrors];
+        }
+        else if (Array.isArray(existingErrors)) {
+            // Existing errors are already an array, add to it
+            combinedErrors = [...existingErrors, newErrors];
+        }
+        else {
+            // Existing errors are not an array, combine with new errors
+            combinedErrors = [existingErrors, newErrors];
+        }
+        // Set the combined errors
+        control.setErrors({ ...control.errors, remote: combinedErrors });
+    }
     /**
      * Checks the response and displays errors if necessary.
      * @param response The response to check.
@@ -800,6 +832,8 @@ class ProblemService {
     displayValidationErrors(problemDetails, formGroup, nativeElement) {
         // display validation errors
         if (problemDetails["errors"]) {
+            // Add the problem detail to the form group errors
+            this.addErrors(formGroup, problemDetails.detail);
             for (const [key, errorsForKey] of Object.entries(problemDetails["errors"])) {
                 const path = key.split(/\.|\[/).map(e => e.replace("]", ""));
                 // The path might start with a $, indicating the root.
@@ -807,17 +841,21 @@ class ProblemService {
                     path.shift();
                 const formControl = path.reduce(ProblemService.getSubControl, formGroup);
                 if (formControl) {
-                    formControl.setErrors({ ...formControl.errors, ...{ remote: errorsForKey } });
+                    // Add the errors to the form control
+                    this.addErrors(formControl, errorsForKey);
                     formControl.markAsTouched();
                 }
+                // Add the field-specific errors to the form group as well
+                this.addErrors(formGroup, errorsForKey);
             }
+            formGroup.markAsTouched();
         }
         ProblemService.scrollToFirstValidationError(nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ProblemService, deps: [{ token: i2$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ProblemService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProblemService, deps: [{ token: i2$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProblemService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ProblemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProblemService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root"
@@ -849,7 +887,7 @@ class RestWorldClient {
         if (!originalHeaders)
             return headersToAdd;
         let combinedHeaders = originalHeaders;
-        for (const key in headersToAdd.keys) {
+        for (const key of headersToAdd.keys()) {
             if (!combinedHeaders.has(key) || overwriteExisting) {
                 const headerValuesToAdd = headersToAdd.getAll(key);
                 if (headerValuesToAdd)
@@ -865,8 +903,8 @@ class RestWorldClient {
                 'Content-Type': `${contentType ?? 'application/json'}; v=${version}`
             });
         return new HttpHeaders({
-            'Accept': `${accept ?? 'application/hal+json'};`,
-            'Content-Type': `${contentType ?? 'application/json'};`
+            'Accept': `${accept ?? 'application/hal+json'}`,
+            'Content-Type': `${contentType ?? 'application/json'}`
         });
     }
     static createHeadersWithoutBody(version, accept) {
@@ -876,7 +914,7 @@ class RestWorldClient {
                 'Content-Type': `v=${version}`
             });
         return new HttpHeaders({
-            'Accept': `${accept ?? 'application/hal+json'};`,
+            'Accept': `${accept ?? 'application/hal+json'}`,
         });
     }
     /**
@@ -888,12 +926,13 @@ class RestWorldClient {
      */
     async delete(resource) {
         const deleteLink = resource.findLink('delete');
-        if (!deleteLink)
-            throw new Error(`The resource ${resource} does not have a delete link.`);
-        const uri = deleteLink.href;
-        const header = RestWorldClient.createHeadersWithoutBody(this._options.Version, 'application/hal+json');
-        const response = await this.halClient.delete(uri, header);
-        return response;
+        if (!deleteLink) {
+            const selfLink = resource.findLink('self');
+            const resourceInfo = selfLink ? `Resource with self link: ${selfLink.href}` : 'Resource (no self link)';
+            throw new Error(`The resource does not have a delete link. ${resourceInfo}`);
+        }
+        const url = deleteLink.href;
+        return this.deleteByUrl(url, resource.timestamp);
     }
     /**
      * Deletes a resource identified by the given template and timestamp supplied by the given form group.
@@ -914,13 +953,13 @@ class RestWorldClient {
      * Deletes a resource at the specified URL.
      *
      * @param url - The URL of the resource to delete.
-     * @param timestamp - An optional ETag value to include in the request headers.
+     * @param timestamp - An optional If-Match value to include in the request headers.
      * @returns A promise that resolves to an HttpResponse containing either void or ProblemDetails.
      */
     async deleteByUrl(url, timestamp) {
         let header = RestWorldClient.createHeadersWithoutBody(this._options.Version);
         if (timestamp !== undefined)
-            header = header.append("ETag", timestamp);
+            header = header.append("If-Match", timestamp);
         const response = await this.halClient.delete(url, header);
         return response;
     }
@@ -1027,20 +1066,57 @@ class RestWorldClient {
      * Retrieves all templates associated with a given resource.
      *
      * This method fetches all forms related to the provided {@link Resource} and extracts the templates from the responses.
-     * If any of the form responses indicate a failure, an error is thrown with details about the failed response.
+     * If any of the form responses indicate a failure, it creates a combined ProblemDetails object with information from all failures.
      *
      * @param resource - The {@link Resource} for which to retrieve templates.
-     * @returns A promise that resolves to the {@link Templates} associated with the resource.
-     * @throws An error if any of the form responses fail.
+     * @returns A promise that resolves to the {@link Templates} associated with the resource or ProblemDetails if there's an error.
      */
     async getAllTemplates(resource) {
         const formResponses = await this.getAllForms(resource);
         const failedResponses = formResponses.filter(response => !response.ok || ProblemDetails.isProblemDetails(response.body) || !response.body);
         if (failedResponses.length !== 0) {
-            for (const response of failedResponses) {
-                throw new Error(`Error while loading the response from ${response.url}, Status ${response.status} - ${response.statusText}, Content: ${JSON.stringify(response.body)}`);
+            // If we have multiple failed responses, create a combined problem details
+            if (failedResponses.length > 1) {
+                const failureDetails = failedResponses.map(response => {
+                    if (ProblemDetails.isProblemDetails(response.body)) {
+                        return response.body.detail || `Problem details from ${response.url}`;
+                    }
+                    return `Error ${response.status} (${response.statusText}) from ${response.url}`;
+                }).join('; ');
+                // Check if all failed responses have the same status code
+                const allStatuses = failedResponses.map(response => {
+                    if (ProblemDetails.isProblemDetails(response.body)) {
+                        return response.body.status;
+                    }
+                    return response.status;
+                });
+                // Use the common status code if all are the same, otherwise use 500
+                const uniqueStatuses = new Set(allStatuses);
+                const status = uniqueStatuses.size === 1 ? allStatuses[0] : 500;
+                const problemDetailsDto = {
+                    _links: { self: [{ href: resource.findLink('self')?.href || "" }] },
+                    detail: `Multiple errors occurred while loading form responses: ${failureDetails}`,
+                    status: status,
+                    title: "Multiple Form Loading Errors",
+                    type: "https://tools.ietf.org/html/rfc7231#section-6.5"
+                };
+                return new ProblemDetails(problemDetailsDto);
+            }
+            // Single failure case
+            const firstFailedResponse = failedResponses[0];
+            if (ProblemDetails.isProblemDetails(firstFailedResponse.body)) {
+                return firstFailedResponse.body;
             }
-            return Promise.resolve({});
+            // If we don't have a ProblemDetails object but the response failed,
+            // create a new ProblemDetails object with the error information
+            const problemDetailsDto = {
+                _links: { self: [{ href: firstFailedResponse.url || "" }] },
+                detail: `Error while loading the response from ${firstFailedResponse.url}`,
+                status: firstFailedResponse.status,
+                title: firstFailedResponse.statusText,
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5.1"
+            };
+            return new ProblemDetails(problemDetailsDto);
         }
         const formTemplates = Object.assign({}, ...formResponses.map(response => response.body._templates));
         return formTemplates;
@@ -1215,10 +1291,14 @@ class RestWorldClient {
      */
     async save(resource) {
         const saveLink = resource.findLink('save');
-        if (!saveLink)
-            throw new Error(`The resource ${resource} does not have a save link.`);
-        if (!saveLink.name)
-            throw new Error(`The save link ${saveLink} does not have a save name.`);
+        if (!saveLink) {
+            const selfLink = resource.findLink('self');
+            const resourceInfo = selfLink ? `Resource with self link: ${selfLink.href}` : 'Resource (no self link)';
+            throw new Error(`The resource does not have a save link. ${resourceInfo}`);
+        }
+        if (!saveLink.name) {
+            throw new Error(`The save link with href '${saveLink.href}' does not have a save name.`);
+        }
         const uri = saveLink.href;
         const method = saveLink.name.toLowerCase();
         const header = RestWorldClient.createHeadersWithBody(this._options.Version);
@@ -1282,6 +1362,127 @@ class RestWorldClient {
         else
             this._defaultCurie = curies[0].name;
     }
+    /**
+     * Retrieves all forms associated with a resource fetched by its URI.
+     *
+     * This method first fetches the resource from the given URI and then retrieves all forms for that resource.
+     * If the resource response contains a problem detail, it returns an array with a single HTTP response containing that problem detail.
+     *
+     * @param uri - The URI of the resource to fetch.
+     * @param headers - Optional HTTP headers to include in the request.
+     * @returns A promise that resolves to an array of HTTP responses, each containing either a `FormsResource` or `ProblemDetails`.
+     */
+    async getAllFormsByUri(uri, headers) {
+        const resourceResponse = await this.getSingleByUri(uri, headers);
+        if (!resourceResponse.ok || ProblemDetails.isProblemDetails(resourceResponse.body)) {
+            // Return the problem details as is, wrapped in an array
+            if (ProblemDetails.isProblemDetails(resourceResponse.body)) {
+                return [resourceResponse];
+            }
+            // If no body or problem details, create a proper ProblemDetails object
+            const problemDetailsDto = {
+                _links: { self: [{ href: uri }] },
+                detail: `Error while loading the resource from ${uri}`,
+                status: resourceResponse.status,
+                title: resourceResponse.statusText,
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5"
+            };
+            const problemDetails = new ProblemDetails(problemDetailsDto);
+            // Modify the response body to include our problem details
+            const errorResponse = { ...resourceResponse, body: problemDetails };
+            return [errorResponse];
+        }
+        if (!resourceResponse.body) {
+            // Handle empty response with a proper ProblemDetails object
+            const problemDetailsDto = {
+                _links: { self: [{ href: uri }] },
+                detail: `Resource from ${uri} was empty`,
+                status: 404,
+                title: "Resource Not Found",
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5.4"
+            };
+            const problemDetails = new ProblemDetails(problemDetailsDto);
+            const errorResponse = { ...resourceResponse, body: problemDetails };
+            return [errorResponse];
+        }
+        return this.getAllForms(resourceResponse.body);
+    }
+    /**
+     * Retrieves all templates associated with a resource fetched by its URI.
+     *
+     * This method first fetches the resource from the given URI and then retrieves all templates for that resource.
+     * It combines functionality from {@link getSingleByUri} and {@link getAllTemplates}.
+     * If the resource response contains a problem detail or if any form responses fail,
+     * the method returns the problem detail rather than throwing an error.
+     *
+     * @param uri - The URI of the resource to fetch.
+     * @param headers - Optional HTTP headers to include in the request.
+     * @returns A promise that resolves to the {@link Templates} associated with the resource or a ProblemDetails object if there was an error.
+     */
+    async getAllTemplatesByUri(uri, headers) {
+        const resourceResponse = await this.getSingleByUri(uri, headers);
+        if (!resourceResponse.ok || ProblemDetails.isProblemDetails(resourceResponse.body)) {
+            if (ProblemDetails.isProblemDetails(resourceResponse.body)) {
+                return resourceResponse.body;
+            }
+            // If no problem details in body but response not OK, create a proper ProblemDetails object
+            const problemDetailsDto = {
+                _links: { self: [{ href: uri }] },
+                detail: `Error while loading the resource from ${uri}`,
+                status: resourceResponse.status,
+                title: resourceResponse.statusText,
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5"
+            };
+            return new ProblemDetails(problemDetailsDto);
+        }
+        if (!resourceResponse.body) {
+            // Handle empty response with a proper ProblemDetails object
+            const problemDetailsDto = {
+                _links: { self: [{ href: uri }] },
+                detail: `Resource from ${uri} was empty`,
+                status: 404,
+                title: "Resource Not Found",
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5.4"
+            };
+            return new ProblemDetails(problemDetailsDto);
+        }
+        return this.getAllTemplates(resourceResponse.body);
+    }
+    /**
+     * Retrieves a specific template by title from a resource fetched by its URI.
+     *
+     * This method first fetches all templates from the resource at the given URI and then
+     * returns the template with the specified title. If the resource cannot be fetched,
+     * if it contains a problem detail, or if any form responses fail, this method returns
+     * the problem detail rather than throwing an error.
+     *
+     * @param uri - The URI of the resource to fetch.
+     * @param templateTitle - The title of the template to retrieve.
+     * @param headers - Optional HTTP headers to include in the request.
+     * @returns A promise that resolves to the {@link Template} with the specified title or a ProblemDetails object if there was an error.
+     */
+    async getTemplateByUri(uri, templateTitle, headers) {
+        const templatesOrProblemDetails = await this.getAllTemplatesByUri(uri, headers);
+        // If we got ProblemDetails instead of Templates, return it
+        if (ProblemDetails.isProblemDetails(templatesOrProblemDetails)) {
+            return templatesOrProblemDetails;
+        }
+        const templates = templatesOrProblemDetails;
+        const template = templates[templateTitle];
+        if (template === undefined) {
+            const templateTitles = Object.keys(templates);
+            // Instead of throwing an error, return a properly constructed ProblemDetails object
+            const problemDetailsDto = {
+                _links: { self: [{ href: uri }] },
+                detail: `No template with title '${templateTitle}' found. Available templates are: ${templateTitles.join(', ')}`,
+                status: 404,
+                title: "Template Not Found",
+                type: "https://tools.ietf.org/html/rfc7231#section-6.5.4"
+            };
+            return new ProblemDetails(problemDetailsDto);
+        }
+        return template;
+    }
 }
 
 /**
@@ -1337,10 +1538,10 @@ class RestWorldClientCollection {
     get all() {
         return this._clients;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldClientCollection, deps: [{ token: i1$1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldClientCollection, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldClientCollection, deps: [{ token: i1$1.HalClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldClientCollection, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldClientCollection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldClientCollection, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1361,15 +1562,15 @@ class OptionsManager {
     selectedValues;
     _getLabel;
     _getTooltip;
-    getLabel = computed(() => this._getLabel() ?? ((itemOrValue) => this.getDefaultLabel(itemOrValue)));
-    getTooltip = computed(() => this._getTooltip() ?? ((itemOrValue) => this.getDefaultTooltip(itemOrValue)));
+    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);
-    options = computed(() => this.property().options);
-    promptField = computed(() => this.options()?.promptField ?? "prompt");
-    valueField = computed(() => this.options()?.valueField ?? "value");
-    _client = computed(() => this._clients.getClient(this.apiName()));
-    selectedItems = computed(() => this.selectedValues()?.map(value => this.getItemByValue(this.items(), value) ?? []));
+    loading = signal(false, ...(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) {
         this._problemService = _problemService;
         this._clients = _clients;
@@ -1512,10 +1713,10 @@ class OptionsService {
     getManager(apiName, property, selectValues, getLabel, getTooltip) {
         return new OptionsManager(this._problemService, this._clients, apiName, property, selectValues, getLabel, getTooltip);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OptionsService, deps: [{ token: ProblemService }, { token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OptionsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OptionsService, deps: [{ token: ProblemService }, { token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OptionsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OptionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OptionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1536,23 +1737,23 @@ class RestWorldDisplayCollectionComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     templates = computed(() => {
         const values = this.values();
         const property = this.property();
         return values ?
             Array.from(RestWorldDisplayCollectionComponent.map(RestWorldDisplayCollectionComponent.toArray(values).entries(), (entry) => (new NumberTemplate({ ...property._templates.default, title: entry[0].toString() })))) :
             RestWorldDisplayCollectionComponent.getCollectionEntryTemplates(property);
-    });
+    }, ...(ngDevMode ? [{ debugName: "templates" }] : []));
     /**
      * The value to display. If not set, the value of the property will be used.
     */
-    values = input();
+    values = input(...(ngDevMode ? [undefined, { debugName: "values" }] : []));
     static getCollectionEntryTemplates(property) {
         if (!property)
             return [];
@@ -1572,10 +1773,10 @@ class RestWorldDisplayCollectionComponent {
             return arrayOrDictionary;
         return Object.entries(arrayOrDictionary).map(([key, value]) => ({ key, value: value }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayCollectionComponent, isStandalone: true, selector: "rw-display-collection", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        @for (template of templates(); track template) {\r\n            <div class=\"flex align-items-center\">\r\n                <div class=\"brace\">\r\n                </div>\r\n                <div class=\"w-full flex justify-content-end\">\r\n                    <rw-display-template [template]=\"$any(template)\" [value]=\"values() ? $any(values())[template.title!] : undefined\" [apiName]=\"apiName()\" class=\"w-full\"></rw-display-template>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldDisplayTemplateComponent), selector: "rw-display-template", inputs: ["apiName", "template", "value"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplayCollectionComponent, isStandalone: true, selector: "rw-display-collection", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        @for (template of templates(); track template) {\r\n            <div class=\"flex align-items-center\">\r\n                <div class=\"brace\">\r\n                </div>\r\n                <div class=\"w-full flex justify-content-end\">\r\n                    <rw-display-template [template]=\"$any(template)\" [value]=\"values() ? $any(values())[template.title!] : undefined\" [apiName]=\"apiName()\" class=\"w-full\"></rw-display-template>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldDisplayTemplateComponent), selector: "rw-display-template", inputs: ["apiName", "template", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayCollectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayCollectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display-collection', standalone: true, imports: [forwardRef(() => RestWorldDisplayTemplateComponent)], template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        @for (template of templates(); track template) {\r\n            <div class=\"flex align-items-center\">\r\n                <div class=\"brace\">\r\n                </div>\r\n                <div class=\"w-full flex justify-content-end\">\r\n                    <rw-display-template [template]=\"$any(template)\" [value]=\"values() ? $any(values())[template.title!] : undefined\" [apiName]=\"apiName()\" class=\"w-full\"></rw-display-template>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"] }]
         }] });
@@ -1594,30 +1795,30 @@ class RestWorldDisplayComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * Either the value or the property.value if the value is not set.
      */
-    computedValue = computed(() => this.value() ?? this.property().value);
+    computedValue = computed(() => this.value() ?? this.property().value, ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     /**
      * The value to display. If not set, the value of the property will be used.
     */
-    value = input();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     get PropertyType() {
         return PropertyType;
     }
     get PropertyWithOptions() {
         return PropertyWithOptions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayComponent, isStandalone: true, selector: "rw-display", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    @if (property().options) {\r\n        <rw-display-dropdown [property]=\"$any(property())\" [selectedValues]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-display-object [property]=\"$any(property())\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-display-collection [property]=\"$any(property())\" [values]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-collection>\r\n            }\r\n            @default {\r\n                <rw-display-simple [property]=\"property()\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-simple>\r\n            }\r\n        }\r\n    }\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldDisplayDropdownComponent), selector: "rw-display-dropdown", inputs: ["apiName", "getLabel", "getTooltip", "property", "selectedValues"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplayObjectComponent), selector: "rw-display-object", inputs: ["apiName", "property", "value"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplaySimpleComponent), selector: "rw-display-simple", inputs: ["apiName", "property", "value"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplayCollectionComponent), selector: "rw-display-collection", inputs: ["apiName", "property", "values"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplayComponent, isStandalone: true, selector: "rw-display", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    @if (property().options) {\r\n        <rw-display-dropdown [property]=\"$any(property())\" [selectedValues]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-display-object [property]=\"$any(property())\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-display-collection [property]=\"$any(property())\" [values]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-collection>\r\n            }\r\n            @default {\r\n                <rw-display-simple [property]=\"property()\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-simple>\r\n            }\r\n        }\r\n    }\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => RestWorldDisplayDropdownComponent), selector: "rw-display-dropdown", inputs: ["apiName", "getLabel", "getTooltip", "property", "selectedValues"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplayObjectComponent), selector: "rw-display-object", inputs: ["apiName", "property", "value"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplaySimpleComponent), selector: "rw-display-simple", inputs: ["apiName", "property", "value"] }, { kind: "component", type: i0.forwardRef(() => RestWorldDisplayCollectionComponent), selector: "rw-display-collection", inputs: ["apiName", "property", "values"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display', standalone: true, imports: [forwardRef(() => RestWorldDisplayDropdownComponent), forwardRef(() => RestWorldDisplayObjectComponent), forwardRef(() => RestWorldDisplaySimpleComponent), RestWorldDisplayCollectionComponent], template: "@if (property().type !== PropertyType.Hidden) {\r\n    @if (property().options) {\r\n        <rw-display-dropdown [property]=\"$any(property())\" [selectedValues]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-dropdown>\r\n    }\r\n    @else {\r\n        @switch (property().type) {\r\n            @case (PropertyType.Object) {\r\n                <rw-display-object [property]=\"$any(property())\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-object>\r\n            }\r\n            @case (PropertyType.Collection) {\r\n                <rw-display-collection [property]=\"$any(property())\" [values]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-collection>\r\n            }\r\n            @default {\r\n                <rw-display-simple [property]=\"property()\" [value]=\"$any(computedValue())\" [apiName]=\"apiName()\"></rw-display-simple>\r\n            }\r\n        }\r\n    }\r\n}\r\n" }]
         }] });
@@ -1635,7 +1836,7 @@ class RestWorldDisplayDropdownComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * A function that returns the label for the given item.
      * The default returns the prompt and optionally the value in brackets.
@@ -1643,7 +1844,7 @@ class RestWorldDisplayDropdownComponent {
      * Overwrite this function to change the label.
      * @param item The item to get the label for.
      */
-    getLabel = input();
+    getLabel = input(...(ngDevMode ? [undefined, { debugName: "getLabel" }] : []));
     /**
      * 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.
@@ -1651,14 +1852,14 @@ class RestWorldDisplayDropdownComponent {
      * Overwrite this function to change the tooltip.
      * @param item The item to get the label for.
      */
-    getTooltip = input();
-    options = computed(() => this.property().options);
+    getTooltip = input(...(ngDevMode ? [undefined, { debugName: "getTooltip" }] : []));
+    options = computed(() => this.property().options, ...(ngDevMode ? [{ debugName: "options" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
-    selectedValues = input([], { transform: (value) => (Array.isArray(value) ? value : [value]) });
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
+    selectedValues = input([], ...(ngDevMode ? [{ debugName: "selectedValues", transform: (value) => (Array.isArray(value) ? value : [value]) }] : [{ transform: (value) => (Array.isArray(value) ? value : [value]) }]));
     optionsManager;
     constructor(optionsService) {
         this.optionsManager = optionsService.getManager(this.apiName, this.property, this.selectedValues, this.getLabel, this.getTooltip);
@@ -1666,10 +1867,10 @@ class RestWorldDisplayDropdownComponent {
     async ngOnInit() {
         await this.optionsManager.initialize();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayDropdownComponent, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display-dropdown', standalone: true, imports: [Tooltip], 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" }]
         }], ctorParameters: () => [{ type: OptionsService }] });
@@ -1686,27 +1887,27 @@ class RestWorldDisplayElementComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * Either the value or the property.value if the value is not set.
      */
-    computedValue = computed(() => this.value() ?? this.property().value);
+    computedValue = computed(() => this.value() ?? this.property().value, ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     /**
      * The value to display. If not set, the value of the property will be used.
     */
-    value = input();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     get PropertyType() {
         return PropertyType;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayElementComponent, isStandalone: true, selector: "rw-display-element", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    <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-display [property]=\"property()\" [value]=\"computedValue()\" [apiName]=\"apiName()\" class=\"col-12 md:col-10\"></rw-display>\r\n    </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldLabelComponent, selector: "rw-label", inputs: ["property"] }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplayElementComponent, isStandalone: true, selector: "rw-display-element", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().type !== PropertyType.Hidden) {\r\n    <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-display [property]=\"property()\" [value]=\"computedValue()\" [apiName]=\"apiName()\" class=\"col-12 md:col-10\"></rw-display>\r\n    </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldLabelComponent, selector: "rw-label", inputs: ["property"] }, { kind: "component", type: RestWorldDisplayComponent, selector: "rw-display", inputs: ["apiName", "property", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display-element', standalone: true, imports: [RestWorldLabelComponent, RestWorldDisplayComponent], template: "@if (property().type !== PropertyType.Hidden) {\r\n    <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-display [property]=\"property()\" [value]=\"computedValue()\" [apiName]=\"apiName()\" class=\"col-12 md:col-10\"></rw-display>\r\n    </div>\r\n}\r\n" }]
         }] });
@@ -1724,20 +1925,20 @@ class RestWorldDisplayObjectComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     /**
      * The value to display. If not set, the value of the template properties will be used.
     */
-    value = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: RestWorldDisplayObjectComponent, isStandalone: true, selector: "rw-display-object", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        <rw-display-template [template]=\"property()._templates.default\" [value]=\"value\" [apiName]=\"apiName()\"></rw-display-template>\r\n    </div>\r\n</div>", 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(() => RestWorldDisplayTemplateComponent), selector: "rw-display-template", inputs: ["apiName", "template", "value"] }] });
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RestWorldDisplayObjectComponent, isStandalone: true, selector: "rw-display-object", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        <rw-display-template [template]=\"property()._templates.default\" [value]=\"value\" [apiName]=\"apiName()\"></rw-display-template>\r\n    </div>\r\n</div>", 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(() => RestWorldDisplayTemplateComponent), selector: "rw-display-template", inputs: ["apiName", "template", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayObjectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayObjectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display-object', standalone: true, imports: [forwardRef(() => RestWorldDisplayTemplateComponent)], template: "<div class=\"flex align-items-center\">\r\n    <div class=\"brace\">\r\n    </div>\r\n    <div class=\"w-full\">\r\n        <rw-display-template [template]=\"property()._templates.default\" [value]=\"value\" [apiName]=\"apiName()\"></rw-display-template>\r\n    </div>\r\n</div>", 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"] }]
         }] });
@@ -1765,20 +1966,20 @@ class RestWorldDisplaySimpleComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * Either the value or the property.value if the value is not set.
      */
-    computedValue = computed(() => this.value() ?? this.property().value ?? this._defaultValue());
+    computedValue = computed(() => this.value() ?? this.property().value ?? this._defaultValue(), ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
     /**
      * The property to display.
      * @required
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     /**
      * The value to display. If not set, the value of the property will be used.
     */
-    value = input();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     _defaultValue = computed(() => {
         const property = this.property();
         if (!property.required || property.options?.minItems === 0)
@@ -1786,7 +1987,7 @@ class RestWorldDisplaySimpleComponent {
         if (property.type === PropertyType.Number)
             return 0;
         return undefined;
-    });
+    }, ...(ngDevMode ? [{ debugName: "_defaultValue" }] : []));
     get PropertyType() {
         return PropertyType;
     }
@@ -1799,10 +2000,10 @@ class RestWorldDisplaySimpleComponent {
     get timeFormat() {
         return RestWorldDisplaySimpleComponent._timeFormat;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplaySimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplaySimpleComponent, isStandalone: true, selector: "rw-display-simple", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let prop = property();\r\n@let val = computedValue();\r\n@switch (prop.type) {\r\n\r\n    @case (PropertyType.Text) {\r\n        @if (prop.name === 'createdBy' || prop.name === 'lastChangedBy') {\r\n            <rw-avatar [user]=\"$any(val)\"></rw-avatar>\r\n        }\r\n        @else {\r\n            <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        <rw-tri-state-checkbox [model]=\"$any(val)\" [readonly]=\"true\" [disabled]=\"true\"></rw-tri-state-checkbox>\r\n    }\r\n    @default {\r\n        <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n    }\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldAvatarComponent, selector: "rw-avatar", inputs: ["user"] }, { kind: "pipe", type: PropertyTypeFormatPipe, name: "propertyTypeFormat" }, { 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: "ngmodule", type: FormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplaySimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplaySimpleComponent, isStandalone: true, selector: "rw-display-simple", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let prop = property();\r\n@let val = computedValue();\r\n@switch (prop.type) {\r\n\r\n    @case (PropertyType.Text) {\r\n        @if (prop.name === 'createdBy' || prop.name === 'lastChangedBy') {\r\n            <rw-avatar [user]=\"$any(val)\"></rw-avatar>\r\n        }\r\n        @else {\r\n            <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        <rw-tri-state-checkbox [model]=\"$any(val)\" [readonly]=\"true\" [disabled]=\"true\"></rw-tri-state-checkbox>\r\n    }\r\n    @default {\r\n        <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n    }\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldAvatarComponent, selector: "rw-avatar", inputs: ["user"] }, { 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: "ngmodule", type: FormsModule }, { kind: "pipe", type: PropertyTypeFormatPipe, name: "propertyTypeFormat" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplaySimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplaySimpleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-display-simple', standalone: true, imports: [RestWorldAvatarComponent, PropertyTypeFormatPipe, TriStateCheckbox, FormsModule, TriStateCheckbox], template: "@let prop = property();\r\n@let val = computedValue();\r\n@switch (prop.type) {\r\n\r\n    @case (PropertyType.Text) {\r\n        @if (prop.name === 'createdBy' || prop.name === 'lastChangedBy') {\r\n            <rw-avatar [user]=\"$any(val)\"></rw-avatar>\r\n        }\r\n        @else {\r\n            <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n        }\r\n    }\r\n    @case (PropertyType.Bool) {\r\n        <rw-tri-state-checkbox [model]=\"$any(val)\" [readonly]=\"true\" [disabled]=\"true\"></rw-tri-state-checkbox>\r\n    }\r\n    @default {\r\n        <span class=\"w-full\">{{val | propertyTypeFormat:prop.type}}</span>\r\n    }\r\n}\r\n" }]
         }] });
@@ -1817,23 +2018,23 @@ class RestWorldDisplayTemplateComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * The template to display.
      * @required
      * @remarks This is the template that defines the properties to display.
      */
-    template = input.required();
+    template = input.required(...(ngDevMode ? [{ debugName: "template" }] : []));
     /**
      * The value to display. If not set, the values of the template properties will be used.
     */
-    value = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldDisplayTemplateComponent, isStandalone: true, selector: "rw-display-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\n}", styles: [""], dependencies: [{ kind: "component", type: RestWorldDisplayElementComponent, selector: "rw-display-element", inputs: ["apiName", "property", "value"] }] });
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldDisplayTemplateComponent, isStandalone: true, selector: "rw-display-template", inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (property of template().properties; track property) {\r\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\r\n}", styles: [""], dependencies: [{ kind: "component", type: RestWorldDisplayElementComponent, selector: "rw-display-element", inputs: ["apiName", "property", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldDisplayTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldDisplayTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-display-template', standalone: true, imports: [RestWorldDisplayElementComponent], template: "@for (property of template().properties; track property) {\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\n}" }]
+            args: [{ selector: 'rw-display-template', standalone: true, imports: [RestWorldDisplayElementComponent], template: "@for (property of template().properties; track property) {\r\n    <rw-display-element [property]=\"property\" [value]=\"value()?.[property.name]\" [apiName]=\"apiName()\"></rw-display-element>\r\n}" }]
         }] });
 
 /**
@@ -1857,10 +2058,10 @@ class SafeUrlPipe {
             throw new Error(`The given url '${url}' is not a string.`);
         return this._domSanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: SafeUrlPipe, isStandalone: true, name: "safeUrl" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: SafeUrlPipe, isStandalone: true, name: "safeUrl" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SafeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeUrl',
@@ -1884,16 +2085,16 @@ class RestWorldFileComponent {
    * This is a comma-separated list of MIME types or file extensions.
    * If not specified, all file types are accepted.
    */
-    accept = input("", { transform: (v) => v ?? "" });
+    accept = input("", ...(ngDevMode ? [{ debugName: "accept", transform: (v) => v ?? "" }] : [{ transform: (v) => v ?? "" }]));
     /**
    * The name of the file to be uploaded.
    */
-    fileName = input("download", { transform: (v) => v ?? "download" });
-    disabled = signal(false);
+    fileName = input("download", ...(ngDevMode ? [{ debugName: "fileName", transform: (v) => v ?? "download" }] : [{ transform: (v) => v ?? "download" }]));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
      * The URI of the file.
      */
-    uri = signal(undefined);
+    uri = signal(undefined, ...(ngDevMode ? [{ debugName: "uri" }] : []));
     writeValue(obj) {
         this.uri.set(obj);
     }
@@ -1919,14 +2120,14 @@ class RestWorldFileComponent {
         this.uri.set(undefined);
         this.onChange?.(this.uri());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldFileComponent, isStandalone: true, selector: "rw-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldFileComponent, isStandalone: true, selector: "rw-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RestWorldFileComponent),
                 multi: true
-            }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n    @if (uri()) {\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteFile()\"/>\r\n    }\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "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: "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
+            }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"fileName()\" class=\"mr-1\" pButton\r\n            pTooltip=\"Download file\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No file present\"></p-button>\r\n    }\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" pTooltip=\"Upload new file\" mode=\"basic\" [auto]=\"true\"\r\n        [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"fileChanged($event)\"></p-fileUpload>\r\n    @if (uri()) {\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteFile()\"/>\r\n    }\r\n</div>\r\n", styles: ["a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "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: "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: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-file', standalone: true, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -1948,21 +2149,21 @@ class RestWorldValidationErrorsComponent {
      * The form to display the validation errors for.
      * Either set this or the property input.
      */
-    form = input();
-    name = computed(() => this.property()?.name ?? null);
-    prompt = computed(() => this.property()?.prompt ?? this.name() ?? null);
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+    name = computed(() => this.property()?.name ?? null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    prompt = computed(() => this.property()?.prompt ?? this.name() ?? null, ...(ngDevMode ? [{ debugName: "prompt" }] : []));
     /**
      * The property to display the validation errors for.
      * Either set this or the form input.
      */
-    property = input();
+    property = input(...(ngDevMode ? [undefined, { debugName: "property" }] : []));
     get PropertyType() {
         return PropertyType;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldValidationErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldValidationErrorsComponent, isStandalone: true, selector: "rw-validation-errors", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property() && property()?.type !== PropertyType.Hidden) {\n    <val-errors [controlName]=\"name()\">\n        <ng-template valError=\"required\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The field '{{prompt()}}' is required.</p-message></ng-template>\n        <ng-template valError=\"email\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be a valid email address.</p-message></ng-template>\n        <ng-template valError=\"min\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be equal or greater than or equal to {{ error.min }}.</p-message></ng-template>\n        <ng-template valError=\"max\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be smaller than or equal to {{ error.max }}.</p-message></ng-template>\n        <ng-template valError=\"minlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be equal or greater than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"maxlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be shorter than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"pattern\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The value for '{{prompt()}}' does not match the pattern {{ error }}.</p-message></ng-template>\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n@if (form()) {\n    <val-errors [control]=\"form()!\">\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ValidationErrorsComponent, selector: "val-errors", inputs: ["control", "controlName", "label"] }, { kind: "directive", type: ValidationErrorDirective, selector: "ng-template[valError]", inputs: ["valError"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i1$4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldValidationErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldValidationErrorsComponent, isStandalone: true, selector: "rw-validation-errors", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property() && property()?.type !== PropertyType.Hidden) {\n    <val-errors [controlName]=\"name()\">\n        <ng-template valError=\"required\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The field '{{prompt()}}' is required.</p-message></ng-template>\n        <ng-template valError=\"email\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be a valid email address.</p-message></ng-template>\n        <ng-template valError=\"min\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be equal or greater than or equal to {{ error.min }}.</p-message></ng-template>\n        <ng-template valError=\"max\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be smaller than or equal to {{ error.max }}.</p-message></ng-template>\n        <ng-template valError=\"minlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be equal or greater than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"maxlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be shorter than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"pattern\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The value for '{{prompt()}}' does not match the pattern {{ error }}.</p-message></ng-template>\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n@if (form()) {\n    <val-errors [control]=\"form()!\">\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ValidationErrorsComponent, selector: "val-errors", inputs: ["control", "controlName", "label"] }, { kind: "directive", type: ValidationErrorDirective, selector: "ng-template[valError]", inputs: ["valError"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i1$4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldValidationErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldValidationErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-validation-errors', standalone: true, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [ValidationErrorsComponent, ValidationErrorDirective, MessageModule], template: "@if (property() && property()?.type !== PropertyType.Hidden) {\n    <val-errors [controlName]=\"name()\">\n        <ng-template valError=\"required\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The field '{{prompt()}}' is required.</p-message></ng-template>\n        <ng-template valError=\"email\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be a valid email address.</p-message></ng-template>\n        <ng-template valError=\"min\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be equal or greater than or equal to {{ error.min }}.</p-message></ng-template>\n        <ng-template valError=\"max\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">'{{prompt()}}' must be smaller than or equal to {{ error.max }}.</p-message></ng-template>\n        <ng-template valError=\"minlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be equal or greater than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"maxlength\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The length of '{{prompt()}}' must be shorter than or equal to {{ error.requiredLength }}.</p-message></ng-template>\n        <ng-template valError=\"pattern\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">The value for '{{prompt()}}' does not match the pattern {{ error }}.</p-message></ng-template>\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n@if (form()) {\n    <val-errors [control]=\"form()!\">\n        <ng-template valError=\"remote\" let-error=\"error\"><p-message severity=\"error\" variant=\"simple\" size=\"small\">{{ error }}</p-message></ng-template>\n    </val-errors>\n}\n" }]
         }] });
@@ -1987,46 +2188,46 @@ const debounce = (fn, delayMilliseconds = 300) => {
  * Implements ControlValueAccessor to work with Angular forms.
  */
 class RestWorldImageComponent {
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     accept = computed(() => {
         const property = this.property();
-        return (property.restWorldImage.accept ?? typeof property.placeholder === "string") ? property.placeholder : "image/*";
-    });
-    alignImage = computed(() => this.property().restWorldImage.alignImage ?? "center");
+        return property.restWorldImage.accept ?? typeof property.placeholder === "string" ? property.placeholder : "image/*";
+    }, ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    alignImage = computed(() => this.property().restWorldImage.alignImage ?? "center", ...(ngDevMode ? [{ debugName: "alignImage" }] : []));
     alt = computed(() => {
         const property = this.property();
         return property.prompt ?? property.name;
-    });
-    aspectRatio = computed(() => this.property().restWorldImage.aspectRatio ?? 1);
+    }, ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    aspectRatio = computed(() => this.property().restWorldImage.aspectRatio ?? 1, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
     // If no background color is set, we set it to white.
     // Otherwise the color picker would show red, the input would be empty and the image cropper would show transparent.
-    backgroundColor = model("#ffffff");
-    canvasRotation = computed(() => this.property().restWorldImage.canvasRotation);
-    containWithinAspectRatio = computed(() => this.property().restWorldImage.containWithinAspectRatio);
-    cropper = computed(() => this.property().restWorldImage.cropper);
-    cropperMaxHeight = computed(() => this.property().restWorldImage.cropperMaxHeight);
-    cropperMaxWidth = computed(() => this.property().restWorldImage.cropperMaxWidth);
-    cropperMinHeight = computed(() => this.property().restWorldImage.cropperMinHeight);
-    cropperMinWidth = computed(() => this.property().restWorldImage.cropperMinWidth);
-    cropperStaticHeight = computed(() => this.property().restWorldImage.cropperStaticHeight);
-    cropperStaticWidth = computed(() => this.property().restWorldImage.cropperStaticWidth);
-    dialogs = viewChildren(Dialog);
-    disabled = signal(false);
-    fileUploads = viewChildren(FileUpload);
-    filename = computed(() => this.property().name + "." + (this.property().restWorldImage.format ?? ".png"));
-    format = computed(() => this.property().restWorldImage.format);
-    imageCroppers = viewChildren(ImageCropperComponent);
-    imageQuality = computed(() => this.property().restWorldImage.imageQuality);
-    initialStepSize = computed(() => this.property().restWorldImage.initialStepSize);
-    maintainAspectRatio = computed(() => this.property().restWorldImage.maintainAspectRatio);
-    onlyScaleDown = computed(() => this.property().restWorldImage.onlyScaleDown);
-    resizeToHeight = computed(() => this.property().restWorldImage.resizeToHeight);
-    resizeToWidth = computed(() => this.property().restWorldImage.resizeToWidth);
-    roundCropper = computed(() => this.property().restWorldImage.roundCropper);
-    displayCropDialog = model(false);
+    backgroundColor = model("#ffffff", ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    canvasRotation = computed(() => this.property().restWorldImage.canvasRotation, ...(ngDevMode ? [{ debugName: "canvasRotation" }] : []));
+    containWithinAspectRatio = computed(() => this.property().restWorldImage.containWithinAspectRatio, ...(ngDevMode ? [{ debugName: "containWithinAspectRatio" }] : []));
+    cropper = computed(() => this.property().restWorldImage.cropper, ...(ngDevMode ? [{ debugName: "cropper" }] : []));
+    cropperMaxHeight = computed(() => this.property().restWorldImage.cropperMaxHeight, ...(ngDevMode ? [{ debugName: "cropperMaxHeight" }] : []));
+    cropperMaxWidth = computed(() => this.property().restWorldImage.cropperMaxWidth, ...(ngDevMode ? [{ debugName: "cropperMaxWidth" }] : []));
+    cropperMinHeight = computed(() => this.property().restWorldImage.cropperMinHeight, ...(ngDevMode ? [{ debugName: "cropperMinHeight" }] : []));
+    cropperMinWidth = computed(() => this.property().restWorldImage.cropperMinWidth, ...(ngDevMode ? [{ debugName: "cropperMinWidth" }] : []));
+    cropperStaticHeight = computed(() => this.property().restWorldImage.cropperStaticHeight, ...(ngDevMode ? [{ debugName: "cropperStaticHeight" }] : []));
+    cropperStaticWidth = computed(() => this.property().restWorldImage.cropperStaticWidth, ...(ngDevMode ? [{ debugName: "cropperStaticWidth" }] : []));
+    dialogs = viewChildren(Dialog, ...(ngDevMode ? [{ debugName: "dialogs" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    fileUploads = viewChildren(FileUpload, ...(ngDevMode ? [{ debugName: "fileUploads" }] : []));
+    filename = computed(() => this.property().name + "." + (this.property().restWorldImage.format ?? ".png"), ...(ngDevMode ? [{ debugName: "filename" }] : []));
+    format = computed(() => this.property().restWorldImage.format, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    imageCroppers = viewChildren(ImageCropperComponent, ...(ngDevMode ? [{ debugName: "imageCroppers" }] : []));
+    imageQuality = computed(() => this.property().restWorldImage.imageQuality, ...(ngDevMode ? [{ debugName: "imageQuality" }] : []));
+    initialStepSize = computed(() => this.property().restWorldImage.initialStepSize, ...(ngDevMode ? [{ debugName: "initialStepSize" }] : []));
+    maintainAspectRatio = computed(() => this.property().restWorldImage.maintainAspectRatio, ...(ngDevMode ? [{ debugName: "maintainAspectRatio" }] : []));
+    onlyScaleDown = computed(() => this.property().restWorldImage.onlyScaleDown, ...(ngDevMode ? [{ debugName: "onlyScaleDown" }] : []));
+    resizeToHeight = computed(() => this.property().restWorldImage.resizeToHeight, ...(ngDevMode ? [{ debugName: "resizeToHeight" }] : []));
+    resizeToWidth = computed(() => this.property().restWorldImage.resizeToWidth, ...(ngDevMode ? [{ debugName: "resizeToWidth" }] : []));
+    roundCropper = computed(() => this.property().restWorldImage.roundCropper, ...(ngDevMode ? [{ debugName: "roundCropper" }] : []));
+    displayCropDialog = model(false, ...(ngDevMode ? [{ debugName: "displayCropDialog" }] : []));
     tempCroppedUri;
-    tempImageFile = signal(undefined);
-    uri = signal(undefined);
+    tempImageFile = signal(undefined, ...(ngDevMode ? [{ debugName: "tempImageFile" }] : []));
+    uri = signal(undefined, ...(ngDevMode ? [{ debugName: "uri" }] : []));
     onChange;
     constructor() {
         effect(() => this.property().restWorldImage.backgroundColor = this.backgroundColor());
@@ -2071,14 +2272,14 @@ class RestWorldImageComponent {
     writeValue(obj) {
         this.uri.set(obj);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldImageComponent, isStandalone: true, selector: "rw-image", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, displayCropDialog: { classPropertyName: "displayCropDialog", publicName: "displayCropDialog", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundColor: "backgroundColorChange", displayCropDialog: "displayCropDialogChange" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RestWorldImageComponent, isStandalone: true, selector: "rw-image", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, displayCropDialog: { classPropertyName: "displayCropDialog", publicName: "displayCropDialog", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundColor: "backgroundColorChange", displayCropDialog: "displayCropDialogChange" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RestWorldImageComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "dialogs", predicate: Dialog, descendants: true, isSignal: true }, { propertyName: "fileUploads", predicate: FileUpload, descendants: true, isSignal: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail mr-1\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteImage()\"/>\r\n    }\r\n</div>\r\n\r\n<p-dialog [header]=\"alt()\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n    [autoCrop]=\"true\"\r\n    (imageCropped)=\"croppedImageChanged($event)\"\r\n    [alignImage]=\"alignImage()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\r\n    ></image-cropper>\r\n    <div class=\"flex justify-content-end\">\r\n        <div class=\"flex-auto align-items-center\">\r\n            <span>Background color:&nbsp;</span>\r\n            <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n            <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n        </div>\r\n        <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n        <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n    </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }, { 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: "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+            }], viewQueries: [{ propertyName: "dialogs", predicate: Dialog, descendants: true, isSignal: true }, { propertyName: "fileUploads", predicate: FileUpload, descendants: true, isSignal: true }, { propertyName: "imageCroppers", predicate: ImageCropperComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail mr-1\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteImage()\"/>\r\n    }\r\n</div>\r\n\r\n<p-dialog [header]=\"alt()\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n    [autoCrop]=\"true\"\r\n    (imageCropped)=\"croppedImageChanged($event)\"\r\n    [alignImage]=\"alignImage()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\r\n    ></image-cropper>\r\n    <div class=\"flex justify-content-end\">\r\n        <div class=\"flex-auto align-items-center\">\r\n            <span>Background color:&nbsp;</span>\r\n            <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n            <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n        </div>\r\n        <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n        <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n    </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"], dependencies: [{ kind: "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: "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: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$2.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rw-image', standalone: true, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2087,14 +2288,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         }], imports: [SafeUrlPipe, ButtonModule, ImageCropperComponent, FileUploadModule, DialogModule, ColorPickerModule, FormsModule], template: "<div class=\"flex align-items-center\">\r\n    @if (uri()) {\r\n        <a [href]=\"uri() | safeUrl\" [download]=\"filename()\" class=\"mr-1\" pButton pTooltip=\"Download image\" icon=\"pi pi-download\"></a>\r\n    }\r\n    @else {\r\n        <p-button [disabled]=\"true\" icon=\"pi pi-download\" class=\"mr-1\" pTooltip=\"No image present\"></p-button>\r\n    }\r\n\r\n    <p-fileUpload class=\"mr-1\" chooseIcon=\"pi-upload fas fa-upload\" [chooseButtonProps]=\"{ label: '' }\" mode=\"basic\" [auto]=\"true\" [accept]=\"accept()\" [customUpload]=\"true\" (uploadHandler)=\"imageChanged($event)\" pTooltip=\"Upload new image\"></p-fileUpload>\r\n\r\n    @if (uri()) {\r\n        <img class=\"thumbnail mr-1\" [src]=\"uri() | safeUrl\" [alt]=\"alt()\" (click)=\"showCropDialog()\" pTooltip=\"Zoom and crop\" />\r\n        <p-button icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\" (onClick)=\"deleteImage()\"/>\r\n    }\r\n</div>\r\n\r\n<p-dialog [header]=\"alt()\" [(visible)]=\"displayCropDialog\">\r\n  <image-cropper\r\n    [autoCrop]=\"true\"\r\n    (imageCropped)=\"croppedImageChanged($event)\"\r\n    [alignImage]=\"alignImage()\"\r\n    [aspectRatio]=\"aspectRatio()\"\r\n    [backgroundColor]=\"backgroundColor()\"\r\n    [canvasRotation]=\"canvasRotation()\"\r\n    [containWithinAspectRatio]=\"containWithinAspectRatio()\"\r\n    [cropper]=\"cropper()\"\r\n    [cropperMaxHeight]=\"cropperMaxHeight()\"\r\n    [cropperMaxWidth]=\"cropperMaxWidth()\"\r\n    [cropperMinHeight]=\"cropperMinHeight()\"\r\n    [cropperMinWidth]=\"cropperMinWidth()\"\r\n    [cropperStaticHeight]=\"cropperStaticHeight()\"\r\n    [cropperStaticWidth]=\"cropperStaticWidth()\"\r\n    [format]=\"format()\"\r\n    [imageQuality]=\"imageQuality()\"\r\n    [initialStepSize]=\"initialStepSize()\"\r\n    [maintainAspectRatio]=\"maintainAspectRatio()\"\r\n    [onlyScaleDown]=\"onlyScaleDown()\"\r\n    [resizeToWidth]=\"resizeToWidth()\"\r\n    [resizeToHeight]=\"resizeToHeight()\"\r\n    [roundCropper]=\"roundCropper()\"\r\n    [imageFile]=\"tempImageFile()\"\r\n    [imageURL]=\"uri()\"\r\n    output=\"base64\"\r\n    ></image-cropper>\r\n    <div class=\"flex justify-content-end\">\r\n        <div class=\"flex-auto align-items-center\">\r\n            <span>Background color:&nbsp;</span>\r\n            <p-colorPicker [(ngModel)]=\"backgroundColor\" appendTo=\"body\" class=\"ml-1 mr-1\"></p-colorPicker>\r\n            <input pInputText [(ngModel)]=\"backgroundColor\" />\r\n        </div>\r\n        <button type=\"button\" pButton pRipple (click)=\"acceptCroppedImage()\" class=\"mr-2\">Ok</button>\r\n        <button type=\"button\" pButton pRipple (click)=\"closeCropDialog()\">Cancel</button>\r\n    </div>\r\n</p-dialog>\r\n", styles: ["img.thumbnail{height:calc(1rem + 18px);cursor:zoom-in;border-radius:3px}a{text-decoration:none}a.p-button-icon-only span.p-button-label{height:1rem!important}\n"] }]
         }], ctorParameters: () => [] });
 
+function setValueOfInputSignal(signal, value) {
+    const node = signal[SIGNAL];
+    signalSetFn(node, value);
+    // There is node.applyValueToInputSignal(node, value); too but it does not accept InputSignalWithTransform<T, TransformT>
+}
 /**
  * This directive sets the attributes of a p-inputNumber element based on the property.
  * It sets the mode, minFractionDigits and maxFractionDigits attributes.
  * Thses are based on the properties step value.
  */
 class PropertyInputNumberAttributes {
-    formControlProperty = input();
-    propertyAttributes = input();
+    formControlProperty = input(...(ngDevMode ? [undefined, { debugName: "formControlProperty" }] : []));
+    propertyAttributes = input(...(ngDevMode ? [undefined, { debugName: "propertyAttributes" }] : []));
     constructor(inputNumber) {
         // We need to set it to the maximum value in the constructor, because for some reason lowering it in the effect works, but raising it does not.
         inputNumber.maxFractionDigits = 100;
@@ -2112,7 +2318,7 @@ class PropertyInputNumberAttributes {
             element.showButtons = !property.readOnly;
             element.minFractionDigits = 0;
             if (property.step)
-                element.step = property.step;
+                setValueOfInputSignal(element.step, property.step);
             if (!property.step || property.step < 0) {
                 element.mode = "decimal";
             }
@@ -2131,10 +2337,10 @@ class PropertyInputNumberAttributes {
         }
         return count;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyInputNumberAttributes, deps: [{ token: i1$5.InputNumber, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: PropertyInputNumberAttributes, isStandalone: true, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyInputNumberAttributes, deps: [{ token: i1$5.InputNumber, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: PropertyInputNumberAttributes, isStandalone: true, selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyInputNumberAttributes, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyInputNumberAttributes, decorators: [{
             type: Directive,
             args: [{
                     selector: "p-inputNumber[formControlProperty], p-inputNumber[propertyAttributes]",
@@ -2158,8 +2364,8 @@ class PropertySelectAttributes {
     /**
      * The property to display.
      */
-    formControlProperty = input();
-    propertyAttributes = input();
+    formControlProperty = input(...(ngDevMode ? [undefined, { debugName: "formControlProperty" }] : []));
+    propertyAttributes = input(...(ngDevMode ? [undefined, { debugName: "propertyAttributes" }] : []));
     constructor(select, multiSelect) {
         effect(() => {
             const property = this.formControlProperty() ?? this.propertyAttributes();
@@ -2185,9 +2391,11 @@ class PropertySelectAttributes {
             element.filterBy = promptField + "," + valueField;
             element.filter = true;
             element.showClear = !property.required || (options.minItems ?? 0) <= 0;
-            element.appendTo = "body";
+            // element.appendTo = "body";
+            setValueOfInputSignal(element.appendTo, "body");
             if (element instanceof Select) {
-                element.required = property.required || (options.minItems ?? 0) > 0;
+                // element.required = property.required || (options.minItems ?? 0) > 0;
+                setValueOfInputSignal(element.required, property.required || (options.minItems ?? 0) > 0);
                 element.filterPlaceholder = options.link?.href ? "search for more results" : "";
             }
             else if (element instanceof MultiSelect) {
@@ -2199,10 +2407,10 @@ class PropertySelectAttributes {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertySelectAttributes, deps: [{ token: i2$4.Select, optional: true, self: true }, { token: i3$2.MultiSelect, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: PropertySelectAttributes, isStandalone: true, selector: "p-select[formControlProperty], p-select[propertyAttributes], p-multiSelect[formControlProperty], p-multiSelect[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertySelectAttributes, deps: [{ token: i2$4.Select, optional: true, self: true }, { token: i3$2.MultiSelect, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: PropertySelectAttributes, isStandalone: true, selector: "p-select[formControlProperty], p-select[propertyAttributes], p-multiSelect[formControlProperty], p-multiSelect[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertySelectAttributes, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertySelectAttributes, decorators: [{
             type: Directive,
             args: [{
                     selector: "p-select[formControlProperty], p-select[propertyAttributes], p-multiSelect[formControlProperty], p-multiSelect[propertyAttributes]",
@@ -2230,8 +2438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 class PropertyAttributes {
     elementRef;
     renderer;
-    formControlProperty = input();
-    propertyAttributes = input();
+    formControlProperty = input(...(ngDevMode ? [undefined, { debugName: "formControlProperty" }] : []));
+    propertyAttributes = input(...(ngDevMode ? [undefined, { debugName: "propertyAttributes" }] : []));
     constructor(elementRef, renderer) {
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -2275,10 +2483,10 @@ class PropertyAttributes {
                 this.renderer.setAttribute(nativeElement, "minlength", property.minLength.toString());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyAttributes, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: PropertyAttributes, isStandalone: true, selector: "[formControlProperty],[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyAttributes, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: PropertyAttributes, isStandalone: true, selector: "[formControlProperty],[propertyAttributes]", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: false, transformFunction: null }, propertyAttributes: { classPropertyName: "propertyAttributes", publicName: "propertyAttributes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyAttributes, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyAttributes, decorators: [{
             type: Directive,
             args: [{
                     selector: "[formControlProperty],[propertyAttributes]",
@@ -2291,7 +2499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * <input [formControlProperty]="property" />
  */
 class FormControlProperty extends FormControlName {
-    formControlProperty = input.required();
+    formControlProperty = input.required(...(ngDevMode ? [{ debugName: "formControlProperty" }] : []));
     _propertyAdded = false;
     constructor(parent, validators, asyncValidators, valueAccessors) {
         super(parent, validators, asyncValidators, valueAccessors, null);
@@ -2312,15 +2520,15 @@ class FormControlProperty extends FormControlName {
         }
         super.ngOnChanges(changes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormControlProperty, deps: [{ token: i2$3.ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: FormControlProperty, isStandalone: true, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormControlProperty, deps: [{ token: i2$3.ControlContainer, host: true, optional: true, skipSelf: true }, { token: NG_VALIDATORS, optional: true, self: true }, { token: NG_ASYNC_VALIDATORS, optional: true, self: true }, { token: NG_VALUE_ACCESSOR, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: FormControlProperty, isStandalone: true, selector: "[formControlProperty]:not([useTemplateDrivenForms=true])", inputs: { formControlProperty: { classPropertyName: "formControlProperty", publicName: "formControlProperty", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: NgControl,
                 useExisting: forwardRef(() => FormControlProperty),
             },
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormControlProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormControlProperty, decorators: [{
             type: Directive,
             args: [{
                     selector: "[formControlProperty]:not([useTemplateDrivenForms=true])",
@@ -2360,8 +2568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     args: [NG_VALUE_ACCESSOR]
                 }] }] });
 class DefaultPropertyValueAccessor extends DefaultValueAccessor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DefaultPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: DefaultPropertyValueAccessor, isStandalone: true, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DefaultPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DefaultPropertyValueAccessor, isStandalone: true, selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DefaultPropertyValueAccessor),
@@ -2369,7 +2577,7 @@ class DefaultPropertyValueAccessor extends DefaultValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DefaultPropertyValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DefaultPropertyValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: "input:not([type=checkbox])[formControlProperty], textarea[formControlProperty], select[formControlProperty]",
@@ -2383,8 +2591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 class CheckboxPropertyValueAccessor extends CheckboxControlValueAccessor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CheckboxPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: CheckboxPropertyValueAccessor, isStandalone: true, selector: "input[type=checkbox][formControlProperty]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: CheckboxPropertyValueAccessor, isStandalone: true, selector: "input[type=checkbox][formControlProperty]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxPropertyValueAccessor),
@@ -2392,7 +2600,7 @@ class CheckboxPropertyValueAccessor extends CheckboxControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CheckboxPropertyValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxPropertyValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=checkbox][formControlProperty]",
@@ -2406,8 +2614,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 class SelectPropertyValueAccessor extends SelectControlValueAccessor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SelectPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: SelectPropertyValueAccessor, isStandalone: true, selector: "select:not([multiple])[formControlProperty]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SelectPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: SelectPropertyValueAccessor, isStandalone: true, selector: "select:not([multiple])[formControlProperty]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectPropertyValueAccessor),
@@ -2415,7 +2623,7 @@ class SelectPropertyValueAccessor extends SelectControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SelectPropertyValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SelectPropertyValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: "select:not([multiple])[formControlProperty]",
@@ -2429,8 +2637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 class RangePropertyValueAccessor extends RangeValueAccessor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RangePropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: RangePropertyValueAccessor, isStandalone: true, selector: "input[type=range][formControlProperty]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RangePropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: RangePropertyValueAccessor, isStandalone: true, selector: "input[type=range][formControlProperty]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RangePropertyValueAccessor),
@@ -2438,7 +2646,7 @@ class RangePropertyValueAccessor extends RangeValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RangePropertyValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RangePropertyValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=range][formControlProperty]",
@@ -2452,8 +2660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 class NumberPropertyValueAccessor extends NumberValueAccessor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NumberPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: NumberPropertyValueAccessor, isStandalone: true, selector: "input[type=number][formControlProperty]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NumberPropertyValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: NumberPropertyValueAccessor, isStandalone: true, selector: "input[type=number][formControlProperty]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NumberPropertyValueAccessor),
@@ -2461,7 +2669,7 @@ class NumberPropertyValueAccessor extends NumberValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NumberPropertyValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NumberPropertyValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=number][formControlProperty]",
@@ -2487,10 +2695,10 @@ class PropertyControlStatus extends NgControlStatus {
     constructor(cd) {
         super(cd);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyControlStatus, deps: [{ token: i2$3.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: PropertyControlStatus, isStandalone: true, selector: "[formControlProperty]", host: { properties: { "class.ng-untouched": "isUntouched", "class.ng-touched": "isTouched", "class.ng-pristine": "isPristine", "class.ng-dirty": "isDirty", "class.ng-valid": "isValid", "class.ng-invalid": "isInvalid", "class.ng-pending": "isPending" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyControlStatus, deps: [{ token: i2$3.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: PropertyControlStatus, isStandalone: true, selector: "[formControlProperty]", host: { properties: { "class.ng-untouched": "isUntouched", "class.ng-touched": "isTouched", "class.ng-pristine": "isPristine", "class.ng-dirty": "isDirty", "class.ng-valid": "isValid", "class.ng-invalid": "isInvalid", "class.ng-pending": "isPending" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PropertyControlStatus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PropertyControlStatus, decorators: [{
             type: Directive,
             args: [{
                     selector: "[formControlProperty]",
@@ -2500,11 +2708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     type: Self
                 }] }] });
 class HalFormsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: HalFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: HalFormsModule, imports: [FormControlProperty, DefaultPropertyValueAccessor, CheckboxPropertyValueAccessor, SelectPropertyValueAccessor, RangePropertyValueAccessor, NumberPropertyValueAccessor, PropertyControlStatus, PropertySelectAttributes, PropertyAttributes, PropertyInputNumberAttributes, ReactiveFormsModule], exports: [FormControlProperty, DefaultPropertyValueAccessor, CheckboxPropertyValueAccessor, SelectPropertyValueAccessor, RangePropertyValueAccessor, NumberPropertyValueAccessor, PropertyControlStatus, PropertySelectAttributes, PropertyAttributes, PropertyInputNumberAttributes, ReactiveFormsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: HalFormsModule, imports: [ReactiveFormsModule, ReactiveFormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HalFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HalFormsModule, imports: [FormControlProperty, DefaultPropertyValueAccessor, CheckboxPropertyValueAccessor, SelectPropertyValueAccessor, RangePropertyValueAccessor, NumberPropertyValueAccessor, PropertyControlStatus, PropertySelectAttributes, PropertyAttributes, PropertyInputNumberAttributes, ReactiveFormsModule], exports: [FormControlProperty, DefaultPropertyValueAccessor, CheckboxPropertyValueAccessor, SelectPropertyValueAccessor, RangePropertyValueAccessor, NumberPropertyValueAccessor, PropertyControlStatus, PropertySelectAttributes, PropertyAttributes, PropertyInputNumberAttributes, ReactiveFormsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HalFormsModule, imports: [ReactiveFormsModule, ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: HalFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HalFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormControlProperty, DefaultPropertyValueAccessor, CheckboxPropertyValueAccessor, SelectPropertyValueAccessor, RangePropertyValueAccessor, NumberPropertyValueAccessor, PropertyControlStatus, PropertySelectAttributes, PropertyAttributes, PropertyInputNumberAttributes, ReactiveFormsModule],
@@ -2520,16 +2728,16 @@ class RestWorldInputBaseComponent {
      * The property to display.
      * @required
      */
-    property = model.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.
      */
-    useTemplateDrivenForms = input(false);
-    model = model();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", 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 });
+    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: "19.1.6", ngImport: i0, type: RestWorldInputBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputBaseComponent, decorators: [{
             type: Directive
         }] });
 /**
@@ -2541,11 +2749,11 @@ class RestWorldInputLazyLoadBaseComponent extends RestWorldInputBaseComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: RestWorldInputLazyLoadBaseComponent, isStandalone: true, inputs: { apiName: { classPropertyName: "apiName", publicName: "apiName", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    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: "19.1.6", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldInputLazyLoadBaseComponent, decorators: [{
             type: Directive
         }] });
 /**
@@ -2556,10 +2764,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * <rw-form-element [property]="property" [apiName]="apiName"></rw-form-element>
  */
 class RestWorldFormElementComponent extends RestWorldInputLazyLoadBaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFormElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", 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 }] });
+    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: "19.1.6", ngImport: i0, type: RestWorldFormElementComponent, decorators: [{
+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" }]
         }] });
@@ -2574,9 +2782,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 class RestWorldInputCollectionComponent extends RestWorldInputLazyLoadBaseComponent {
     _formService;
     _controlContainer;
-    defaultTemplate = computed(() => this.property()._templates.default);
-    innerFormArray = computed(() => this._controlContainer.control?.controls[this.property().name]);
-    templates = computed(() => this.getCollectionEntryTemplates(this.property()));
+    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();
@@ -2623,10 +2831,10 @@ class RestWorldInputCollectionComponent extends RestWorldInputLazyLoadBaseCompon
         this.property.update((property) => { delete property._templates[title]; return { ...property }; });
         this.innerFormArray().removeAt(title);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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]=\"defaultTemplate()\" [apiName]=\"apiName()\" class=\"w-full\"></rw-input-template>\n                    <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n                </div>\n            </div>\n        }\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "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"], 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 }] });
+    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]=\"defaultTemplate()\" [apiName]=\"apiName()\" class=\"w-full\"></rw-input-template>\n                    <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n                </div>\n            </div>\n        }\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"], dependencies: [{ kind: "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: "19.1.6", ngImport: i0, type: RestWorldInputCollectionComponent, decorators: [{
+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]=\"defaultTemplate()\" [apiName]=\"apiName()\" class=\"w-full\"></rw-input-template>\n                    <button pButton pRipple type=\"button\" icon=\"fas fa-trash\" class=\"p-button-outlined p-button-danger ml-2 mb-3\" (click)=\"deleteItemFromCollection(template)\"></button>\n                </div>\n            </div>\n        }\n        <div class=\"flex justify-content-end w-full\">\n            <button pButton pRipple type=\"button\" icon=\"fas fa-plus\" class=\"p-button-outlined p-button-info\" (click)=\"addNewItemToCollection()\"></button>\n        </div>\n    </div>\n</div>", styles: [".cdk-drag-handle{cursor:move}.cdk-drag-preview{background-color:#ffffffd0;border:2px dashed rgb(206,212,218);cursor:move}.cdk-drag-placeholder{border:2px dashed rgb(206,212,218);margin:-2px}.brace{align-self:stretch;margin:.2rem .5rem;border-left:1px solid rgb(206,212,218);border-top:1px solid rgb(206,212,218);border-bottom:1px solid rgb(206,212,218);width:1rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormService }, { type: i2$3.ControlContainer }], propDecorators: { inputCollectionRef: [{
@@ -2649,10 +2857,10 @@ class RestWorldInputComponent extends RestWorldInputLazyLoadBaseComponent {
     get PropertyWithOptions() {
         return PropertyWithOptions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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 }] });
+    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: "19.1.6", ngImport: i0, type: RestWorldInputComponent, decorators: [{
+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" }]
         }] });
@@ -2671,7 +2879,7 @@ class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponen
      * A flag that indicates if the search should be case sensitive.
      * The default is false.
      */
-    caseSensitive = input(false);
+    caseSensitive = input(false, ...(ngDevMode ? [{ debugName: "caseSensitive" }] : []));
     /**
      * A function that returns the label for the given item.
      * The default returns the prompt and optionally the value in brackets.
@@ -2679,7 +2887,7 @@ class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponen
      * Overwrite this function to change the label.
      * @param item The item to get the label for.
      */
-    getLabel = input();
+    getLabel = input(...(ngDevMode ? [undefined, { debugName: "getLabel" }] : []));
     /**
      * 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.
@@ -2687,10 +2895,10 @@ class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponen
      * Overwrite this function to change the tooltip.
      * @param item The item to get the label for.
      */
-    getTooltip = input();
-    inputOptionsMultipleRef = contentChild("inputOptionsMultiple");
-    inputOptionsSingleRef = contentChild("inputOptionsSingle");
-    multiSelect = viewChild(MultiSelect);
+    getTooltip = input(...(ngDevMode ? [undefined, { debugName: "getTooltip" }] : []));
+    inputOptionsMultipleRef = contentChild("inputOptionsMultiple", ...(ngDevMode ? [{ debugName: "inputOptionsMultipleRef" }] : []));
+    inputOptionsSingleRef = contentChild("inputOptionsSingle", ...(ngDevMode ? [{ debugName: "inputOptionsSingleRef" }] : []));
+    multiSelect = viewChild(MultiSelect, ...(ngDevMode ? [{ debugName: "multiSelect" }] : []));
     /**
      * An event that is emitted when the selected value changes.
      */
@@ -2700,7 +2908,7 @@ class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponen
     _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)), 
@@ -2768,10 +2976,10 @@ class RestWorldInputDropdownComponent extends RestWorldInputLazyLoadBaseComponen
             return `toupper(${filter})`;
         return filter.toUpperCase();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputDropdownComponent, deps: [{ token: i2$3.ControlContainer }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], 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", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "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: 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 }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputDropdownComponent, decorators: [{
+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()\"\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 }] });
@@ -2785,7 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  */
 class RestWorldInputObjectComponent extends RestWorldInputLazyLoadBaseComponent {
     _controlContainer;
-    inputObjectRef = contentChild("inputObject");
+    inputObjectRef = contentChild("inputObject", ...(ngDevMode ? [{ debugName: "inputObjectRef" }] : []));
     constructor(_controlContainer) {
         super();
         this._controlContainer = _controlContainer;
@@ -2793,11 +3001,11 @@ class RestWorldInputObjectComponent extends RestWorldInputLazyLoadBaseComponent
     innerFormGroup = computed(() => {
         const formGroup = this._controlContainer.control;
         return formGroup.controls[this.property().name];
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputObjectComponent, deps: [{ token: i2$3.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.6", 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 }] });
+    }, ...(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: "19.1.6", ngImport: i0, type: RestWorldInputObjectComponent, decorators: [{
+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 }] });
@@ -2820,8 +3028,8 @@ class RestWorldInputSimpleComponent extends RestWorldInputBaseComponent {
         .replace("22", "hh")
         .replace("33", "mm")
         .replace("44", "ss");
-    _inputChild = viewChild("inputElement");
-    _controlChild = viewChild(NG_VALUE_ACCESSOR);
+    _inputChild = viewChild("inputElement", ...(ngDevMode ? [{ debugName: "_inputChild" }] : []));
+    _controlChild = viewChild(NG_VALUE_ACCESSOR, ...(ngDevMode ? [{ debugName: "_controlChild" }] : []));
     constructor() {
         super();
     }
@@ -2877,20 +3085,20 @@ class RestWorldInputSimpleComponent extends RestWorldInputBaseComponent {
     get timeFormat() {
         return RestWorldInputSimpleComponent._timeFormat;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: RestWorldInputSimpleComponent, isStandalone: true, selector: "rw-input-simple", providers: [{
+    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) {\n    @case (PropertyType.Textarea) {\n        @if (useTemplateDrivenForms()){\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n        @else {\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n    }\n    @case (PropertyType.Date) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Month) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Time) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.DatetimeLocal) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Number) {\n        @if (useTemplateDrivenForms()) {\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n        @else {\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n    }\n    @case (PropertyType.Bool) {\n        @if (useTemplateDrivenForms()) {\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\n        }\n        @else {\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\n        }\n    }\n    @case (PropertyType.DatetimeOffset) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Duration) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Image) {\n        @if (useTemplateDrivenForms()) {\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n        @else {\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n    }\n    @case (PropertyType.File) {\n        @if (useTemplateDrivenForms()) {\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n        @else {\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n    }\n    @default {\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\n        @if (useTemplateDrivenForms()) {\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\n        }\n        @else {\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\n        }\n    }\n}\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", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], 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", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], 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: ["variant", "fluid", "pSize"] }, { 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 }] });
+            }], 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: "19.1.6", ngImport: i0, type: RestWorldInputSimpleComponent, decorators: [{
+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) {\n    @case (PropertyType.Textarea) {\n        @if (useTemplateDrivenForms()){\n            <textarea #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n        @else {\n            <textarea #inputElement [formControlProperty]=\"property()\" pInputTextarea class=\"w-full p-inputtextarea p-inputtext p-component p-element\"></textarea>\n        }\n    }\n    @case (PropertyType.Date) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"true\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Month) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showWeek]=\"false\" view=\"month\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Time) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.DatetimeLocal) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Number) {\n        @if (useTemplateDrivenForms()) {\n            <p-inputNumber [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n        @else {\n            <p-inputNumber inputMode=\"decimal\" [formControlProperty]=\"property()\" class=\"w-full\" styleClass=\"w-full\"></p-inputNumber>\n        }\n    }\n    @case (PropertyType.Bool) {\n        @if (useTemplateDrivenForms()) {\n            <rw-tri-state-checkbox [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [required]=\"property().required ?? false\"></rw-tri-state-checkbox>\n        }\n        @else {\n            <rw-tri-state-checkbox [formControlProperty]=\"property()\" [required]=\"property().required\"></rw-tri-state-checkbox>\n        }\n    }\n    @case (PropertyType.DatetimeOffset) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"dateFormat\" [showTime]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Duration) {\n        @if (useTemplateDrivenForms()) {\n            <p-datepicker [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n        @else {\n            <p-datepicker [formControlProperty]=\"property()\" [dateFormat]=\"timeFormat\" [showTime]=\"true\" [timeOnly]=\"true\" [showWeek]=\"false\" [showIcon]=\"true\" styleClass=\"w-full\"></p-datepicker>\n        }\n    }\n    @case (PropertyType.Image) {\n        @if (useTemplateDrivenForms()) {\n            <rw-image [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n        @else {\n            <rw-image [formControlName]=\"property().name\" [property]=\"$any(property())\"></rw-image>\n        }\n    }\n    @case (PropertyType.File) {\n        @if (useTemplateDrivenForms()) {\n            <rw-file [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n        @else {\n            <rw-file [formControlName]=\"property().name\" [fileName]=\"property().name\" [accept]=\"$any(property().placeholder)\"></rw-file>\n        }\n    }\n    @default {\n        <!-- <input [formControlName]=\"property().name\" [id]=\"property().name\" type=\"text\" pInputText class=\"w-full\" [class.p-disabled]=\"property().readOnly\" /> -->\n        @if (useTemplateDrivenForms()) {\n            <input #inputElement [propertyAttributes]=\"property()\" [(ngModel)]=\"model\" pInputText class=\"w-full\" />\n        }\n        @else {\n            <input #inputElement [formControlProperty]=\"property()\" pInputText class=\"w-full\" />\n        }\n    }\n}\n", styles: [".p-inputtext.ng-touched.ng-invalid{border-color:#e24c4c}\n"] }]
+                        }], 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: () => [] });
 /**
  * A collection of `<rw-form>` elements automatically created from a template.
@@ -2905,19 +3113,19 @@ class RestWorldInputTemplateComponent {
      * @required
      * @remarks This is the name of the API as defined in the `RestWorldClientCollection`.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * The template to display.
      * @required
      * @remarks This is the template that defines the properties to display.
      */
-    template = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldInputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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) {\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\n}\n", styles: [""], dependencies: [{ kind: "component", type: RestWorldFormElementComponent, selector: "rw-form-element" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    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: "19.1.6", ngImport: i0, type: RestWorldInputTemplateComponent, decorators: [{
+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) {\n    <rw-form-element [property]=\"property\" [apiName]=\"apiName()\"></rw-form-element>\n}\n" }]
+            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" }]
         }] });
 
 /**
@@ -2963,19 +3171,19 @@ class RestWorldFormComponent {
     /**
      * Determines whether to enable the delete button.
     */
-    allowDelete = input(true);
+    allowDelete = input(true, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
     /**
      * Determines whether to enable the reload button.
     */
-    allowReload = input(true);
+    allowReload = input(true, ...(ngDevMode ? [{ debugName: "allowReload" }] : []));
     /**
      * Determines whether to enable the submit button.
     */
-    allowSubmit = input(true);
+    allowSubmit = input(true, ...(ngDevMode ? [{ debugName: "allowSubmit" }] : []));
     /**
      * The name of the API to use.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * Determines whether the resource can be deleted.
      */
@@ -2986,7 +3194,7 @@ class RestWorldFormComponent {
         this.formGroup() !== undefined &&
         this.formGroup()?.value.id !== undefined &&
         this.formGroup()?.value.timestamp !== undefined &&
-        !this.isLoading());
+        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
     /**
      * Determines whether the form can be reloaded.
      */
@@ -2995,7 +3203,7 @@ class RestWorldFormComponent {
         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());
+        !this.isLoading(), ...(ngDevMode ? [{ debugName: "canReload" }] : []));
     /**
      * Determines whether the form can be submitted.
      */
@@ -3003,33 +3211,32 @@ class RestWorldFormComponent {
         this.template() !== undefined &&
         this.template().target !== undefined &&
         !this.isLoading() &&
-        this.formGroup() !== undefined &&
-        this.formGroup()?.valid);
+        this.formGroup() !== undefined, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
     /**
      * The form group that represents the form.
      */
-    formGroup = computed(() => this._formService.createFormGroupFromTemplate(this.template()));
-    isLoading = signal(false);
+    formGroup = computed(() => this._formService.createFormGroupFromTemplate(this.template()), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /**
      * The rel of the form.
      */
-    rel = input.required();
+    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
     /**
      * Determines whether to show the delete button.
     */
-    showDelete = input(true);
+    showDelete = input(true, ...(ngDevMode ? [{ debugName: "showDelete" }] : []));
     /**
      * Determines whether to show the reload button.
     */
-    showReload = input(true);
+    showReload = input(true, ...(ngDevMode ? [{ debugName: "showReload" }] : []));
     /**
      * Determines whether to show the submit button.
     */
-    showSubmit = input(true);
+    showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : []));
     /**
      * The template used to render the form.
      */
-    template = model.required();
+    template = model.required(...(ngDevMode ? [{ debugName: "template" }] : []));
     /**
      * Emitted when the form value changes.
      */
@@ -3037,12 +3244,12 @@ class RestWorldFormComponent {
     /**
      * A reference to a template that can be used to render custom buttons for the form.
     */
-    buttonsRef = contentChild('buttons');
+    buttonsRef = contentChild('buttons', ...(ngDevMode ? [{ debugName: "buttonsRef" }] : []));
     /**
      * 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');
-    _client = computed(() => this._clients.getClient(this.apiName()));
+    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;
@@ -3104,7 +3311,6 @@ class RestWorldFormComponent {
     async submit() {
         const formGroup = this.formGroup();
         const template = this.template();
-        const canSubmit = this.canSubmit();
         if (formGroup !== undefined) {
             formGroup.markAllAsTouched();
             if (!formGroup.valid) {
@@ -3114,9 +3320,10 @@ class RestWorldFormComponent {
                     detail: 'Please correct the errors before submitting.',
                 });
                 ProblemService.scrollToFirstValidationError(this._elementRef.nativeElement);
+                return;
             }
         }
-        if (!canSubmit || formGroup === undefined || template === undefined)
+        if (!this.canSubmit() || formGroup === undefined || template === undefined)
             return;
         this.isLoading.set(true);
         try {
@@ -3146,10 +3353,10 @@ class RestWorldFormComponent {
         }
         this.isLoading.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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: "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                        <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                    </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", "style", "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"] }] });
+    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: "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                        <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                    </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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldFormComponent, decorators: [{
+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                        <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                    </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 }] });
@@ -3165,17 +3372,17 @@ class RestWorldIdNavigationComponent {
     _messageService;
     _router;
     _route;
-    apiName = input.required();
-    rel = input.required();
+    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();
+    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()));
+    _client = computed(() => this._clients.getClient(this.apiName()), ...(ngDevMode ? [{ debugName: "_client" }] : []));
     constructor(_clients, _messageService, _router, _route) {
         this._clients = _clients;
         this._messageService = _messageService;
@@ -3209,10 +3416,10 @@ class RestWorldIdNavigationComponent {
             await this._router.navigate(["..", resource._links.self[0].href], { relativeTo: this._route });
         this.idNavigationForm.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], 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"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldIdNavigationComponent, decorators: [{
+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 }] });
@@ -3228,7 +3435,7 @@ class RestWorldMenuButtonComponent {
     /**
      * An array of menu items to be displayed.
      */
-    items = input.required();
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     constructor(_router) {
         this._router = _router;
     }
@@ -3263,10 +3470,10 @@ class RestWorldMenuButtonComponent {
             item.command({ item: item });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldMenuButtonComponent, deps: [{ token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }] });
+    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: "19.1.6", ngImport: i0, type: RestWorldMenuButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldMenuButtonComponent, 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 }] });
@@ -3700,10 +3907,10 @@ class ODataService {
         }
         return property.type;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ODataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ODataService, providedIn: 'root' });
+    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: "19.1.6", ngImport: i0, type: ODataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ODataService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3720,24 +3927,24 @@ class RestWorldTableColumnFilterElementComponent {
      * The filter constraint to update when the value changes.
      * This is coming from the $context of the #filter template
      */
-    filterConstraint = input.required();
+    filterConstraint = input.required(...(ngDevMode ? [{ debugName: "filterConstraint" }] : []));
     /**
      * The HAL-Forms property to filter by.
      * This is normally the column.
      */
-    property = input.required();
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     /**
      * The name of the API to use when generating dropdowns.
      */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     /**
      * The initial value of the filter.
      */
-    value = input.required();
-    form = computed(() => this._formService.createFormGroupFromTemplate(this.template()));
+    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;
@@ -3757,12 +3964,12 @@ class RestWorldTableColumnFilterElementComponent {
     ngOnDestroy() {
         this._formValueChangesSubscription?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, deps: [{ token: i1$1.FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", 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()\">\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\n</form>\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"] }] });
+    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: "19.1.6", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableColumnFilterElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-table-column-filter-element', imports: [RestWorldInputComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form()\">\n    <rw-input [property]=\"property()\" [apiName]=\"apiName()\"></rw-input>\n</form>\n" }]
+            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 }] });
 
 /**
@@ -3807,7 +4014,7 @@ class RestWorldTableComponent {
      * The name of the api.
      * For the editing capability, you must also set the editTemplate and the formArray.
      */
-    apiName = input.required();
+    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.
@@ -3816,50 +4023,50 @@ class RestWorldTableComponent {
      * @param columnIndex The index of the column.
      * @returns The style class for the cell.
      */
-    cellStyleClass = input(() => "");
-    cellStyleClasses = computed(() => this.rows().map((r, ri) => Object.fromEntries(this.columns().map((c, ci) => [c.name, this.cellStyleClass()(r, c, ri, ci)]))));
-    columns = computed(() => this.searchTemplate()?.properties.filter(p => p.type !== PropertyType.Hidden) ?? []);
-    contextMenu = viewChild("contextMenu");
-    contextMenuItems = signal([]);
+    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 ?? {});
+    editProperties = computed(() => this.editTemplate()?.propertiesRecord ?? {}, ...(ngDevMode ? [{ debugName: "editProperties" }] : []));
     /**
      * 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.
      */
-    editTemplate = input();
+    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" }] : []));
     /**
      * 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.
      */
-    formArray = computed(() => this._controlContainer?.control);
+    formArray = computed(() => this._controlContainer?.control, ...(ngDevMode ? [{ debugName: "formArray" }] : []));
     /**
      * An optional menu that is displayed at the top right of the table.
      * @see RestWorldMenuButtonComponent
      */
-    headerMenu = input([]);
-    isEditable = computed(() => this.editTemplate() !== undefined && this.formArray() !== undefined && this.apiName() !== undefined);
+    headerMenu = input([], ...(ngDevMode ? [{ debugName: "headerMenu" }] : []));
+    isEditable = computed(() => this.editTemplate() !== undefined && this.formArray() !== undefined && this.apiName() !== undefined, ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
     /**
      * 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);
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /**
      * Indicates whether the table is lazy loaded.
      * If set to true, sorting and filtering needs to be handled by the `load` event.
@@ -3867,7 +4074,7 @@ class RestWorldTableComponent {
      * The default is `true`.
      * @see load
      */
-    lazy = input(true);
+    lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
     /**
      * Indicates whether the table has a paginator.
      * If set to true, the table will display a paginator at the bottom.
@@ -3876,7 +4083,7 @@ class RestWorldTableComponent {
      * In order to customize the number of rows per page, you can set the `rowsPerPageOptions` property.
      * @see rowsPerPageOptions
      */
-    paginator = input(true);
+    paginator = input(true, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
     multiSortMeta = computed(() => {
         const orderBy = this.oDataParameters().$orderby;
         if (orderBy === null || orderBy === undefined || typeof orderBy !== "string")
@@ -3890,13 +4097,13 @@ class RestWorldTableComponent {
             const orderAsNumber = order?.toLowerCase() === "desc" ? -1 : 1;
             return { field: field, order: orderAsNumber };
         });
-    });
-    oDataParameters = model({});
-    reflectParametersInUrl = input(true);
+    }, ...(ngDevMode ? [{ debugName: "multiSortMeta" }] : []));
+    oDataParameters = model({}, ...(ngDevMode ? [{ debugName: "oDataParameters" }] : []));
+    reflectParametersInUrl = input(true, ...(ngDevMode ? [{ debugName: "reflectParametersInUrl" }] : []));
     /**
      * Indicates whether the table rows are highlighted when the mouse hovers over them.
      */
-    rowHover = input(false);
+    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.
@@ -3908,80 +4115,80 @@ class RestWorldTableComponent {
      * @see showRowMenuAsColumn
      * @see showRowMenuOnRightClick
     */
-    rowMenu = input(() => []);
+    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.
      */
-    rowStyleClass = input(() => "");
-    rowStyleClasses = computed(() => this.rows().map((r, i) => this.rowStyleClass()(r, i)));
+    rowStyleClass = input(() => "", ...(ngDevMode ? [{ debugName: "rowStyleClass" }] : []));
+    rowStyleClasses = computed(() => this.rows().map((r, i) => this.rowStyleClass()(r, i)), ...(ngDevMode ? [{ debugName: "rowStyleClasses" }] : []));
     /**
      * 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();
-    rowsBeforeCurrentPage = computed(() => this.oDataParameters().$skip ?? 0);
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    rowsBeforeCurrentPage = computed(() => this.oDataParameters().$skip ?? 0, ...(ngDevMode ? [{ debugName: "rowsBeforeCurrentPage" }] : []));
     /**
      * The number of rows per page.
      * The default is the first element of rowsPerPageOptions.
      */
-    rowsPerPage = computed(() => this.oDataParameters().$top ?? this.rowsPerPageOptions()[0]);
+    rowsPerPage = computed(() => this.oDataParameters().$top ?? this.rowsPerPageOptions()[0], ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : []));
     /**
      * The possible values for the number of rows per page.
      * The default is [10, 25, 50].
      */
-    rowsPerPageOptions = input([10, 25, 50]);
+    rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
     /**
      * The height of the scrollable table.
      * The default is "flex".
      */
-    scrollHeight = input("flex");
+    scrollHeight = input("flex", ...(ngDevMode ? [{ debugName: "scrollHeight" }] : []));
     /**
      * Indicates whether the table is scrollable.
      * The default is `true`.
      */
-    scrollable = input(true);
+    scrollable = input(true, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
     /**
      * 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();
+    searchTemplate = input.required(...(ngDevMode ? [{ debugName: "searchTemplate" }] : []));
     /**
      * The currently selected rows.
      */
-    selectedRows = model([]);
+    selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
     /**
      * The mode how rows can be selected.
      * The default is `null` which means rows cannot be selected.
      */
-    selectionMode = input(null);
-    showMenuColumn = computed(() => this.headerMenu().length > 0 || (this.showRowMenuAsColumn() && this.rowMenus().some(m => m.length > 0)));
+    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    showMenuColumn = computed(() => this.headerMenu().length > 0 || (this.showRowMenuAsColumn() && this.rowMenus().some(m => m.length > 0)), ...(ngDevMode ? [{ debugName: "showMenuColumn" }] : []));
     /**
      * Indicates whether the row menu is displayed as a column to the right of the table.
      */
-    showRowMenuAsColumn = input(true);
+    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);
+    showRowMenuOnRightClick = input(true, ...(ngDevMode ? [{ debugName: "showRowMenuOnRightClick" }] : []));
     /**
      * The style class for the table.
      * The default is "".
      */
-    styleClass = input("");
+    styleClass = input("", ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
     /**
      * The inline style for the table.
      */
-    tableStyle = input();
-    totalRecords = input(0);
-    urlParameterPrefix = input("");
+    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)
@@ -4134,20 +4341,20 @@ class RestWorldTableComponent {
     prefixObjectProperties(obj, prefix) {
         return Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${prefix}${key}`, value]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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\n  #table\n  [value]=\"rows()\"\n  [columns]=\"columns()\"\n  [lazy]=\"lazy()\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator()\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n  [rows]=\"rowsPerPage()\"\n  [totalRecords]=\"totalRecords()\"\n  [loading]=\"isLoading()\"\n  sortMode=\"multiple\"\n  [multiSortMeta]=\"multiSortMeta()\"\n  [styleClass]=\"styleClass()\"\n  [tableStyle]=\"tableStyle()\"\n  [scrollable]=\"scrollable()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [selectionMode]=\"selectionMode()\"\n  [rowHover]=\"rowHover()\"\n  [(selection)]=\"selectedRows\"\n  [filters]=\"$any(filters())\"\n  [first]=\"rowsBeforeCurrentPage()\"\n  >\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        @for (col of columns; track col) {\n            <th [pSortableColumn]=\"col.name\">\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\n                    {{col.prompt}}\n                    @if(!col.readOnly) {\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                        <p-columnFilter #f\n                            [type]=\"toColumnFilterType(col.type)\"\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\n                            matchMode=\"noFilter\"\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\n                            [showMatchModes]=\"true\"\n                            [field]=\"col.name\"\n                            display=\"menu\"\n                            [maxConstraints]=\"100\"\n                            [class.has-filter]=\"f.hasFilter\">\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\n                        </ng-template>\n                        </p-columnFilter>\n                    }\n                </div>\n            </th>\n        }\n        @if (showMenuColumn()) {\n            <th>\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\n            </th>\n        }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\n        @for (col of columns; track col) {\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\n                @let fomrArray = formArray();\n                @if (showInputField(col) && fomrArray) {\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\n                    </ng-container>\n                }\n                @else {\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\n                }\n            </td>\n        }\n        @if (showMenuColumn()) {\n            <td>\n                @if (showRowMenuAsColumn()) {\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\n                }\n            </td>\n        }\n    </tr>\n  </ng-template>\n</p-table>\n\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\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", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "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", "appendTo", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: RestWorldTableColumnFilterElementComponent, selector: "rw-table-column-filter-element", inputs: ["filterConstraint", "property", "apiName", "value"] }], viewProviders: [{
+    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,
             }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RestWorldTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RestWorldTableComponent, 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\n  #table\n  [value]=\"rows()\"\n  [columns]=\"columns()\"\n  [lazy]=\"lazy()\"\n  [lazyLoadOnInit]=\"false\"\n  (onLazyLoad)=\"load($event)\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator()\"\n  [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n  [rows]=\"rowsPerPage()\"\n  [totalRecords]=\"totalRecords()\"\n  [loading]=\"isLoading()\"\n  sortMode=\"multiple\"\n  [multiSortMeta]=\"multiSortMeta()\"\n  [styleClass]=\"styleClass()\"\n  [tableStyle]=\"tableStyle()\"\n  [scrollable]=\"scrollable()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [selectionMode]=\"selectionMode()\"\n  [rowHover]=\"rowHover()\"\n  [(selection)]=\"selectedRows\"\n  [filters]=\"$any(filters())\"\n  [first]=\"rowsBeforeCurrentPage()\"\n  >\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n        @for (col of columns; track col) {\n            <th [pSortableColumn]=\"col.name\">\n                <div class=\"p-d-flex p-jc-between p-ai-center gap-1\">\n                    {{col.prompt}}\n                    @if(!col.readOnly) {\n                        <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n                        <p-columnFilter #f\n                            [type]=\"toColumnFilterType(col.type)\"\n                            [maxFractionDigits]=\"toMaxFractionDigits(col)\"\n                            matchMode=\"noFilter\"\n                            [matchModeOptions]=\"toMatchModeOptions(col)\"\n                            [showMatchModes]=\"true\"\n                            [field]=\"col.name\"\n                            display=\"menu\"\n                            [maxConstraints]=\"100\"\n                            [class.has-filter]=\"f.hasFilter\">\n                        <ng-template #filter let-value let-filterConstraint=\"filterConstraint\" let-field=\"field\">\n                            <rw-table-column-filter-element [property]=\"col\" [value]=\"value\" [apiName]=\"apiName()\" [filterConstraint]=\"filterConstraint\"></rw-table-column-filter-element>\n                        </ng-template>\n                        </p-columnFilter>\n                    }\n                </div>\n            </th>\n        }\n        @if (showMenuColumn()) {\n            <th>\n                <rw-menu-button [items]=\"headerMenu()\"></rw-menu-button>\n            </th>\n        }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n    <tr (contextmenu)=\"openContextMenu($event, entity)\" [pSelectableRow]=\"entity\" [pSelectableRowDisabled]=\"selectionMode() === null\" [className]=\"rowStyleClasses()[rowIndex - (table.first ?? 0)]\">\n        @for (col of columns; track col) {\n            <td [className]=\"cellStyleClasses()[rowIndex - (table.first ?? 0)][col.name]\">\n                @let fomrArray = formArray();\n                @if (showInputField(col) && fomrArray) {\n                    <ng-container [formGroup]=\"fomrArray.controls[rowIndex - (table.first ?? 0)]\" >\n                        <rw-input [apiName]=\"apiName()\" [property]=\"editProperties()[col.name]!\"></rw-input>\n                    </ng-container>\n                }\n                @else {\n                    <rw-display [property]=\"col\" [value]=\"entity[col.name]\" [apiName]=\"apiName()!\"></rw-display>\n                }\n            </td>\n        }\n        @if (showMenuColumn()) {\n            <td>\n                @if (showRowMenuAsColumn()) {\n                    <rw-menu-button [items]=\"rowMenus()[rowIndex - (table.first ?? 0)]\"></rw-menu-button>\n                }\n            </td>\n        }\n    </tr>\n  </ng-template>\n</p-table>\n\n<p-contextMenu #contextMenu appendTo=\"body\" [model]=\"contextMenuItems()\"></p-contextMenu>\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"] }]
+                        }], 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) {
@@ -4186,10 +4393,10 @@ class AsPipe {
     transform(value, type) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: AsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: AsPipe, isStandalone: true, name: "as" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: AsPipe, isStandalone: true, name: "as" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: AsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'as',
@@ -4238,10 +4445,10 @@ class SettingsService {
         await Promise.all(this.settings.apiUrls
             .map(api => this._clients.addOrGetExistingClient(api.name, new RestWorldOptions(api.url, api.version))));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SettingsService, deps: [{ token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SettingsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SettingsService, deps: [{ token: RestWorldClientCollection }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SettingsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4260,86 +4467,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  */
 class OpenTelemetryService {
     _settingsService;
-    _defaultInputConfigs = {
-        "@opentelemetry/instrumentation-xml-http-request": {
-            propagateTraceHeaderCorsUrls: /.*/,
-            applyCustomAttributesOnSpan: (span, xhr) => {
-                span.setAttribute("client.address", window.location.href);
-                span.setAttribute("client.port", window.location.port);
-                span.setAttribute("browser.language", navigator.language);
-                if (URL.canParse(xhr.responseURL)) {
-                    const url = new URL(xhr.responseURL);
-                    span.setAttribute("url.domain", url.hostname);
-                    span.setAttribute("url.full", url.href);
-                    span.setAttribute("url.path", url.pathname);
-                    span.setAttribute("url.port", url.port);
-                    span.setAttribute("url.scheme", url.protocol.replace(":", ""));
-                    if (url.search)
-                        span.setAttribute("url.query", url.search.replace("?", ""));
-                    if ("name" in span && typeof span.name === "string") {
-                        span.updateName(span.name + " " + (url.pathname.startsWith("/") ? url.pathname.substring(1) : url.pathname));
-                    }
-                }
-            }
-        },
-        "@opentelemetry/instrumentation-fetch": {
-            propagateTraceHeaderCorsUrls: /.*/,
-            applyCustomAttributesOnSpan: (span, request) => {
-                span.setAttribute("client.address", window.location.href);
-                span.setAttribute("client.port", window.location.port);
-                span.setAttribute("browser.language", navigator.language);
-                if ("url" in request && typeof request.url === "string" && URL.canParse(request.url)) {
-                    const url = new URL(request.url);
-                    span.setAttribute("url.domain", url.hostname);
-                    span.setAttribute("url.full", url.href);
-                    span.setAttribute("url.path", url.pathname);
-                    span.setAttribute("url.port", url.port);
-                    span.setAttribute("url.scheme", url.protocol.replace(":", ""));
-                    if (url.search)
-                        span.setAttribute("url.query", url.search.replace("?", ""));
-                    if ("name" in span && typeof span.name === "string") {
-                        span.updateName(span.name + " " + (url.pathname.startsWith("/") ? url.pathname.substring(1) : url.pathname));
-                    }
-                }
-            }
-        },
-        "@opentelemetry/instrumentation-user-interaction": {
-            enabled: false,
-            shouldPreventSpanCreation: (eventType, element, span) => {
-                const shouldCreate = this._lastLocation !== window.location.href ||
-                    Date.now() - this._lastTime > 1000 ||
-                    this._lastElement !== element ||
-                    //(eventType === "click" && (element.tagName === "A" || element.tagName === "Button")) ||
-                    (eventType === "submit");
-                if (shouldCreate) {
-                    this._lastLocation = window.location.href;
-                    this._lastTime = Date.now();
-                    this._lastElement = element;
-                }
-                return !shouldCreate;
-            }
-        }
-    };
-    _lastElement = null;
-    _lastTime = 0;
-    _lastLocation = null;
-    constructor(_settingsService) {
+    _router;
+    _tracer;
+    _activeNavigationSpan = null;
+    _lastNavigationPath = null;
+    constructor(_settingsService, _router) {
         this._settingsService = _settingsService;
+        this._router = _router;
+        // Listen for navigation events to create parent spans
+        this._router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            this.createNavigationSpan(event.urlAfterRedirects);
+        });
+        // Listen for beforeunload event to end the span when user leaves the application
+        window.addEventListener('beforeunload', () => {
+            this.endCurrentNavigationSpan();
+        });
     }
-    async initialize(configureOptions) {
+    /**
+     * Sets the current span as active in the global context
+     * This ensures that new spans created after this will automatically
+     * become child spans of this active span
+     */
+    activateNavigationContext() {
+        if (this._activeNavigationSpan) {
+            // Make this span the active span in the current context
+            const activeContext = trace.setSpan(context.active(), this._activeNavigationSpan);
+            // Use ZoneContextManager to persist this context across async operations
+            // This is important for Angular applications that use zones
+            context.with(activeContext, () => {
+                // The context remains active for all operations within this callback
+                // and for all asynchronous operations started within this zone
+                // Set the context as a property in the window for access by other parts of the application
+                // This helps ensure the context is available for all operations
+                window.__navigationContext = activeContext;
+            });
+        }
+    }
+    /**
+     * Creates a new span to track a navigation event.
+     * This will be the parent span for any HTTP requests made during this navigation.
+     * Only creates a new span if the path has changed from the last navigation.
+     * @param url The URL being navigated to
+     */
+    createNavigationSpan(url) {
+        // Parse the URL to extract route information
+        let routePath = 'unknown';
+        try {
+            const urlObj = new URL(url, window.location.origin);
+            routePath = urlObj.pathname;
+        }
+        catch (e) {
+            routePath = url; // Use the raw URL if parsing fails
+        }
+        // If the path hasn't changed, don't create a new span
+        if (this._lastNavigationPath === routePath) {
+            return;
+        }
+        // Update the last navigation path
+        this._lastNavigationPath = routePath;
+        // End the previous span if it exists
+        if (this._activeNavigationSpan) {
+            this._activeNavigationSpan.end();
+            this._activeNavigationSpan = null;
+        }
+        if (!this._tracer) {
+            return; // Not initialized yet
+        }
+        // Create a new span for this navigation
+        this._activeNavigationSpan = this._tracer.startSpan(`Navigation to ${routePath}`, {
+            kind: SpanKind.INTERNAL,
+            attributes: {
+                'component': 'router',
+                'route.path': routePath,
+                'client.address': window.location.href,
+                'client.port': window.location.port,
+                'browser.language': navigator.language
+            }
+        });
+        // Activate this navigation span as the current context
+        this.activateNavigationContext();
+    }
+    async initialize() {
         await this._settingsService.ensureInitialized();
         const clientSettings = this._settingsService.settings;
         if (!clientSettings)
-            throw new Error('Settings are not loaded yet.');
-        const exporterEndpoint = clientSettings.extensions["OTEL_EXPORTER_OTLP_ENDPOINT"];
-        const exporterHeaders = clientSettings.extensions["OTEL_EXPORTER_OTLP_HEADERS"];
+            throw new Error('Client Settings are not loaded yet.');
+        if (!clientSettings.extensions)
+            throw new Error('Client Settings do not contain extensions.');
+        const sampler = OpenTelemetryService.GetSampler(clientSettings);
+        const spanProcessors = OpenTelemetryService.GetSpanProcessors(clientSettings);
+        const resource = OpenTelemetryService.GetResource(clientSettings);
+        const provider = new WebTracerProvider({
+            sampler: sampler,
+            spanProcessors: spanProcessors,
+            resource: resource,
+        });
+        provider.register({
+            // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
+            contextManager: new ZoneContextManager(),
+        });
+        // Get a tracer from the provider
+        this._tracer = provider.getTracer('angular-navigation-tracer');
+        // Create the initial navigation span based on the current URL
+        if (this._router && this._router.url) {
+            this.createNavigationSpan(this._router.url);
+        }
+    }
+    /**
+     * Ends the current navigation span if one exists.
+     * This can be called when the user is leaving the application or when
+     * special navigation events happen that should terminate the current span.
+     */
+    endCurrentNavigationSpan() {
+        if (this._activeNavigationSpan) {
+            this._activeNavigationSpan.end();
+            this._activeNavigationSpan = null;
+            this._lastNavigationPath = null; // Reset the last navigation path when ending the span manually
+        }
+    }
+    static GetResource(clientSettings) {
         const serviceName = clientSettings.extensions["OTEL_SERVICE_NAME"];
         const resourceAttributes = clientSettings.extensions["OTEL_RESOURCE_ATTRIBUTES"];
-        const tracesSampler = clientSettings.extensions["OTEL_TRACES_SAMPLER"];
-        const tracesSamplerArg = clientSettings.extensions["OTEL_TRACES_SAMPLER_ARG"];
-        const provider = new WebTracerProvider({ sampler: OpenTelemetryService.GetSampler(tracesSampler, tracesSamplerArg) });
+        const resource = resourceFromAttributes({});
+        if (resourceAttributes) {
+            resourceAttributes
+                .split(",")
+                .map((attribute) => {
+                const [key, value] = attribute.split("=");
+                resource.attributes[key] = value;
+            });
+        }
+        if (serviceName)
+            resource.attributes[ATTR_SERVICE_NAME] = serviceName;
+        return resource;
+    }
+    static GetSpanProcessors(clientSettings) {
+        const exporterEndpoint = clientSettings.extensions["OTEL_EXPORTER_OTLP_ENDPOINT"];
+        const exporterHeaders = clientSettings.extensions["OTEL_EXPORTER_OTLP_HEADERS"];
         if (!exporterEndpoint)
-            provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+            return [new SimpleSpanProcessor(new ConsoleSpanExporter())];
         else {
             let headersObj = {};
             if (exporterHeaders) {
@@ -4356,41 +4624,12 @@ class OpenTelemetryService {
                 headers: headersObj,
                 compression: "gzip",
             };
-            provider.addSpanProcessor(new BatchSpanProcessor(new OTLPTraceExporter(otlpExporterConfiguration)));
-        }
-        provider.register({
-            // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
-            contextManager: new ZoneContextManager(),
-        });
-        if (resourceAttributes) {
-            resourceAttributes
-                .split(",")
-                .map((attribute) => {
-                const [key, value] = attribute.split("=");
-                provider.resource.attributes[key] = value;
-            });
-        }
-        if (serviceName)
-            provider.resource.attributes['service.name'] = serviceName;
-        // apply given options
-        let config;
-        if (typeof configureOptions === 'function') {
-            config = configureOptions(this._defaultInputConfigs);
-        }
-        else if (typeof configureOptions === 'object') {
-            config = configureOptions;
-        }
-        else {
-            config = this._defaultInputConfigs;
+            return [new BatchSpanProcessor(new OTLPTraceExporter(otlpExporterConfiguration))];
         }
-        // Registering instrumentations
-        registerInstrumentations({
-            instrumentations: [
-                getWebAutoInstrumentations(config),
-            ]
-        });
     }
-    static GetSampler(tracesSampler, tracesSamplerArg) {
+    static GetSampler(clientSettings) {
+        const tracesSampler = clientSettings.extensions["OTEL_TRACES_SAMPLER"];
+        const tracesSamplerArg = clientSettings.extensions["OTEL_TRACES_SAMPLER_ARG"];
         switch (tracesSampler) {
             case "always_on":
                 return new AlwaysOnSampler();
@@ -4410,15 +4649,35 @@ class OpenTelemetryService {
                 return new AlwaysOnSampler();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OpenTelemetryService, deps: [{ token: SettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OpenTelemetryService, providedIn: "root" });
+    /**
+     * Gets the active context that contains the current navigation span.
+     * This is used by the HttpInterceptor to ensure HttpClient requests are
+     * properly associated with the current navigation span.
+     * @returns The active context, or null if no navigation span exists
+     */
+    getActiveContext() {
+        if (this._activeNavigationSpan) {
+            // Create a context with the active navigation span
+            return trace.setSpan(context.active(), this._activeNavigationSpan);
+        }
+        return null;
+    }
+    /**
+     * Gets the OpenTelemetry tracer instance for creating spans
+     * @returns The tracer instance or undefined if not initialized
+     */
+    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 ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OpenTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root"
                 }]
-        }], ctorParameters: () => [{ type: SettingsService }] });
+        }], ctorParameters: () => [{ type: SettingsService }, { type: i3$4.Router }] });
 
 /**
 * Component for editing a resource in the RESTworld application.
@@ -4457,20 +4716,20 @@ class RESTworldEditViewComponent {
     /**
     * The relation to load the resource from.
     */
-    rel = input.required();
+    rel = input.required(...(ngDevMode ? [{ debugName: "rel" }] : []));
     /**
     * The URI of the resource to load.
     */
-    uri = input.required();
+    uri = input.required(...(ngDevMode ? [{ debugName: "uri" }] : []));
     /**
     * The name of the API to load the resource from.
     */
-    apiName = input.required();
+    apiName = input.required(...(ngDevMode ? [{ debugName: "apiName" }] : []));
     templates = resource({
-        request: () => ({ apiName: this.apiName(), uri: this.uri() }),
-        loader: ({ request }) => this.loadInternal(request.apiName, request.uri)
+        params: () => ({ apiName: this.apiName(), uri: this.uri() }),
+        loader: ({ params }) => this.loadInternal(params.apiName, params.uri)
     });
-    displayTab = model("Loading");
+    displayTab = model("Loading", ...(ngDevMode ? [{ debugName: "displayTab" }] : []));
     async afterSubmit($event) {
         if ($event.status == 201) {
             await this._router.navigate(["edit", this.apiName(), this.rel(), $event.location]);
@@ -4482,40 +4741,41 @@ class RESTworldEditViewComponent {
     async loadInternal(apiName, uri) {
         if (!apiName || !uri)
             return [];
-        const client = this._clients.getClient(apiName);
-        const response = await client.getSingleByUri(uri);
-        if (!response.ok || ProblemDetails.isProblemDetails(response.body) || response.body === null) {
-            if (ProblemDetails.isProblemDetails(response.body))
-                this._messageService.add({ severity: "error", summary: "Error", detail: response.body.detail, data: response, sticky: true });
-            else
-                this._messageService.add({ severity: "error", summary: "Error", detail: "Error while loading the resource from the API.", data: response, sticky: true });
-        }
-        else {
-            const templates = await this.getAllTemplates(response.body, apiName);
+        try {
+            const client = this._clients.getClient(apiName);
+            const templatesOrProblemDetails = await client.getAllTemplatesByUri(uri);
+            // Check if we got ProblemDetails instead of Templates
+            if (ProblemDetails.isProblemDetails(templatesOrProblemDetails)) {
+                this._messageService.add({
+                    severity: "error",
+                    summary: "Error",
+                    detail: `Error from API: ${templatesOrProblemDetails.title} - ${templatesOrProblemDetails.detail}`,
+                    data: templatesOrProblemDetails,
+                    sticky: true
+                });
+                return [];
+            }
+            // Process the templates
+            const templates = templatesOrProblemDetails;
             const templateArray = Object.values(templates).filter((t) => t !== undefined);
             if (templateArray.length > 0)
                 this.displayTab.set(templateArray[0].title);
             return templateArray;
         }
-        return [];
-    }
-    async getAllTemplates(resource, apiName) {
-        try {
-            const client = this._clients.getClient(apiName);
-            const templates = await client.getAllTemplates(resource);
-            return templates;
-        }
         catch (e) {
-            this._messageService.add({ severity: "error", summary: "Error", detail: "Error while loading the templates from the API. " + e, data: e, sticky: true });
-            return {};
+            if (e instanceof Error)
+                this._messageService.add({ severity: "error", summary: "Error", detail: "Error while loading the templates from the API. " + e.message, data: e, sticky: true });
+            else
+                this._messageService.add({ severity: "error", summary: "Error", detail: "Error while loading the templates from the API. " + e, data: e, sticky: true });
+            return [];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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", "style", "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"], outputs: ["onHide"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RESTworldEditViewComponent, decorators: [{
+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], 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"] }]
+            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: [{
                 type: ContentChild,
                 args: ["extraTabs", { static: false }]
@@ -4556,12 +4816,12 @@ class RESTworldListViewComponent {
     * An array of menu items to be displayed in the create button dropdown menu.
     * That is the menu at the top right of the list.
     */
-    createButtonMenu = input();
-    isLoading = computed(() => this.listResource.isLoading() || this.searchTemplate.isLoading());
-    filter = model(undefined, { alias: "$filter" });
-    orderby = model(undefined, { alias: "$orderby" });
-    skip = model(undefined, { alias: "$skip" });
-    top = model(undefined, { alias: "$top" });
+    createButtonMenu = input(...(ngDevMode ? [undefined, { debugName: "createButtonMenu" }] : []));
+    isLoading = computed(() => this.listResource.isLoading() || this.searchTemplate.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    filter = model(undefined, ...(ngDevMode ? [{ debugName: "filter", alias: "$filter" }] : [{ alias: "$filter" }]));
+    orderby = model(undefined, ...(ngDevMode ? [{ debugName: "orderby", alias: "$orderby" }] : [{ alias: "$orderby" }]));
+    skip = model(undefined, ...(ngDevMode ? [{ debugName: "skip", alias: "$skip" }] : [{ alias: "$skip" }]));
+    top = model(undefined, ...(ngDevMode ? [{ debugName: "top", alias: "$top" }] : [{ alias: "$top" }]));
     oDataParameters = linkedSignal(() => {
         const parameters = {
             $filter: this.filter(),
@@ -4576,7 +4836,7 @@ class RESTworldListViewComponent {
      * Use it if you want to use a custom edit view instead of the default `RESTworldEditViewComponent`.
      * @param value The new value for the edit link URL.
      */
-    editLink = input("/edit", { transform: (value) => value ?? "/edit" });
+    editLink = input("/edit", ...(ngDevMode ? [{ debugName: "editLink", transform: (value) => value ?? "/edit" }] : [{ transform: (value) => value ?? "/edit" }]));
     headerMenu = computed(() => [
         {
             icon: "fas fa-plus",
@@ -4584,7 +4844,7 @@ class RESTworldListViewComponent {
             routerLink: [this.editLink(), this.apiName(), this.rel(), this.newHref()],
             items: this.createButtonMenu()
         }
-    ]);
+    ], ...(ngDevMode ? [{ debugName: "headerMenu" }] : []));
     rowMenu = computed(() => (row, openedByRightClick) => {
         return [
             {
@@ -4602,7 +4862,7 @@ class RESTworldListViewComponent {
                 command: () => this.showDeleteConfirmatioModal(row)
             }
         ];
-    });
+    }, ...(ngDevMode ? [{ debugName: "rowMenu" }] : []));
     static _emptylistResource = new PagedListResource({ _embedded: { items: [] }, _links: { self: [] } });
     static _emptySearchTemplate = new Template({ properties: [] });
     constructor(_clients, _confirmationService, _messageService, avatarGenerator, _router, _problemService) {
@@ -4620,14 +4880,14 @@ class RESTworldListViewComponent {
      * Sets the name of the API to load and triggers a reload of the data.
      * @param value The name of the API to load.
      */
-    apiName = input();
+    apiName = input(...(ngDevMode ? [undefined, { debugName: "apiName" }] : []));
     /**
      * Sets the rel value for the RESTWorld list view component.
      * @param value The new rel value to set.
      */
-    rel = input();
-    newHref = computed(() => this.listResource.value()?.findLink('new')?.href);
-    items = computed(() => this.listResource.value()?._embedded.items || []);
+    rel = input(...(ngDevMode ? [undefined, { debugName: "rel" }] : []));
+    newHref = computed(() => this.listResource.value()?.findLink('new')?.href, ...(ngDevMode ? [{ debugName: "newHref" }] : []));
+    items = computed(() => this.listResource.value()?._embedded.items || [], ...(ngDevMode ? [{ debugName: "items" }] : []));
     createNew() {
         return this._router.navigate([this.editLink, this.apiName, this.rel, this.newHref]);
     }
@@ -4644,12 +4904,12 @@ class RESTworldListViewComponent {
         }
     }
     listResource = resource({
-        request: () => ({ oDataParameters: this.oDataParameters(), rel: this.rel() }),
-        loader: async ({ request }) => {
+        params: () => ({ oDataParameters: this.oDataParameters(), rel: this.rel() }),
+        loader: async ({ params }) => {
             const client = this._client();
-            if (request.rel === undefined || client === undefined)
+            if (params.rel === undefined || client === undefined)
                 return RESTworldListViewComponent._emptylistResource;
-            const response = await client.getList(request.rel, request.oDataParameters);
+            const response = await client.getList(params.rel, params.oDataParameters);
             if (this._problemService.checkResponseAndDisplayErrors(response, undefined, "Error while loading the resources from the API.", "Error")) {
                 return response.body;
             }
@@ -4663,22 +4923,29 @@ class RESTworldListViewComponent {
         const totalPages = listResource?.totalPages ?? 1;
         const totalRecords = totalPages * rowsPerPage;
         return totalRecords;
-    });
+    }, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
     searchTemplate = resource({
-        request: () => ({ resource: this.listResource.value() }),
-        loader: async ({ request }) => {
+        params: () => ({ resource: this.listResource.value() }),
+        loader: async ({ params }) => {
             const client = this._client();
-            if (request.resource === undefined || client === undefined)
+            if (params.resource === undefined || client === undefined)
                 return RESTworldListViewComponent._emptySearchTemplate;
             // We only want to load the template once
             const currentSearchTemplate = this.searchTemplate.value();
             if (currentSearchTemplate !== undefined && currentSearchTemplate !== RESTworldListViewComponent._emptySearchTemplate)
                 return currentSearchTemplate;
+            // return RESTworldListViewComponent._emptySearchTemplate;
             try {
-                const templates = await client.getAllTemplates(request.resource);
+                const templates = await client.getAllTemplates(params.resource);
+                if (ProblemDetails.isProblemDetails(templates)) {
+                    this._messageService.add({ severity: 'error', summary: 'Error', detail: `No templates found in the API response.`, data: templates });
+                    return RESTworldListViewComponent._emptySearchTemplate;
+                }
                 const searchTemplate = templates["Search"];
-                if (searchTemplate === undefined)
-                    throw new Error("No search template found in the API response.");
+                if (searchTemplate === undefined) {
+                    this._messageService.add({ severity: 'error', summary: 'Error', detail: `No "Search" template found in the API response.`, data: templates });
+                    return RESTworldListViewComponent._emptySearchTemplate;
+                }
                 return searchTemplate;
             }
             catch (e) {
@@ -4700,15 +4967,147 @@ class RESTworldListViewComponent {
         if (apiName === undefined)
             return undefined;
         return this._clients.getClient(apiName);
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "19.1.6", 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"], outputs: ["onHide"] }] });
+    }, ...(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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
+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 }] });
 
+/**
+ * This is an HttpInterceptor that ensures all HttpClient requests
+ * are properly associated with the current navigation span.
+ */
+class OpenTelemetryHttpInterceptor {
+    _telemetryService;
+    constructor(_telemetryService) {
+        this._telemetryService = _telemetryService;
+    }
+    intercept(request, next) {
+        // Get the active context from the OpenTelemetryService
+        const activeContext = this._telemetryService.getActiveContext();
+        // If we have an active navigation context, create a child span for this HTTP request
+        if (activeContext && this._telemetryService.getTracer()) {
+            // Execute within the active context to ensure proper parenting
+            return context.with(activeContext, () => {
+                // Extract span information from the request
+                const url = new URL(request.url, window.location.origin);
+                const method = request.method;
+                const spanName = `${method} ${url.pathname}`;
+                // Get tracer from the telemetry service to create a span
+                const tracer = this._telemetryService.getTracer();
+                // Create attributes for the span, handling null values from headers
+                const contentLength = request.headers.get('Content-Length');
+                const contentType = request.headers.get('Content-Type');
+                const attributes = {
+                    [ATTR_HTTP_REQUEST_METHOD]: method,
+                    [ATTR_URL_FULL]: request.url,
+                    [ATTR_URL_PATH]: url.pathname,
+                    [ATTR_URL_QUERY]: url.search.replace('?', ''),
+                    [ATTR_URL_SCHEME]: url.protocol.replace(':', ''),
+                    "url.host": url.host,
+                    "http.user_agent": navigator.userAgent,
+                    [ATTR_CLIENT_ADDRESS]: window.location.href,
+                    [ATTR_CLIENT_PORT]: window.location.port,
+                    [ATTR_HTTP_REQUEST_HEADER("accept")]: request.headers.get('Accept') ?? undefined,
+                    [ATTR_HTTP_REQUEST_HEADER("accept-language")]: request.headers.get('Accept-Language') ?? undefined,
+                    "http.request.body.size": contentLength ?? undefined,
+                    [ATTR_HTTP_REQUEST_HEADER("content-type")]: contentType ?? undefined,
+                    [ATTR_SERVICE_NAME]: 'ngx-restworld-client'
+                };
+                // Start a new span for this HTTP request
+                const span = tracer.startSpan(spanName, {
+                    kind: SpanKind.CLIENT,
+                    attributes
+                });
+                // Create a context with the current span
+                const spanContext = trace.setSpan(context.active(), span);
+                // Create a carrier object for W3C trace context headers
+                const carrier = {};
+                // Inject trace context headers into the carrier
+                propagation.inject(spanContext, carrier);
+                // Clone the request with the added W3C trace context headers
+                let headers = request.headers;
+                Object.entries(carrier).forEach(([key, value]) => {
+                    headers = headers.set(key, value);
+                });
+                // Create the traced request with the W3C headers
+                const tracedRequest = request.clone({ headers });
+                // Use with() to make this span active during request execution
+                return context.with(spanContext, () => {
+                    // Handle the request and observe the response
+                    return next.handle(tracedRequest).pipe(
+                    // Use operators to capture response or error before completing the span
+                    tap({
+                        next: (event) => {
+                            if (event.type === HttpEventType.Response) {
+                                const response = event;
+                                const responseAttrs = {
+                                    [ATTR_HTTP_RESPONSE_STATUS_CODE]: response.status
+                                };
+                                // Only add response header values if they exist
+                                const respContentLength = response.headers.get('Content-Length');
+                                const respContentType = response.headers.get('Content-Type');
+                                if (respContentLength)
+                                    responseAttrs["http.response.body.size"] = respContentLength;
+                                if (respContentType)
+                                    responseAttrs[ATTR_HTTP_RESPONSE_HEADER("content-type")] = respContentType;
+                                // Add response attributes to the span
+                                span.setAttributes(responseAttrs);
+                                span.setStatus({
+                                    code: response.ok ? SpanStatusCode.OK : SpanStatusCode.ERROR
+                                });
+                                // End the span when we get the full response
+                                span.end();
+                            }
+                        },
+                        error: (error) => {
+                            // Record the error and end the span
+                            span.setStatus({
+                                code: SpanStatusCode.ERROR,
+                                message: error.message || 'Http request failed'
+                            });
+                            span.recordException(error);
+                            span.end();
+                        }
+                    }), 
+                    // Make sure the span ends even if the observable completes without going through our tap handlers
+                    finalize(() => {
+                        if (span) {
+                            // Only end if not already ended in the tap handlers
+                            try {
+                                span.end();
+                            }
+                            catch (e) {
+                                // Ignore errors from ending an already-ended span
+                            }
+                        }
+                    }));
+                });
+            });
+        }
+        // No active context, just proceed with the request without tracing
+        return next.handle(request);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryHttpInterceptor, deps: [{ token: OpenTelemetryService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryHttpInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OpenTelemetryHttpInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OpenTelemetryService }] });
+/**
+ * Provider for the OpenTelemetry HTTP interceptor.
+ * This interceptor ensures that HttpClient requests are properly
+ * associated with the current navigation span.
+ */
+const OPENTELEMETRY_HTTP_INTERCEPTOR_PROVIDER = {
+    provide: HTTP_INTERCEPTORS,
+    useClass: OpenTelemetryHttpInterceptor,
+    multi: true
+};
+
 /**
  * Povides the RESTworld functionality to the application.
  * This includes the RestWorldClientCollection, the SettingsService and the OpenTelemetryService.
@@ -4739,7 +5138,11 @@ function provideRestWorld(ngHttpCachingConfig) {
         await opentelemetryService.initialize();
     });
     const cachingProviders = provideNgHttpCaching(mergedCachingConfig);
-    const allProviders = [restWorldInitializer, ...cachingProviders];
+    const allProviders = [
+        restWorldInitializer,
+        cachingProviders,
+        OPENTELEMETRY_HTTP_INTERCEPTOR_PROVIDER
+    ];
     return allProviders;
 }
 /**