@cccteam/ccc-lib 0.0.24 → 0.0.25

package/fesm2022/cccteam-ccc-lib-ccc-resource.mjs

@@ -45,7 +45,7 @@ import { cleanStringForm, sparseFormData } from '@cccteam/ccc-lib/forms';
 import { AppGridComponent } from '@cccteam/ccc-lib/ccc-grid';
 
 class ActionAccessControlWrapperComponent {
-    actionContext = input(undefined, { ...(ngDevMode ? { debugName: "actionContext" } : {}) });
+    actionContext = input(...(ngDevMode ? [undefined, { debugName: "actionContext" }] : []));
     showAction = computed(() => {
         const context = this.actionContext();
         let isActionPermittedForUser = true;
@@ -79,13 +79,13 @@ class ActionAccessControlWrapperComponent {
             console.error(e);
         }
         return showAction;
-    }, { ...(ngDevMode ? { debugName: "showAction" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionAccessControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ActionAccessControlWrapperComponent, isStandalone: true, selector: "action-access-control-wrapper", inputs: { actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (showAction()) {
+    }, ...(ngDevMode ? [{ debugName: "showAction" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionAccessControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ActionAccessControlWrapperComponent, isStandalone: true, selector: "action-access-control-wrapper", inputs: { actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (showAction()) {
     <ng-content />
   }`, isInline: true, styles: [":host{margin-top:auto;margin-bottom:auto}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionAccessControlWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionAccessControlWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'action-access-control-wrapper', template: `@if (showAction()) {
     <ng-content />
@@ -191,17 +191,17 @@ const resourceValidators = Object.freeze({
 });
 
 class PaddingElementComponent {
-    paddingElement = input.required({ ...(ngDevMode ? { debugName: "paddingElement" } : {}) });
+    paddingElement = input.required(...(ngDevMode ? [{ debugName: "paddingElement" }] : []));
     class = 'col-6';
     ngOnInit() {
         if (this.paddingElement().cols) {
             this.class = 'col-' + this.paddingElement()?.cols;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PaddingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", type: PaddingElementComponent, isStandalone: true, selector: "ccc-padding-element", inputs: { paddingElement: { classPropertyName: "paddingElement", publicName: "paddingElement", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"padding-container\"></div>\n", styles: [".padding-container{height:52px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaddingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: PaddingElementComponent, isStandalone: true, selector: "ccc-padding-element", inputs: { paddingElement: { classPropertyName: "paddingElement", publicName: "paddingElement", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"padding-container\"></div>\n", styles: [".padding-container{height:52px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PaddingElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaddingElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-padding-element', imports: [], template: "<div class=\"padding-container\"></div>\n", styles: [".padding-container{height:52px}\n"] }]
         }], propDecorators: { paddingElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingElement", required: true }] }], class: [{
@@ -210,9 +210,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class ComputedFieldComponent {
-    fieldConfig = input.required({ ...(ngDevMode ? { debugName: "fieldConfig" } : {}) });
-    fieldClass = input(undefined, { ...(ngDevMode ? { debugName: "fieldClass" } : {}) });
-    formDataState = input(undefined, { ...(ngDevMode ? { debugName: "formDataState" } : {}) });
+    fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
+    fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
+    formDataState = input(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
     computedValue = computed(() => {
         try {
             return this.fieldConfig().calculatedValue(this.formDataState());
@@ -222,7 +222,7 @@ class ComputedFieldComponent {
             console.error(e);
             return '';
         }
-    }, { ...(ngDevMode ? { debugName: "computedValue" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
     showField = computed(() => {
         const shouldRender = this.fieldConfig().shouldRender;
         if (typeof shouldRender === 'boolean') {
@@ -236,17 +236,17 @@ class ComputedFieldComponent {
             console.error(e);
             return true;
         }
-    }, { ...(ngDevMode ? { debugName: "showField" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showField" }] : []));
     class = '';
     constructor() {
         effect(() => {
             this.class = this.showField() ? 'col-' + this.fieldConfig()?.cols : 'hidden-field';
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ComputedFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ComputedFieldComponent, isStandalone: true, selector: "ccc-computed-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (showField()) {\n  <div class=\"readonly-field\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"true\"\n        type=\"text\"\n        [value]=\"computedValue()\" />\n    </mat-form-field>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ComputedFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ComputedFieldComponent, isStandalone: true, selector: "ccc-computed-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (showField()) {\n  <div class=\"readonly-field\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"true\"\n        type=\"text\"\n        [value]=\"computedValue()\" />\n    </mat-form-field>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ComputedFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ComputedFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-computed-field', imports: [MatFormFieldModule, MatButtonModule, MatInputModule], template: "@if (showField()) {\n  <div class=\"readonly-field\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"true\"\n        type=\"text\"\n        [value]=\"computedValue()\" />\n    </mat-form-field>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], formDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDataState", required: false }] }], class: [{
@@ -255,57 +255,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class EmptyReadonlyFieldComponent {
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     displayValue = defaultEmptyFieldValue;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EmptyReadonlyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", type: EmptyReadonlyFieldComponent, isStandalone: true, selector: "ccc-empty-readonly-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"readonly-field\">\n  <mat-form-field class=\"field\" [subscriptSizing]=\"'dynamic'\">\n    <mat-label>{{ label() }}</mat-label>\n    <input\n      matInput\n      (keydown.enter)=\"$event.preventDefault()\"\n      [readonly]=\"true\"\n      type=\"text\"\n      [value]=\"displayValue\"\n      id=\"{{ label() }}-readonly-input-text\" />\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EmptyReadonlyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: EmptyReadonlyFieldComponent, isStandalone: true, selector: "ccc-empty-readonly-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"readonly-field\">\n  <mat-form-field class=\"field\" [subscriptSizing]=\"'dynamic'\">\n    <mat-label>{{ label() }}</mat-label>\n    <input\n      matInput\n      (keydown.enter)=\"$event.preventDefault()\"\n      [readonly]=\"true\"\n      type=\"text\"\n      [value]=\"displayValue\"\n      id=\"{{ label() }}-readonly-input-text\" />\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EmptyReadonlyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EmptyReadonlyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-empty-readonly-field', imports: [MatFormFieldModule, MatButtonModule, MatInputModule], template: "<div class=\"readonly-field\">\n  <mat-form-field class=\"field\" [subscriptSizing]=\"'dynamic'\">\n    <mat-label>{{ label() }}</mat-label>\n    <input\n      matInput\n      (keydown.enter)=\"$event.preventDefault()\"\n      [readonly]=\"true\"\n      type=\"text\"\n      [value]=\"displayValue\"\n      id=\"{{ label() }}-readonly-input-text\" />\n  </mat-form-field>\n</div>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 
 class ResourceStore {
-    resourceMeta = signal({}, { ...(ngDevMode ? { debugName: "resourceMeta" } : {}) });
-    resourceName = signal('', { ...(ngDevMode ? { debugName: "resourceName" } : {}) });
-    filter = signal('', { ...(ngDevMode ? { debugName: "filter" } : {}) });
-    disableCacheForFilterPii = signal(false, { ...(ngDevMode ? { debugName: "disableCacheForFilterPii" } : {}) });
-    searchTokens = signal('', { ...(ngDevMode ? { debugName: "searchTokens" } : {}) });
-    sorts = signal([], { ...(ngDevMode ? { debugName: "sorts" } : {}) });
-    listColumns = signal([], { ...(ngDevMode ? { debugName: "listColumns" } : {}) });
-    requireSearchToDisplayResults = signal(false, { ...(ngDevMode ? { debugName: "requireSearchToDisplayResults" } : {}) });
-    uuid = signal('', { ...(ngDevMode ? { debugName: "uuid" } : {}) });
-    error = signal('', { ...(ngDevMode ? { debugName: "error" } : {}) });
+    resourceMeta = signal({}, ...(ngDevMode ? [{ debugName: "resourceMeta" }] : []));
+    resourceName = signal('', ...(ngDevMode ? [{ debugName: "resourceName" }] : []));
+    filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    disableCacheForFilterPii = signal(false, ...(ngDevMode ? [{ debugName: "disableCacheForFilterPii" }] : []));
+    searchTokens = signal('', ...(ngDevMode ? [{ debugName: "searchTokens" }] : []));
+    sorts = signal([], ...(ngDevMode ? [{ debugName: "sorts" }] : []));
+    listColumns = signal([], ...(ngDevMode ? [{ debugName: "listColumns" }] : []));
+    requireSearchToDisplayResults = signal(false, ...(ngDevMode ? [{ debugName: "requireSearchToDisplayResults" }] : []));
+    uuid = signal('', ...(ngDevMode ? [{ debugName: "uuid" }] : []));
+    error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
     notifications = inject(NotificationService);
     http = inject(HttpClient);
     router = inject(Router);
     injector = inject(Injector);
     apiUrl = inject(API_URL);
     methodMeta = inject(METHOD_META);
-    resourceListRef = signal(undefined, { ...(ngDevMode ? { debugName: "resourceListRef" } : {}) });
+    resourceListRef = signal(undefined, ...(ngDevMode ? [{ debugName: "resourceListRef" }] : []));
     listData = computed(() => {
         const ref = this.resourceListRef();
         if (ref && ref.status() === 'resolved') {
             return ref.value();
         }
         return [];
-    }, { ...(ngDevMode ? { debugName: "listData" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "listData" }] : []));
     listStatus = computed(() => {
         return this.resourceListRef()?.status();
-    }, { ...(ngDevMode ? { debugName: "listStatus" } : {}) });
-    resourceViewRef = signal(undefined, { ...(ngDevMode ? { debugName: "resourceViewRef" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "listStatus" }] : []));
+    resourceViewRef = signal(undefined, ...(ngDevMode ? [{ debugName: "resourceViewRef" }] : []));
     viewData = computed(() => {
         const ref = this.resourceViewRef();
         if (ref && ref.status() === 'resolved') {
             return ref.value();
         }
         return {};
-    }, { ...(ngDevMode ? { debugName: "viewData" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "viewData" }] : []));
     viewStatus = computed(() => {
         return this.resourceViewRef()?.status();
-    }, { ...(ngDevMode ? { debugName: "viewStatus" } : {}) });
-    overrideRoute = signal('', { ...(ngDevMode ? { debugName: "overrideRoute" } : {}) });
-    resourceRoute = computed(() => this.resourceMeta()?.route, { ...(ngDevMode ? { debugName: "resourceRoute" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "viewStatus" }] : []));
+    overrideRoute = signal('', ...(ngDevMode ? [{ debugName: "overrideRoute" }] : []));
+    resourceRoute = computed(() => this.resourceMeta()?.route, ...(ngDevMode ? [{ debugName: "resourceRoute" }] : []));
     route = computed(() => {
         if (this.overrideRoute()) {
             return this.overrideRoute();
@@ -315,7 +315,7 @@ class ResourceStore {
             return route;
         }
         return '';
-    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "route" }] : []));
     reloadViewData() {
         this.resourceViewRef()?.reload();
     }
@@ -335,7 +335,7 @@ class ResourceStore {
         if (resourceMeta && resourceMeta.fields.some((field) => field.fieldName === 'id')) {
             columnIds.push('id');
         }
-        const uniqueColumns = signal([...new Set([...columnIds])], { ...(ngDevMode ? { debugName: "uniqueColumns" } : {}) });
+        const uniqueColumns = signal([...new Set([...columnIds])], ...(ngDevMode ? [{ debugName: "uniqueColumns" }] : []));
         const ref = this.resourceList(this.route, this.filter, uniqueColumns, this.disableCacheForFilterPii, this.searchTokens, this.sorts);
         this.resourceListRef.set(ref);
         this.reloadListData();
@@ -457,10 +457,10 @@ class ResourceStore {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceStore, decorators: [{
             type: Injectable
         }] });
 
@@ -536,15 +536,15 @@ class BaseInputComponent {
     resourceMeta = inject(RESOURCE_META);
     injector = inject(Injector);
     store = inject(ResourceStore);
-    meta = input.required({ ...(ngDevMode ? { debugName: "meta" } : {}) });
-    pristineValue = input(undefined, { ...(ngDevMode ? { debugName: "pristineValue" } : {}) });
-    editMode = input.required({ ...(ngDevMode ? { debugName: "editMode" } : {}) });
-    showField = input(undefined, { ...(ngDevMode ? { debugName: "showField" } : {}) });
-    fieldConfig = input.required({ ...(ngDevMode ? { debugName: "fieldConfig" } : {}) });
-    fieldClass = input(undefined, { ...(ngDevMode ? { debugName: "fieldClass" } : {}) });
-    fieldMeta = input.required({ ...(ngDevMode ? { debugName: "fieldMeta" } : {}) });
-    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
-    relatedData = input(undefined, { ...(ngDevMode ? { debugName: "relatedData" } : {}) });
+    meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
+    pristineValue = input(...(ngDevMode ? [undefined, { debugName: "pristineValue" }] : []));
+    editMode = input.required(...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    showField = input(...(ngDevMode ? [undefined, { debugName: "showField" }] : []));
+    fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
+    fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
+    fieldMeta = input.required(...(ngDevMode ? [{ debugName: "fieldMeta" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
     /**
      * Resets the field back to its pristine value.
      */
@@ -591,7 +591,7 @@ class BaseInputComponent {
             }
         });
         return builtPrefix;
-    }, { ...(ngDevMode ? { debugName: "prefixString" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "prefixString" }] : []));
     suffixString = computed(() => {
         const relatedData = this.relatedData();
         let builtSuffix = '';
@@ -627,7 +627,7 @@ class BaseInputComponent {
             }
         });
         return builtSuffix;
-    }, { ...(ngDevMode ? { debugName: "suffixString" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "suffixString" }] : []));
     floatLabel = computed(() => {
         if (this.fieldConfig().prefixes.length > 0 || this.fieldConfig().suffixes.length > 0) {
             return 'always';
@@ -635,28 +635,28 @@ class BaseInputComponent {
         else {
             return 'auto';
         }
-    }, { ...(ngDevMode ? { debugName: "floatLabel" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: BaseInputComponent, isStandalone: true, inputs: { meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, showField: { classPropertyName: "showField", publicName: "showField", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, fieldMeta: { classPropertyName: "fieldMeta", publicName: "fieldMeta", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    }, ...(ngDevMode ? [{ debugName: "floatLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: BaseInputComponent, isStandalone: true, inputs: { meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, showField: { classPropertyName: "showField", publicName: "showField", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, fieldMeta: { classPropertyName: "fieldMeta", publicName: "fieldMeta", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Directive
         }], propDecorators: { meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: true }] }], pristineValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pristineValue", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: true }] }], showField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showField", required: false }] }], fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], fieldMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldMeta", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }] } });
 
 class BooleanFieldComponent extends BaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BooleanFieldComponent, isStandalone: true, selector: "ccc-boolean-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <ng-container [formGroup]=\"form()\">\n    <div [class.readonly-field]=\"editMode() === 'view'\">\n      <mat-checkbox\n        class=\"field checkbox {{ fieldClass() }}\"\n        [formControlName]=\"fieldConfig().name\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        {{ fieldConfig().label }}\n      </mat-checkbox>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BooleanFieldComponent, isStandalone: true, selector: "ccc-boolean-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <ng-container [formGroup]=\"form()\">\n    <div [class.readonly-field]=\"editMode() === 'view'\">\n      <mat-checkbox\n        class=\"field checkbox {{ fieldClass() }}\"\n        [formControlName]=\"fieldConfig().name\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        {{ fieldConfig().label }}\n      </mat-checkbox>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BooleanFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-boolean-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, MatCheckboxModule], template: "@if (showField()) {\n  <ng-container [formGroup]=\"form()\">\n    <div [class.readonly-field]=\"editMode() === 'view'\">\n      <mat-checkbox\n        class=\"field checkbox {{ fieldClass() }}\"\n        [formControlName]=\"fieldConfig().name\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        {{ fieldConfig().label }}\n      </mat-checkbox>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n" }]
         }] });
 
 class DateFieldComponent extends BaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: DateFieldComponent, isStandalone: true, selector: "ccc-date-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [formGroup]=\"form()\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        [readonly]=\"editMode() === 'view'\"\n        [matDatepicker]=\"picker\"\n        type=\"text\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        [formControlName]=\"fieldConfig().name\" />\n      @if (editMode() === 'edit') {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DateFieldComponent, isStandalone: true, selector: "ccc-date-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [formGroup]=\"form()\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        [readonly]=\"editMode() === 'view'\"\n        [matDatepicker]=\"picker\"\n        type=\"text\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        [formControlName]=\"fieldConfig().name\" />\n      @if (editMode() === 'edit') {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-date-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule], template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field class=\"field {{ fieldClass() }}\" [formGroup]=\"form()\" [subscriptSizing]=\"'dynamic'\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <input\n        matInput\n        [readonly]=\"editMode() === 'view'\"\n        [matDatepicker]=\"picker\"\n        type=\"text\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        [formControlName]=\"fieldConfig().name\" />\n      @if (editMode() === 'edit') {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n" }]
         }] });
@@ -837,28 +837,28 @@ function camelCase(str) {
 class EnumeratedFieldComponent extends BaseInputComponent {
     activatedRoute = inject(ActivatedRoute);
     router = inject(Router);
-    reloadSignal = signal(false, { ...(ngDevMode ? { debugName: "reloadSignal" } : {}) });
-    query = signal('', { ...(ngDevMode ? { debugName: "query" } : {}) });
+    reloadSignal = signal(false, ...(ngDevMode ? [{ debugName: "reloadSignal" }] : []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
     resource = computed(() => {
         if (this.fieldConfig()?.enumeratedConfig?.overrideResource) {
             return this.fieldConfig()?.enumeratedConfig?.overrideResource;
         }
         return this.fieldMeta()?.enumeratedResource;
-    }, { ...(ngDevMode ? { debugName: "resource" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "resource" }] : []));
     tooltipMessage = computed(() => {
         const label = this.fieldConfig().label;
         return 'View ' + label + ' details';
-    }, { ...(ngDevMode ? { debugName: "tooltipMessage" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "tooltipMessage" }] : []));
     route = computed(() => {
         const resource = this.fieldMeta()?.enumeratedResource;
         return this.resourceMeta(resource)?.route;
-    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "route" }] : []));
     viewDetails = computed(() => {
         return this.editMode() === 'view' && this.fieldConfig().enumeratedConfig.viewDetails === true;
-    }, { ...(ngDevMode ? { debugName: "viewDetails" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "viewDetails" }] : []));
     sorts = computed(() => {
         return this.fieldConfig().enumeratedConfig.sorts;
-    }, { ...(ngDevMode ? { debugName: "sorts" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "sorts" }] : []));
     singleEnumResourceRef = computed(() => {
         this.editMode();
         if (this.showField() === false) {
@@ -872,13 +872,13 @@ class EnumeratedFieldComponent extends BaseInputComponent {
             return untracked(() => this.store.resourceView(this.route, signal(fieldValue)));
         }
         return undefined;
-    }, { ...(ngDevMode ? { debugName: "singleEnumResourceRef" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "singleEnumResourceRef" }] : []));
     rootResourceRef = computed(() => {
         const rootConfig = this.activatedRoute.snapshot.data['config'];
         const uuid = (this.activatedRoute.snapshot.params['uuid'] || '');
         const rootMeta = this.resourceMeta(rootConfig.parentConfig.primaryResource);
         return this.store.resourceView(signal(rootMeta.route), signal(uuid));
-    }, { ...(ngDevMode ? { debugName: "rootResourceRef" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rootResourceRef" }] : []));
     enumResourceRef = computed(() => {
         if (this.showField() === false)
             return undefined;
@@ -888,7 +888,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
             ? config?.filter?.(this.rootResourceRef()?.value() || {})
             : config?.filter?.(this.relatedData() || {});
         return this.store.resourceList(signal(enumeratedMeta.route), signal(filter), signal([]), signal(config.disableCacheForFilterPii), this.query, this.sorts);
-    }, { ...(ngDevMode ? { debugName: "enumResourceRef" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "enumResourceRef" }] : []));
     singleEnumDisplayText = computed(() => {
         const showField = this.showField();
         if (showField === false) {
@@ -906,7 +906,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
         }
         const enumeratedValues = this.toEnumerated(record, fieldConfig);
         return enumeratedValues.display;
-    }, { ...(ngDevMode ? { debugName: "singleEnumDisplayText" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "singleEnumDisplayText" }] : []));
     hasRequiredValidator = computed(() => {
         const form = this.form();
         const fieldConfig = this.fieldConfig();
@@ -918,7 +918,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
             return false;
         }
         return control.hasValidator(Validators.required);
-    }, { ...(ngDevMode ? { debugName: "hasRequiredValidator" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
     singleEnumValue = computed(() => {
         if (this.showField() === false)
             return undefined;
@@ -929,7 +929,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
         if (!record)
             return [];
         return [this.toEnumerated(record, this.fieldConfig())];
-    }, { ...(ngDevMode ? { debugName: "singleEnumValue" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "singleEnumValue" }] : []));
     listEnumValues = computed(() => {
         if (this.showField() === false)
             return [];
@@ -938,13 +938,17 @@ class EnumeratedFieldComponent extends BaseInputComponent {
         if (!records || !records.length)
             return currentValue || [];
         return records.map((record) => this.toEnumerated(record, this.fieldConfig()));
-    }, { ...(ngDevMode ? { debugName: "listEnumValues" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "listEnumValues" }] : []));
     availableEnumOptions = computed(() => {
-        if (this.editMode() === 'edit') {
-            return this.listEnumValues();
+        const editMode = this.editMode() === 'edit';
+        const options = editMode ? this.listEnumValues() : this.singleEnumValue();
+        const meta = this.fieldMeta();
+        const metaRequired = 'required' in meta && meta.required;
+        if (editMode && !this.hasRequiredValidator() && options && options.length > 0 && !metaRequired) {
+            return [{ id: null, display: defaultEmptyFieldValue }, ...options];
         }
-        return this.singleEnumValue();
-    }, { ...(ngDevMode ? { debugName: "availableEnumOptions" } : {}) });
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "availableEnumOptions" }] : []));
     toEnumerated(resource, element) {
         const enumeratedConfig = element.enumeratedConfig;
         const displayFields = this.editMode() === 'edit' && enumeratedConfig.listDisplay.length > 0
@@ -964,7 +968,9 @@ class EnumeratedFieldComponent extends BaseInputComponent {
             return '';
         if (typeof value === 'string') {
             const option = this.availableEnumOptions()?.find((o) => o.id === value);
-            return option ? option['display'] || this.formatDisplay(option) : '';
+            if (!option)
+                return '';
+            return option['display'] || (option.id !== null ? this.formatDisplay(option) : '');
         }
         return value['display'] || this.formatDisplay(value);
     };
@@ -980,10 +986,10 @@ class EnumeratedFieldComponent extends BaseInputComponent {
         this.form().markAsTouched();
         this.reloadSignal.update((prev) => !prev);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EnumeratedFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EnumeratedFieldComponent, isStandalone: true, selector: "ccc-enumerated-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n  @if (showField()) {\n    @let options = availableEnumOptions();\n    @if (editMode() === 'edit') {\n      <div class=\"enumerated-field-container\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          @if (fieldConfig().enumeratedConfig.searchable) {\n            <input\n              #input\n              type=\"text\"\n              placeholder=\"Search\"\n              matInput\n              [matAutocomplete]=\"auto\"\n              [formControlName]=\"fieldConfig().name\"\n              (input)=\"search(input.value)\" />\n            <mat-autocomplete\n              (optionSelected)=\"select($event.option.value)\"\n              #auto=\"matAutocomplete\"\n              [displayWith]=\"getDisplayText\">\n              @for (option of options; track option.id) {\n                <mat-option [value]=\"option.id\">{{ option?.display }}</mat-option>\n              }\n            </mat-autocomplete>\n          } @else {\n            <mat-select\n              [formControlName]=\"fieldConfig().name\"\n              (keydown.enter)=\"$event.preventDefault()\"\n              (selectionChange)=\"select($event.value)\"\n              [ariaReadOnly]=\"editMode() === 'view'\">\n              @for (option of options; track option.id) {\n                @if (option?.id === form().get(this.fieldConfig().name)?.value) {\n                  <mat-option [value]=\"option?.id\" selected>{{ option?.display }}</mat-option>\n                } @else {\n                  <mat-option [value]=\"option?.id\">{{ option?.display }}</mat-option>\n                }\n              }\n            </mat-select>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"enumerated-field-container readonly-field\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          <input\n            id=\"{{ fieldConfig().name }}-readonly-input-text\"\n            matInput\n            (keydown.enter)=\"$event.preventDefault()\"\n            [readonly]=\"true\"\n            type=\"text\"\n            [required]=\"hasRequiredValidator()\"\n            [value]=\"singleEnumDisplayText()\" />\n        </mat-form-field>\n        @if (viewDetails()) {\n          <a\n            mat-icon-button\n            color=\"accent\"\n            [matTooltip]=\"tooltipMessage()\"\n            matTooltipPosition=\"below\"\n            [routerLink]=\"['/', route(), form().get(this.fieldConfig().name)?.value]\">\n            <mat-icon>arrow_forward</mat-icon>\n          </a>\n        }\n      </div>\n      <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n    }\n  } @else {\n    <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n  }\n</ng-container>\n", styles: [".enumerated-field-container{display:flex;flex-direction:row;gap:10px}.display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EnumeratedFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: EnumeratedFieldComponent, isStandalone: true, selector: "ccc-enumerated-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n  @if (showField()) {\n    @let options = availableEnumOptions();\n    @if (editMode() === 'edit') {\n      <div class=\"enumerated-field-container\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          @if (fieldConfig().enumeratedConfig.searchable) {\n            <input\n              #input\n              type=\"text\"\n              placeholder=\"Search\"\n              matInput\n              [matAutocomplete]=\"auto\"\n              [formControlName]=\"fieldConfig().name\"\n              (input)=\"search(input.value)\" />\n            <mat-autocomplete\n              (optionSelected)=\"select($event.option.value)\"\n              #auto=\"matAutocomplete\"\n              [displayWith]=\"getDisplayText\">\n              @for (option of options; track option.id) {\n                <mat-option [value]=\"option.id\">{{ option?.display }}</mat-option>\n              }\n            </mat-autocomplete>\n          } @else {\n            <mat-select\n              [formControlName]=\"fieldConfig().name\"\n              (keydown.enter)=\"$event.preventDefault()\"\n              (selectionChange)=\"select($event.value)\"\n              [ariaReadOnly]=\"editMode() === 'view'\">\n              @for (option of options; track option.id) {\n                @if (option?.id === form().get(this.fieldConfig().name)?.value) {\n                  <mat-option [value]=\"option?.id\" selected>{{ option?.display }}</mat-option>\n                } @else {\n                  <mat-option [value]=\"option?.id\">{{ option?.display }}</mat-option>\n                }\n              }\n            </mat-select>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"enumerated-field-container readonly-field\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          <input\n            id=\"{{ fieldConfig().name }}-readonly-input-text\"\n            matInput\n            (keydown.enter)=\"$event.preventDefault()\"\n            [readonly]=\"true\"\n            type=\"text\"\n            [required]=\"hasRequiredValidator()\"\n            [value]=\"singleEnumDisplayText()\" />\n        </mat-form-field>\n        @if (viewDetails()) {\n          <a\n            mat-icon-button\n            color=\"accent\"\n            [matTooltip]=\"tooltipMessage()\"\n            matTooltipPosition=\"below\"\n            [routerLink]=\"['/', route(), form().get(this.fieldConfig().name)?.value]\">\n            <mat-icon>arrow_forward</mat-icon>\n          </a>\n        }\n      </div>\n      <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n    }\n  } @else {\n    <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n  }\n</ng-container>\n", styles: [".enumerated-field-container{display:flex;flex-direction:row;gap:10px}.display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EnumeratedFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EnumeratedFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-enumerated-field', imports: [
                         MatFormFieldModule,
@@ -1011,7 +1017,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
             valueMap.set(value.value, value.label);
         });
         return valueMap;
-    }, { ...(ngDevMode ? { debugName: "availableEnumOptions" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "availableEnumOptions" }] : []));
     currentValue = computed(() => {
         const form = this.form();
         const fieldConfig = this.fieldConfig();
@@ -1019,7 +1025,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
             return;
         }
         return form.get(fieldConfig.name)?.value;
-    }, { ...(ngDevMode ? { debugName: "currentValue" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
     currentDisplayText = computed(() => {
         const value = this.currentValue();
         const availableOptions = this.availableEnumOptions();
@@ -1027,7 +1033,7 @@ class NullBooleanFieldComponent extends BaseInputComponent {
             return;
         }
         return availableOptions.get(value);
-    }, { ...(ngDevMode ? { debugName: "currentDisplayText" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "currentDisplayText" }] : []));
     hasRequiredValidator = computed(() => {
         const form = this.form();
         const fieldConfig = this.fieldConfig();
@@ -1039,11 +1045,11 @@ class NullBooleanFieldComponent extends BaseInputComponent {
             return false;
         }
         return control.hasValidator(Validators.required);
-    }, { ...(ngDevMode ? { debugName: "hasRequiredValidator" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NullBooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: NullBooleanFieldComponent, isStandalone: true, selector: "ccc-nullboolean-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n  @if (showField()) {\n    @let options = availableEnumOptions();\n    @if (editMode() === 'edit') {\n      <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n        <mat-label>{{ fieldConfig().label }}</mat-label>\n        <mat-select\n          [formControlName]=\"fieldConfig().name\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [canSelectNullableOptions]=\"true\"\n          [ariaReadOnly]=\"editMode() === 'view'\">\n          @for (option of options; track option[0]) {\n            @if (option[0] === currentValue()) {\n              <mat-option [value]=\"option[0]\" selected>{{ option[1] }}</mat-option>\n            } @else {\n              <mat-option [value]=\"option[0]\">{{ option[1] }}</mat-option>\n            }\n          }\n        </mat-select>\n      </mat-form-field>\n    } @else {\n      <div class=\"readonly-field\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          <input\n            matInput\n            (keydown.enter)=\"$event.preventDefault()\"\n            [readonly]=\"true\"\n            type=\"text\"\n            [required]=\"hasRequiredValidator()\"\n            [value]=\"currentDisplayText()\" />\n        </mat-form-field>\n      </div>\n    }\n  } @else {\n    <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n  }\n</ng-container>\n", styles: [".display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatAutocompleteModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NullBooleanFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NullBooleanFieldComponent, isStandalone: true, selector: "ccc-nullboolean-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n  @if (showField()) {\n    @let options = availableEnumOptions();\n    @if (editMode() === 'edit') {\n      <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n        <mat-label>{{ fieldConfig().label }}</mat-label>\n        <mat-select\n          [formControlName]=\"fieldConfig().name\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [canSelectNullableOptions]=\"true\"\n          [ariaReadOnly]=\"editMode() === 'view'\">\n          @for (option of options; track option[0]) {\n            @if (option[0] === currentValue()) {\n              <mat-option [value]=\"option[0]\" selected>{{ option[1] }}</mat-option>\n            } @else {\n              <mat-option [value]=\"option[0]\">{{ option[1] }}</mat-option>\n            }\n          }\n        </mat-select>\n      </mat-form-field>\n    } @else {\n      <div class=\"readonly-field\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          <input\n            matInput\n            (keydown.enter)=\"$event.preventDefault()\"\n            [readonly]=\"true\"\n            type=\"text\"\n            [required]=\"hasRequiredValidator()\"\n            [value]=\"currentDisplayText()\" />\n        </mat-form-field>\n      </div>\n    }\n  } @else {\n    <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n  }\n</ng-container>\n", styles: [".display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatAutocompleteModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NullBooleanFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NullBooleanFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-nullboolean-field', imports: [
                         MatFormFieldModule,
@@ -1061,19 +1067,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
         }] });
 
 class NumberFieldComponent extends BaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: NumberFieldComponent, isStandalone: true, selector: "ccc-number-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"number\"\n        [formControlName]=\"fieldConfig().name\" />\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NumberFieldComponent, isStandalone: true, selector: "ccc-number-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"number\"\n        [formControlName]=\"fieldConfig().name\" />\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-number-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule], template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"number\"\n        [formControlName]=\"fieldConfig().name\" />\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"] }]
         }] });
 
 class TextFieldComponent extends BaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: TextFieldComponent, isStandalone: true, selector: "ccc-text-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"text\"\n        [formControlName]=\"fieldConfig().name\"\n        [class.dirty-input]=\"form().get(fieldConfig().name)?.dirty\" />\n      @if (editMode() === 'edit' && form().get(fieldConfig().name)?.dirty) {\n        <button matSuffix mat-icon-button (click)=\"reset()\" tabindex=\"-1\">\n          <mat-icon>refresh</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TextFieldComponent, isStandalone: true, selector: "ccc-text-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"text\"\n        [formControlName]=\"fieldConfig().name\"\n        [class.dirty-input]=\"form().get(fieldConfig().name)?.dirty\" />\n      @if (editMode() === 'edit' && form().get(fieldConfig().name)?.dirty) {\n        <button matSuffix mat-icon-button (click)=\"reset()\" tabindex=\"-1\">\n          <mat-icon>refresh</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-text-field', imports: [
                         MatFormFieldModule,
@@ -1086,25 +1092,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
         }] });
 
 class ResourceFieldComponent {
-    fieldConfig = input.required({ ...(ngDevMode ? { debugName: "fieldConfig" } : {}) });
-    meta = input.required({ ...(ngDevMode ? { debugName: "meta" } : {}) });
-    fieldClass = input(undefined, { ...(ngDevMode ? { debugName: "fieldClass" } : {}) });
-    editMode = input('edit', { ...(ngDevMode ? { debugName: "editMode" } : {}) });
-    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
-    formDataState = input(undefined, { ...(ngDevMode ? { debugName: "formDataState" } : {}) });
-    pristineValue = input(undefined, { ...(ngDevMode ? { debugName: "pristineValue" } : {}) });
-    data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : {}) });
+    fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
+    meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
+    fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
+    editMode = input('edit', ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    formDataState = input(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
+    pristineValue = input(...(ngDevMode ? [undefined, { debugName: "pristineValue" }] : []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
     previouslyNulled = null;
     fieldMeta = computed(() => {
         return (this.meta().fields?.find((field) => field.fieldName === this.fieldConfig().name) ||
             {});
-    }, { ...(ngDevMode ? { debugName: "fieldMeta" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "fieldMeta" }] : []));
     mode = computed(() => {
         if (this.fieldConfig().readOnly) {
             return 'view';
         }
         return this.editMode();
-    }, { ...(ngDevMode ? { debugName: "mode" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "mode" }] : []));
     showField = computed(() => {
         const shouldRender = this.fieldConfig().shouldRender;
         const conditionallyNull = this.fieldConfig().nullIfConditionallyHidden;
@@ -1143,7 +1149,7 @@ class ResourceFieldComponent {
             console.error(e);
             return true;
         }
-    }, { ...(ngDevMode ? { debugName: "showField" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showField" }] : []));
     showEmptyField = computed(() => {
         const editMode = this.mode();
         const showField = this.showField();
@@ -1164,7 +1170,7 @@ class ResourceFieldComponent {
             return true;
         }
         return false;
-    }, { ...(ngDevMode ? { debugName: "showEmptyField" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showEmptyField" }] : []));
     class = '';
     booleanEditDisplayType = computed(() => {
         const fieldConfig = this.fieldConfig();
@@ -1185,7 +1191,7 @@ class ResourceFieldComponent {
             return 'nullboolean';
         }
         return 'boolean';
-    }, { ...(ngDevMode ? { debugName: "booleanEditDisplayType" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "booleanEditDisplayType" }] : []));
     previousValidatorCount = 0;
     constructor() {
         effect(() => {
@@ -1222,10 +1228,10 @@ class ResourceFieldComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceFieldComponent, isStandalone: true, selector: "ccc-resource-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div [class.hidden-field]=\"!showField()\">\n  @if (showEmptyField()) {\n    <ccc-empty-readonly-field [label]=\"fieldConfig().label\"></ccc-empty-readonly-field>\n  } @else {\n    @switch (fieldMeta().displayType) {\n      @case ('date') {\n        <ccc-date-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-date-field>\n      }\n\n      @case ('civildate') {\n        <ccc-date-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-date-field>\n      }\n\n      @case ('number') {\n        <ccc-number-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-number-field>\n      }\n\n      @case ('boolean') {\n        <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n      }\n      @case ('nullboolean') {\n        <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n      }\n\n      @case ('enumerated') {\n        <ccc-enumerated-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-enumerated-field>\n      }\n\n      @default {\n        <ccc-text-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-text-field>\n      }\n    }\n  }\n</div>\n\n<ng-template #booleanFragment>\n  @if (booleanEditDisplayType() === 'boolean') {\n    <ccc-boolean-field\n      [form]=\"form()\"\n      [fieldConfig]=\"fieldConfig()\"\n      [editMode]=\"mode()\"\n      [fieldClass]=\"fieldClass()\"\n      [meta]=\"meta()\"\n      [pristineValue]=\"pristineValue()\"\n      [relatedData]=\"data()\"\n      [fieldMeta]=\"fieldMeta()\"\n      [showField]=\"showField()\">\n    </ccc-boolean-field>\n  } @else if (booleanEditDisplayType() === 'nullboolean') {\n    <ccc-nullboolean-field\n      [form]=\"form()\"\n      [fieldConfig]=\"fieldConfig()\"\n      [editMode]=\"mode()\"\n      [fieldClass]=\"fieldClass()\"\n      [meta]=\"meta()\"\n      [pristineValue]=\"pristineValue()\"\n      [relatedData]=\"data()\"\n      [fieldMeta]=\"fieldMeta()\"\n      [showField]=\"showField()\">\n    </ccc-nullboolean-field>\n  }\n</ng-template>\n", styles: [".checkbox{margin-top:10px}.dirty-input{background-color:#00617f26}\n"], dependencies: [{ kind: "component", type: DateFieldComponent, selector: "ccc-date-field" }, { kind: "component", type: BooleanFieldComponent, selector: "ccc-boolean-field" }, { kind: "component", type: TextFieldComponent, selector: "ccc-text-field" }, { kind: "component", type: NumberFieldComponent, selector: "ccc-number-field" }, { kind: "component", type: EnumeratedFieldComponent, selector: "ccc-enumerated-field" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: EmptyReadonlyFieldComponent, selector: "ccc-empty-readonly-field", inputs: ["label"] }, { kind: "component", type: NullBooleanFieldComponent, selector: "ccc-nullboolean-field" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceFieldComponent, isStandalone: true, selector: "ccc-resource-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div [class.hidden-field]=\"!showField()\">\n  @if (showEmptyField()) {\n    <ccc-empty-readonly-field [label]=\"fieldConfig().label\"></ccc-empty-readonly-field>\n  } @else {\n    @switch (fieldMeta().displayType) {\n      @case ('date') {\n        <ccc-date-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-date-field>\n      }\n\n      @case ('civildate') {\n        <ccc-date-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-date-field>\n      }\n\n      @case ('number') {\n        <ccc-number-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-number-field>\n      }\n\n      @case ('boolean') {\n        <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n      }\n      @case ('nullboolean') {\n        <ng-container *ngTemplateOutlet=\"booleanFragment\"></ng-container>\n      }\n\n      @case ('enumerated') {\n        <ccc-enumerated-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-enumerated-field>\n      }\n\n      @default {\n        <ccc-text-field\n          [form]=\"form()\"\n          [fieldConfig]=\"fieldConfig()\"\n          [editMode]=\"mode()\"\n          [fieldClass]=\"fieldClass()\"\n          [meta]=\"meta()\"\n          [pristineValue]=\"pristineValue()\"\n          [relatedData]=\"data()\"\n          [fieldMeta]=\"fieldMeta()\"\n          [showField]=\"showField()\">\n        </ccc-text-field>\n      }\n    }\n  }\n</div>\n\n<ng-template #booleanFragment>\n  @if (booleanEditDisplayType() === 'boolean') {\n    <ccc-boolean-field\n      [form]=\"form()\"\n      [fieldConfig]=\"fieldConfig()\"\n      [editMode]=\"mode()\"\n      [fieldClass]=\"fieldClass()\"\n      [meta]=\"meta()\"\n      [pristineValue]=\"pristineValue()\"\n      [relatedData]=\"data()\"\n      [fieldMeta]=\"fieldMeta()\"\n      [showField]=\"showField()\">\n    </ccc-boolean-field>\n  } @else if (booleanEditDisplayType() === 'nullboolean') {\n    <ccc-nullboolean-field\n      [form]=\"form()\"\n      [fieldConfig]=\"fieldConfig()\"\n      [editMode]=\"mode()\"\n      [fieldClass]=\"fieldClass()\"\n      [meta]=\"meta()\"\n      [pristineValue]=\"pristineValue()\"\n      [relatedData]=\"data()\"\n      [fieldMeta]=\"fieldMeta()\"\n      [showField]=\"showField()\">\n    </ccc-nullboolean-field>\n  }\n</ng-template>\n", styles: [".checkbox{margin-top:10px}.dirty-input{background-color:#00617f26}\n"], dependencies: [{ kind: "component", type: DateFieldComponent, selector: "ccc-date-field" }, { kind: "component", type: BooleanFieldComponent, selector: "ccc-boolean-field" }, { kind: "component", type: TextFieldComponent, selector: "ccc-text-field" }, { kind: "component", type: NumberFieldComponent, selector: "ccc-number-field" }, { kind: "component", type: EnumeratedFieldComponent, selector: "ccc-enumerated-field" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: EmptyReadonlyFieldComponent, selector: "ccc-empty-readonly-field", inputs: ["label"] }, { kind: "component", type: NullBooleanFieldComponent, selector: "ccc-nullboolean-field" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-field', imports: [
                         DateFieldComponent,
@@ -1244,16 +1250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class ResourceLayoutComponent {
-    element = input.required({ ...(ngDevMode ? { debugName: "element" } : {}) });
-    meta = input.required({ ...(ngDevMode ? { debugName: "meta" } : {}) });
-    fieldClass = input(undefined, { ...(ngDevMode ? { debugName: "fieldClass" } : {}) });
-    editMode = input.required({ ...(ngDevMode ? { debugName: "editMode" } : {}) });
-    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
-    formDataState = model(undefined, { ...(ngDevMode ? { debugName: "formDataState" } : {}) });
-    pristineValue = input('', { ...(ngDevMode ? { debugName: "pristineValue" } : {}) });
-    relatedData = input(undefined, { ...(ngDevMode ? { debugName: "relatedData" } : {}) });
-    parentClass = input(undefined, { ...(ngDevMode ? { debugName: "parentClass" } : {}) });
-    layoutNestingDepth = input(1, { ...(ngDevMode ? { debugName: "layoutNestingDepth" } : {}) });
+    element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
+    meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : []));
+    fieldClass = input(...(ngDevMode ? [undefined, { debugName: "fieldClass" }] : []));
+    editMode = input.required(...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    formDataState = model(...(ngDevMode ? [undefined, { debugName: "formDataState" }] : []));
+    pristineValue = input('', ...(ngDevMode ? [{ debugName: "pristineValue" }] : []));
+    relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
+    parentClass = input(...(ngDevMode ? [undefined, { debugName: "parentClass" }] : []));
+    layoutNestingDepth = input(1, ...(ngDevMode ? [{ debugName: "layoutNestingDepth" }] : []));
     maxLayoutNestingDepth = maxLayoutNestingDepth;
     children = computed(() => {
         const element = this.element();
@@ -1261,10 +1267,10 @@ class ResourceLayoutComponent {
             return element.children;
         }
         return [];
-    }, { ...(ngDevMode ? { debugName: "children" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "children" }] : []));
     layoutChildrenConfig = computed(() => {
         return flattenElements(this.children());
-    }, { ...(ngDevMode ? { debugName: "layoutChildrenConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "layoutChildrenConfig" }] : []));
     previouslyNulled = false;
     nullIfConditionallyHidden = computed(() => {
         const element = this.element();
@@ -1275,7 +1281,7 @@ class ResourceLayoutComponent {
             return element.nullAllChildrenIfConditionallyHidden;
         }
         return false;
-    }, { ...(ngDevMode ? { debugName: "nullIfConditionallyHidden" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "nullIfConditionallyHidden" }] : []));
     showLayout = computed(() => {
         const element = this.element();
         const shouldRender = element.shouldRender;
@@ -1322,7 +1328,7 @@ class ResourceLayoutComponent {
             console.error(e);
             return true;
         }
-    }, { ...(ngDevMode ? { debugName: "showLayout" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showLayout" }] : []));
     class = '';
     constructor() {
         // TODO: Remove this effect once Angular supports signals in Reactive forms to obtain changes to form values.
@@ -1374,10 +1380,10 @@ class ResourceLayoutComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceLayoutComponent, isStandalone: true, selector: "ccc-resource-layout-template", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentClass: { classPropertyName: "parentClass", publicName: "parentClass", isSignal: true, isRequired: false, transformFunction: null }, layoutNestingDepth: { classPropertyName: "layoutNestingDepth", publicName: "layoutNestingDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDataState: "formDataStateChange" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"section {{ parentClass() }}\" [class.hidden-field]=\"!showLayout()\">\n  @let parentElement = element();\n  @if (children().length > 0) {\n    <div\n      class=\"section-elements dense-1 resource-layout-container\"\n      [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n      @if (parentElement.type !== 'padding' && parentElement.label !== '') {\n        <div class=\"label\">{{ parentElement.label }}</div>\n      }\n      @for (elementField of children(); track elementField) {\n        @let childElement = elementField;\n        @if (childElement.type === 'section') {\n          @if (layoutNestingDepth() < maxLayoutNestingDepth) {\n            <ccc-resource-layout-template\n              [layoutNestingDepth]=\"layoutNestingDepth() + 1\"\n              [element]=\"childElement\"\n              [meta]=\"meta()\"\n              [fieldClass]=\"fieldClass()\"\n              [editMode]=\"editMode()\"\n              [form]=\"form()\"\n              [formDataState]=\"formDataState()\"\n              [pristineValue]=\"pristineValue()\"\n              [relatedData]=\"relatedData()\"\n              [parentClass]=\"parentClass()\">\n            </ccc-resource-layout-template>\n          }\n        } @else if (childElement.type === 'field') {\n          <ccc-resource-field\n            [meta]=\"meta()\"\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [editMode]=\"editMode()\"\n            [form]=\"form()\"\n            [formDataState]=\"formDataState()\"\n            [pristineValue]=\"pristineValue()\"\n            [data]=\"relatedData()\">\n          </ccc-resource-field>\n        } @else if (childElement.type === 'computedDisplayField') {\n          <ccc-computed-field\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [formDataState]=\"formDataState()\"></ccc-computed-field>\n        } @else if (childElement.type === 'padding') {\n          <ccc-padding-element [paddingElement]=\"childElement\"></ccc-padding-element>\n        }\n      }\n    </div>\n  } @else {\n    @if (parentElement.type === 'field') {\n      <div\n        class=\"section-elements dense-1 resource-layout-container\"\n        [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n        <ccc-resource-field\n          [meta]=\"meta()\"\n          [fieldClass]=\"fieldClass()\"\n          [fieldConfig]=\"parentElement\"\n          [editMode]=\"editMode()\"\n          [form]=\"form()\"\n          [formDataState]=\"formDataState()\"\n          [pristineValue]=\"pristineValue()\"\n          [data]=\"relatedData()\">\n        </ccc-resource-field>\n      </div>\n    } @else if (parentElement.type === 'computedDisplayField') {\n      <ccc-computed-field\n        [fieldClass]=\"fieldClass()\"\n        [fieldConfig]=\"parentElement\"\n        [formDataState]=\"formDataState()\"></ccc-computed-field>\n    } @else if (parentElement.type === 'padding') {\n      <ccc-padding-element [paddingElement]=\"parentElement\"></ccc-padding-element>\n    }\n  }\n</div>\n", styles: [".section{margin-top:15px}.section-elements{display:flex;flex-wrap:wrap;padding-bottom:4px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:var(--layout-label-background-color);border-radius:8px;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}\n"], dependencies: [{ kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: PaddingElementComponent, selector: "ccc-padding-element", inputs: ["paddingElement"] }, { kind: "component", type: ResourceFieldComponent, selector: "ccc-resource-field", inputs: ["fieldConfig", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "data"] }, { kind: "component", type: ComputedFieldComponent, selector: "ccc-computed-field", inputs: ["fieldConfig", "fieldClass", "formDataState"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceLayoutComponent, isStandalone: true, selector: "ccc-resource-layout-template", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formDataState: { classPropertyName: "formDataState", publicName: "formDataState", isSignal: true, isRequired: false, transformFunction: null }, pristineValue: { classPropertyName: "pristineValue", publicName: "pristineValue", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentClass: { classPropertyName: "parentClass", publicName: "parentClass", isSignal: true, isRequired: false, transformFunction: null }, layoutNestingDepth: { classPropertyName: "layoutNestingDepth", publicName: "layoutNestingDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDataState: "formDataStateChange" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"section {{ parentClass() }}\" [class.hidden-field]=\"!showLayout()\">\n  @let parentElement = element();\n  @if (children().length > 0) {\n    <div\n      class=\"section-elements dense-1 resource-layout-container\"\n      [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n      @if (parentElement.type !== 'padding' && parentElement.label !== '') {\n        <div class=\"label\">{{ parentElement.label }}</div>\n      }\n      @for (elementField of children(); track elementField) {\n        @let childElement = elementField;\n        @if (childElement.type === 'section') {\n          @if (layoutNestingDepth() < maxLayoutNestingDepth) {\n            <ccc-resource-layout-template\n              [layoutNestingDepth]=\"layoutNestingDepth() + 1\"\n              [element]=\"childElement\"\n              [meta]=\"meta()\"\n              [fieldClass]=\"fieldClass()\"\n              [editMode]=\"editMode()\"\n              [form]=\"form()\"\n              [formDataState]=\"formDataState()\"\n              [pristineValue]=\"pristineValue()\"\n              [relatedData]=\"relatedData()\"\n              [parentClass]=\"parentClass()\">\n            </ccc-resource-layout-template>\n          }\n        } @else if (childElement.type === 'field') {\n          <ccc-resource-field\n            [meta]=\"meta()\"\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [editMode]=\"editMode()\"\n            [form]=\"form()\"\n            [formDataState]=\"formDataState()\"\n            [pristineValue]=\"pristineValue()\"\n            [data]=\"relatedData()\">\n          </ccc-resource-field>\n        } @else if (childElement.type === 'computedDisplayField') {\n          <ccc-computed-field\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [formDataState]=\"formDataState()\"></ccc-computed-field>\n        } @else if (childElement.type === 'padding') {\n          <ccc-padding-element [paddingElement]=\"childElement\"></ccc-padding-element>\n        }\n      }\n    </div>\n  } @else {\n    @if (parentElement.type === 'field') {\n      <div\n        class=\"section-elements dense-1 resource-layout-container\"\n        [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n        <ccc-resource-field\n          [meta]=\"meta()\"\n          [fieldClass]=\"fieldClass()\"\n          [fieldConfig]=\"parentElement\"\n          [editMode]=\"editMode()\"\n          [form]=\"form()\"\n          [formDataState]=\"formDataState()\"\n          [pristineValue]=\"pristineValue()\"\n          [data]=\"relatedData()\">\n        </ccc-resource-field>\n      </div>\n    } @else if (parentElement.type === 'computedDisplayField') {\n      <ccc-computed-field\n        [fieldClass]=\"fieldClass()\"\n        [fieldConfig]=\"parentElement\"\n        [formDataState]=\"formDataState()\"></ccc-computed-field>\n    } @else if (parentElement.type === 'padding') {\n      <ccc-padding-element [paddingElement]=\"parentElement\"></ccc-padding-element>\n    }\n  }\n</div>\n", styles: [".section{margin-top:15px}.section-elements{display:flex;flex-wrap:wrap;padding-bottom:4px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:var(--layout-label-background-color);border-radius:8px;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}\n"], dependencies: [{ kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: PaddingElementComponent, selector: "ccc-padding-element", inputs: ["paddingElement"] }, { kind: "component", type: ResourceFieldComponent, selector: "ccc-resource-field", inputs: ["fieldConfig", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "data"] }, { kind: "component", type: ComputedFieldComponent, selector: "ccc-computed-field", inputs: ["fieldConfig", "fieldClass", "formDataState"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-layout-template', imports: [PaddingElementComponent, ResourceFieldComponent, ComputedFieldComponent], template: "<div class=\"section {{ parentClass() }}\" [class.hidden-field]=\"!showLayout()\">\n  @let parentElement = element();\n  @if (children().length > 0) {\n    <div\n      class=\"section-elements dense-1 resource-layout-container\"\n      [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n      @if (parentElement.type !== 'padding' && parentElement.label !== '') {\n        <div class=\"label\">{{ parentElement.label }}</div>\n      }\n      @for (elementField of children(); track elementField) {\n        @let childElement = elementField;\n        @if (childElement.type === 'section') {\n          @if (layoutNestingDepth() < maxLayoutNestingDepth) {\n            <ccc-resource-layout-template\n              [layoutNestingDepth]=\"layoutNestingDepth() + 1\"\n              [element]=\"childElement\"\n              [meta]=\"meta()\"\n              [fieldClass]=\"fieldClass()\"\n              [editMode]=\"editMode()\"\n              [form]=\"form()\"\n              [formDataState]=\"formDataState()\"\n              [pristineValue]=\"pristineValue()\"\n              [relatedData]=\"relatedData()\"\n              [parentClass]=\"parentClass()\">\n            </ccc-resource-layout-template>\n          }\n        } @else if (childElement.type === 'field') {\n          <ccc-resource-field\n            [meta]=\"meta()\"\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [editMode]=\"editMode()\"\n            [form]=\"form()\"\n            [formDataState]=\"formDataState()\"\n            [pristineValue]=\"pristineValue()\"\n            [data]=\"relatedData()\">\n          </ccc-resource-field>\n        } @else if (childElement.type === 'computedDisplayField') {\n          <ccc-computed-field\n            [fieldClass]=\"fieldClass()\"\n            [fieldConfig]=\"childElement\"\n            [formDataState]=\"formDataState()\"></ccc-computed-field>\n        } @else if (childElement.type === 'padding') {\n          <ccc-padding-element [paddingElement]=\"childElement\"></ccc-padding-element>\n        }\n      }\n    </div>\n  } @else {\n    @if (parentElement.type === 'field') {\n      <div\n        class=\"section-elements dense-1 resource-layout-container\"\n        [class]=\"layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'\">\n        <ccc-resource-field\n          [meta]=\"meta()\"\n          [fieldClass]=\"fieldClass()\"\n          [fieldConfig]=\"parentElement\"\n          [editMode]=\"editMode()\"\n          [form]=\"form()\"\n          [formDataState]=\"formDataState()\"\n          [pristineValue]=\"pristineValue()\"\n          [data]=\"relatedData()\">\n        </ccc-resource-field>\n      </div>\n    } @else if (parentElement.type === 'computedDisplayField') {\n      <ccc-computed-field\n        [fieldClass]=\"fieldClass()\"\n        [fieldConfig]=\"parentElement\"\n        [formDataState]=\"formDataState()\"></ccc-computed-field>\n    } @else if (parentElement.type === 'padding') {\n      <ccc-padding-element [paddingElement]=\"parentElement\"></ccc-padding-element>\n    }\n  }\n</div>\n", styles: [".section{margin-top:15px}.section-elements{display:flex;flex-wrap:wrap;padding-bottom:4px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:var(--layout-label-background-color);border-radius:8px;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}\n"] }]
         }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: true }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], formDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDataState", required: false }] }, { type: i0.Output, args: ["formDataStateChange"] }], pristineValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pristineValue", required: false }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }], parentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentClass", required: false }] }], layoutNestingDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNestingDepth", required: false }] }], class: [{
@@ -1389,10 +1395,10 @@ class BaseRPCModalComponent {
     methodMeta = inject(METHOD_META);
     dialogRef = inject(MatDialogRef);
     data = inject(MAT_DIALOG_DATA);
-    formData = signal({}, { ...(ngDevMode ? { debugName: "formData" } : {}) });
+    formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
     meta = computed(() => {
         return this.methodMeta(this.formData().method);
-    }, { ...(ngDevMode ? { debugName: "meta" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "meta" }] : []));
     constructor() {
         this.formData.set(this.data);
         if (this.data.width) {
@@ -1424,12 +1430,12 @@ class BaseRPCModalComponent {
             }
         }
         return fg;
-    }, { ...(ngDevMode ? { debugName: "form" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
     pristineForm = {};
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseRPCModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseRPCModalComponent, isStandalone: true, selector: "ccc-base-rpc-modal", providers: [ResourceStore], ngImport: i0, template: "<div mat-dialog-title>{{ formData().label }}</div>\n<mat-dialog-content>\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of formData().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"meta()\"\n            [pristineValue]=\"pristineForm[element.name]\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"form().getRawValue()\" [disabled]=\"!form().valid\">\n    Complete\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseRPCModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BaseRPCModalComponent, isStandalone: true, selector: "ccc-base-rpc-modal", providers: [ResourceStore], ngImport: i0, template: "<div mat-dialog-title>{{ formData().label }}</div>\n<mat-dialog-content>\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of formData().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"meta()\"\n            [pristineValue]=\"pristineForm[element.name]\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"form().getRawValue()\" [disabled]=\"!form().valid\">\n    Complete\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseRPCModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseRPCModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-base-rpc-modal', imports: [
                         MatDialogModule,
@@ -1451,14 +1457,14 @@ class RpcButtonComponent {
     store = inject(ResourceStore);
     methodMeta = inject(METHOD_META);
     relatedData = input.required({ ...(ngDevMode ? { debugName: "relatedData" } : {}) });
-    rpcConfig = input.required({ ...(ngDevMode ? { debugName: "rpcConfig" } : {}) });
-    primaryResource = input.required({ ...(ngDevMode ? { debugName: "primaryResource" } : {}) });
-    dependentResources = input([], { ...(ngDevMode ? { debugName: "dependentResources" } : {}) });
+    rpcConfig = input.required(...(ngDevMode ? [{ debugName: "rpcConfig" }] : []));
+    primaryResource = input.required(...(ngDevMode ? [{ debugName: "primaryResource" }] : []));
+    dependentResources = input([], ...(ngDevMode ? [{ debugName: "dependentResources" }] : []));
     resourceConfigRouteSnapshot = computed(() => {
         return (this.rpcConfig() ||
             this.activatedRoute.snapshot.data['config']?.parentConfig ||
             {});
-    }, { ...(ngDevMode ? { debugName: "resourceConfigRouteSnapshot" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "resourceConfigRouteSnapshot" }] : []));
     showRPCButton = computed(() => {
         const rpcConfig = this.rpcConfig();
         if (!rpcConfig) {
@@ -1481,7 +1487,7 @@ class RpcButtonComponent {
             }
         }
         return canView;
-    }, { ...(ngDevMode ? { debugName: "showRPCButton" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showRPCButton" }] : []));
     submitRPC() {
         const rpcConfig = this.rpcConfig();
         if (!rpcConfig) {
@@ -1584,10 +1590,10 @@ class RpcButtonComponent {
             ref.reload();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RpcButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: RpcButtonComponent, isStandalone: true, selector: "ccc-rpc-button", inputs: { relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: true, transformFunction: null }, rpcConfig: { classPropertyName: "rpcConfig", publicName: "rpcConfig", isSignal: true, isRequired: true, transformFunction: null }, primaryResource: { classPropertyName: "primaryResource", publicName: "primaryResource", isSignal: true, isRequired: true, transformFunction: null }, dependentResources: { classPropertyName: "dependentResources", publicName: "dependentResources", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], ngImport: i0, template: "@if (showRPCButton()) {\n  <div class=\"button-container\">\n    <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n      {{ rpcConfig().label }}\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RpcButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RpcButtonComponent, isStandalone: true, selector: "ccc-rpc-button", inputs: { relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: true, transformFunction: null }, rpcConfig: { classPropertyName: "rpcConfig", publicName: "rpcConfig", isSignal: true, isRequired: true, transformFunction: null }, primaryResource: { classPropertyName: "primaryResource", publicName: "primaryResource", isSignal: true, isRequired: true, transformFunction: null }, dependentResources: { classPropertyName: "dependentResources", publicName: "dependentResources", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], ngImport: i0, template: "@if (showRPCButton()) {\n  <div class=\"button-container\">\n    <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n      {{ rpcConfig().label }}\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RpcButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RpcButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-rpc-button', imports: [MatButtonModule], providers: [ResourceStore], template: "@if (showRPCButton()) {\n  <div class=\"button-container\">\n    <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n      {{ rpcConfig().label }}\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"] }]
         }], propDecorators: { relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: true }] }], rpcConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rpcConfig", required: true }] }], primaryResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryResource", required: true }] }], dependentResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "dependentResources", required: false }] }] } });
@@ -1600,28 +1606,28 @@ class ResourceCreateComponent {
     router = inject(Router);
     destroyRef = inject(DestroyRef);
     formState = inject(FormStateService);
-    isDirty = signal(false, { ...(ngDevMode ? { debugName: "isDirty" } : {}) });
-    submitted = signal(false, { ...(ngDevMode ? { debugName: "submitted" } : {}) });
+    isDirty = signal(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
     complete = output();
-    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
-    parentData = input({}, { ...(ngDevMode ? { debugName: "parentData" } : {}) });
-    loadCreatedResource = input(false, { ...(ngDevMode ? { debugName: "loadCreatedResource" } : {}) });
+    resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
+    parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
+    loadCreatedResource = input(false, ...(ngDevMode ? [{ debugName: "loadCreatedResource" }] : []));
     rootConfig = computed(() => {
         return this.activatedRoute.snapshot.data['config'];
-    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
     config = computed(() => {
         const inputConfig = this.resourceConfig();
         if (inputConfig !== undefined) {
             return inputConfig;
         }
         return this.rootConfig().parentConfig;
-    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
     indentTitle = computed(() => {
         if (this.config().collapsible || this.resourceConfig() === undefined) {
             return false;
         }
         return true;
-    }, { ...(ngDevMode ? { debugName: "indentTitle" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "indentTitle" }] : []));
     form = computed(() => {
         const meta = this.store.resourceMeta();
         const fg = new FormGroup({});
@@ -1669,13 +1675,13 @@ class ResourceCreateComponent {
             fg.addControl(field.fieldName, control);
         }
         return fg;
-    }, { ...(ngDevMode ? { debugName: "form" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
     route = computed(() => {
         const meta = this.store.resourceMeta();
         if (!meta)
             return '';
         return meta.consolidatedRoute || meta.route;
-    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "route" }] : []));
     primaryKeys = computed(() => {
         const meta = this.store.resourceMeta();
         if (!meta)
@@ -1683,14 +1689,14 @@ class ResourceCreateComponent {
         return meta.fields
             .filter((field) => field.primaryKey)
             .sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
-    }, { ...(ngDevMode ? { debugName: "primaryKeys" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
     hasRequiredPrimaryKey = computed(() => {
         const meta = this.store.resourceMeta();
         if (!meta) {
             return false;
         }
         return meta.fields.some((field) => field.primaryKey && field.required);
-    }, { ...(ngDevMode ? { debugName: "hasRequiredPrimaryKey" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "hasRequiredPrimaryKey" }] : []));
     primaryKeyPath = computed(() => {
         const meta = this.store.resourceMeta();
         const isConsolidated = meta.consolidatedRoute !== undefined;
@@ -1705,7 +1711,7 @@ class ResourceCreateComponent {
             return pathPrefix;
         }
         return pathPrefix + '/' + keyPath;
-    }, { ...(ngDevMode ? { debugName: "primaryKeyPath" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryKeyPath" }] : []));
     camelCaseToTitlePipe = new CamelCaseToTitlePipe();
     ngOnInit() {
         if (this.resourceMeta(this.config().primaryResource)) {
@@ -1802,10 +1808,10 @@ class ResourceCreateComponent {
                 .subscribe();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceCreateComponent, isStandalone: true, selector: "ccc-resource-create", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, loadCreatedResource: { classPropertyName: "loadCreatedResource", publicName: "loadCreatedResource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n  <div class=\"header-container\">\n    <div class=\"title\" [class.indent]=\"indentTitle()\">\n      <h1>Create {{ config().title }}</h1>\n    </div>\n\n    <div class=\"state-buttons\">\n      @if (!form().valid && submitted()) {\n        <div class=\"invalid message\">Please complete or fix required fields.</div>\n      }\n      <button mat-raised-button color=\"primary\" (click)=\"cancelForm()\">Cancel</button>\n      <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Create</button>\n    </div>\n  </div>\n\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of config().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"store.resourceMeta()\"\n            [fieldClass]=\"config().fieldClass\"\n            [relatedData]=\"parentData()\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.page-container{position:relative}.header-container{margin:20px 20px 0;display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.indent{padding-left:20px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceCreateComponent, isStandalone: true, selector: "ccc-resource-create", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, loadCreatedResource: { classPropertyName: "loadCreatedResource", publicName: "loadCreatedResource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n  <div class=\"header-container\">\n    <div class=\"title\" [class.indent]=\"indentTitle()\">\n      <h1>Create {{ config().title }}</h1>\n    </div>\n\n    <div class=\"state-buttons\">\n      @if (!form().valid && submitted()) {\n        <div class=\"invalid message\">Please complete or fix required fields.</div>\n      }\n      <button mat-raised-button color=\"primary\" (click)=\"cancelForm()\">Cancel</button>\n      <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Create</button>\n    </div>\n  </div>\n\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of config().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"store.resourceMeta()\"\n            [fieldClass]=\"config().fieldClass\"\n            [relatedData]=\"parentData()\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.page-container{position:relative}.header-container{margin:20px 20px 0;display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.indent{padding-left:20px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-create', imports: [
                         FormsModule,
@@ -1824,13 +1830,13 @@ class ResourceArrayViewComponent {
     resourceMeta = inject(RESOURCE_META);
     store = inject(ResourceStore);
     injector = inject(Injector);
-    resourceConfig = input.required({ ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
-    parentData = input({}, { ...(ngDevMode ? { debugName: "parentData" } : {}) });
+    resourceConfig = input.required(...(ngDevMode ? [{ debugName: "resourceConfig" }] : []));
+    parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
     expPanel = viewChild('expPanel', { ...(ngDevMode ? { debugName: "expPanel" } : {}), read: MatExpansionPanel });
     emptyOneToOne = output();
-    createMode = signal(false, { ...(ngDevMode ? { debugName: "createMode" } : {}) });
+    createMode = signal(false, ...(ngDevMode ? [{ debugName: "createMode" }] : []));
     /* eslint-disable  @typescript-eslint/no-explicit-any */
-    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
+    compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
     showCreateButton = computed(() => {
         const list = this.store.listData();
         const resourceConfig = this.resourceConfig();
@@ -1843,7 +1849,7 @@ class ResourceArrayViewComponent {
             return true;
         }
         return false;
-    }, { ...(ngDevMode ? { debugName: "showCreateButton" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showCreateButton" }] : []));
     createActionConfig = computed(() => {
         const config = this.resourceConfig();
         const showCreate = this.showCreateButton();
@@ -1857,7 +1863,7 @@ class ResourceArrayViewComponent {
             shouldRender: () => (showCreate && config.shouldRenderActions?.create?.(this.parentData())) ?? false,
             resourceData: this.parentData(),
         };
-    }, { ...(ngDevMode ? { debugName: "createActionConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createActionConfig" }] : []));
     createConfig = computed(() => {
         const config = this.resourceConfig();
         if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
@@ -1867,12 +1873,12 @@ class ResourceArrayViewComponent {
             return config.iteratedConfig;
         }
         return config;
-    }, { ...(ngDevMode ? { debugName: "createConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
     resourceListRoute = computed(() => {
         const config = this.resourceConfig();
         const meta = this.resourceMeta(config.connectorResource || config.primaryResource);
         return meta.route;
-    }, { ...(ngDevMode ? { debugName: "resourceListRoute" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "resourceListRoute" }] : []));
     setCreateMode(value) {
         this.createMode.set(value);
         if (value && this.expPanel && this.expPanel()?.closed) {
@@ -1925,10 +1931,10 @@ class ResourceArrayViewComponent {
         this.store.reloadListData();
         this.setCreateMode(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceArrayViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceArrayViewComponent, isStandalone: true, selector: "ccc-resource-array-view", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { emptyOneToOne: "emptyOneToOne" }, providers: [ResourceStore], viewQueries: [{ propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (resourceConfig().title !== '') {\n  <div class=\"resource-array-view\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      [disabled]=\"!resourceConfig().collapsible\"\n      [expanded]=\"!resourceConfig().collapsible\">\n      <mat-expansion-panel-header>\n        @if (resourceConfig().title) {\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ resourceConfig().title }}\n            </h1>\n          </mat-panel-title>\n        }\n        <action-access-control-wrapper [actionContext]=\"createActionConfig()\">\n          <button\n            mat-icon-button\n            class=\"exp-panel-add-element-btn\"\n            color=\"accent\"\n            (click)=\"createResource($event)\"\n            [matTooltip]=\"resourceConfig().createButtonLabel\"\n            matTooltipPosition=\"above\">\n            <mat-icon color=\"accent\">add_circle</mat-icon>\n          </button>\n        </action-access-control-wrapper>\n      </mat-expansion-panel-header>\n\n      @if (!resourceConfig().collapsible && !resourceConfig().title) {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      @if (createMode()) {\n        <ccc-resource-create\n          [resourceConfig]=\"createConfig()\"\n          [parentData]=\"parentData()\"\n          (complete)=\"onCreateCompleted()\">\n        </ccc-resource-create>\n      }\n      @if (store.listStatus() === 'resolved') {\n        @for (resource of store.listData(); track resource['id']; let i = $index) {\n          @let resourceId = (resource[resourceConfig().connectorField] || resource['id']) + '';\n\n          @if (parentData() && resourceConfig().iteratedConfig && resourceId && i + 1 <= resourceConfig().limit) {\n            <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n              inputs: { \n                uuid: resourceId, \n                parentData: parentData(), \n                isArrayChild: true, \n                resourceConfig: resourceConfig().iteratedConfig \n              }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n\n      @if (store.listData().length === 0) {\n        <div>No records found</div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  @if (createMode()) {\n    <ccc-resource-create [resourceConfig]=\"createConfig()\" [parentData]=\"parentData()\" (complete)=\"onCreateCompleted()\">\n    </ccc-resource-create>\n  }\n  @if (store.listStatus() === 'resolved') {\n    @for (resource of store.listData(); track resource['id']; let i = $index) {\n      @if (parentData() && resourceConfig().iteratedConfig && resource['id'] && i + 1 <= resourceConfig().limit) {\n      <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n        inputs: { \n          uuid: resource['id'] + '', \n          parentData: parentData(), \n          isArrayChild: true, \n          resourceConfig: resourceConfig().iteratedConfig \n        }\">\n      </ng-container>\n      }\n    }\n  } @else {\n    <div class=\"resource-container empty\">\n      <div class=\"resource row\"></div>\n    </div>\n  }\n\n  @if (store.listData().length === 0) {\n    <div>No records found</div>\n  }\n}\n", styles: [".resource-array-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.title{display:flex;align-items:center;flex-shrink:0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.no-title-exp-panel-padding{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceArrayViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceArrayViewComponent, isStandalone: true, selector: "ccc-resource-array-view", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { emptyOneToOne: "emptyOneToOne" }, providers: [ResourceStore], viewQueries: [{ propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (resourceConfig().title !== '') {\n  <div class=\"resource-array-view\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      [disabled]=\"!resourceConfig().collapsible\"\n      [expanded]=\"!resourceConfig().collapsible\">\n      <mat-expansion-panel-header>\n        @if (resourceConfig().title) {\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ resourceConfig().title }}\n            </h1>\n          </mat-panel-title>\n        }\n        <action-access-control-wrapper [actionContext]=\"createActionConfig()\">\n          <button\n            mat-icon-button\n            class=\"exp-panel-add-element-btn\"\n            color=\"accent\"\n            (click)=\"createResource($event)\"\n            [matTooltip]=\"resourceConfig().createButtonLabel\"\n            matTooltipPosition=\"above\">\n            <mat-icon color=\"accent\">add_circle</mat-icon>\n          </button>\n        </action-access-control-wrapper>\n      </mat-expansion-panel-header>\n\n      @if (!resourceConfig().collapsible && !resourceConfig().title) {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      @if (createMode()) {\n        <ccc-resource-create\n          [resourceConfig]=\"createConfig()\"\n          [parentData]=\"parentData()\"\n          (complete)=\"onCreateCompleted()\">\n        </ccc-resource-create>\n      }\n      @if (store.listStatus() === 'resolved') {\n        @for (resource of store.listData(); track resource['id']; let i = $index) {\n          @let resourceId = (resource[resourceConfig().connectorField] || resource['id']) + '';\n\n          @if (parentData() && resourceConfig().iteratedConfig && resourceId && i + 1 <= resourceConfig().limit) {\n            <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n              inputs: { \n                uuid: resourceId, \n                parentData: parentData(), \n                isArrayChild: true, \n                resourceConfig: resourceConfig().iteratedConfig \n              }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n\n      @if (store.listData().length === 0) {\n        <div>No records found</div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  @if (createMode()) {\n    <ccc-resource-create [resourceConfig]=\"createConfig()\" [parentData]=\"parentData()\" (complete)=\"onCreateCompleted()\">\n    </ccc-resource-create>\n  }\n  @if (store.listStatus() === 'resolved') {\n    @for (resource of store.listData(); track resource['id']; let i = $index) {\n      @if (parentData() && resourceConfig().iteratedConfig && resource['id'] && i + 1 <= resourceConfig().limit) {\n      <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n        inputs: { \n          uuid: resource['id'] + '', \n          parentData: parentData(), \n          isArrayChild: true, \n          resourceConfig: resourceConfig().iteratedConfig \n        }\">\n      </ng-container>\n      }\n    }\n  } @else {\n    <div class=\"resource-container empty\">\n      <div class=\"resource row\"></div>\n    </div>\n  }\n\n  @if (store.listData().length === 0) {\n    <div>No records found</div>\n  }\n}\n", styles: [".resource-array-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.title{display:flex;align-items:center;flex-shrink:0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.no-title-exp-panel-padding{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceArrayViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceArrayViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-array-view', imports: [
                         MatButtonModule,
@@ -1980,19 +1986,19 @@ function formatDateString(formatString, value) {
 
 class ResourceListComponent {
     /* eslint-disable  @typescript-eslint/no-explicit-any */
-    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
+    compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
     resourceMeta = inject(RESOURCE_META);
     router = inject(Router);
     store = inject(ResourceStore);
     injector = inject(Injector);
     activatedRoute = inject(ActivatedRoute);
-    hideCreateButton = input(true, { ...(ngDevMode ? { debugName: "hideCreateButton" } : {}) });
+    hideCreateButton = input(true, ...(ngDevMode ? [{ debugName: "hideCreateButton" }] : []));
     createMode = output();
-    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
-    viewRoute = input(undefined, { ...(ngDevMode ? { debugName: "viewRoute" } : {}) });
-    filter = input('', { ...(ngDevMode ? { debugName: "filter" } : {}) });
-    linkCreateType = input(false, { ...(ngDevMode ? { debugName: "linkCreateType" } : {}) });
-    isRootList = input(true, { ...(ngDevMode ? { debugName: "isRootList" } : {}) });
+    resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
+    viewRoute = input(...(ngDevMode ? [undefined, { debugName: "viewRoute" }] : []));
+    filter = input('', ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    linkCreateType = input(false, ...(ngDevMode ? [{ debugName: "linkCreateType" }] : []));
+    isRootList = input(true, ...(ngDevMode ? [{ debugName: "isRootList" }] : []));
     showCreateButton = computed(() => {
         const config = this.config();
         if (config.createTitle !== '' && !config.collapsible && !this.hideCreateButton()) {
@@ -2002,7 +2008,7 @@ class ResourceListComponent {
             return true;
         }
         return false;
-    }, { ...(ngDevMode ? { debugName: "showCreateButton" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showCreateButton" }] : []));
     createButtonContext = computed(() => {
         const config = this.resourceConfig();
         const showCreate = this.showCreateButton();
@@ -2018,7 +2024,7 @@ class ResourceListComponent {
             shouldRender: (data) => showCreate && config.shouldRenderActions.create(data),
             resourceData: this.relatedData() ?? {},
         };
-    }, { ...(ngDevMode ? { debugName: "createButtonContext" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createButtonContext" }] : []));
     searchableFields = computed(() => {
         const meta = this.meta();
         if (!meta)
@@ -2026,54 +2032,54 @@ class ResourceListComponent {
         return `over fields of ${meta.route}`;
         // TODO: implement searchable fields based on resource meta
         // return meta.searchableFields.join(', ') || '';
-    }, { ...(ngDevMode ? { debugName: "searchableFields" } : {}) });
-    relatedData = input(undefined, { ...(ngDevMode ? { debugName: "relatedData" } : {}) });
-    parentId = input(undefined, { ...(ngDevMode ? { debugName: "parentId" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "searchableFields" }] : []));
+    relatedData = input(...(ngDevMode ? [undefined, { debugName: "relatedData" }] : []));
+    parentId = input(...(ngDevMode ? [undefined, { debugName: "parentId" }] : []));
     routeConfig = computed(() => {
         return this.activatedRoute.snapshot.data['config'];
-    }, { ...(ngDevMode ? { debugName: "routeConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "routeConfig" }] : []));
     config = computed(() => {
         return this.resourceConfig();
-    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
     expansionConfig = computed(() => {
         const config = this.config().rowExpansionConfig;
         if (config.type !== 'Component' && config.type !== 'Array') {
             config.showBackButton = false;
         }
         return config;
-    }, { ...(ngDevMode ? { debugName: "expansionConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "expansionConfig" }] : []));
     viewRouteFallback = computed(() => {
         if (this.viewRoute()) {
             return this.viewRoute();
         }
         return this.resourceMeta(this.config().primaryResource).route;
-    }, { ...(ngDevMode ? { debugName: "viewRouteFallback" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "viewRouteFallback" }] : []));
     listTitle = computed(() => {
         if (this.config()?.collapsible)
             return '';
         return this.config().title || '';
-    }, { ...(ngDevMode ? { debugName: "listTitle" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "listTitle" }] : []));
     indentTitle = computed(() => {
         if (this.config() === undefined) {
             return false;
         }
         return true;
-    }, { ...(ngDevMode ? { debugName: "indentTitle" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "indentTitle" }] : []));
     createButtonLabel = computed(() => {
         return this.config().createButtonLabel || 'Create';
-    }, { ...(ngDevMode ? { debugName: "createButtonLabel" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createButtonLabel" }] : []));
     meta = computed(() => {
         const config = this.config();
         return this.resourceMeta(config.overrideResource || config.primaryResource);
-    }, { ...(ngDevMode ? { debugName: "meta" } : {}) });
-    resourceRefMap = signal(new Map(), { ...(ngDevMode ? { debugName: "resourceRefMap" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "meta" }] : []));
+    resourceRefMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "resourceRefMap" }] : []));
     primaryKeys = computed(() => {
         const meta = this.meta();
         if (!meta) {
             return [];
         }
         return meta.fields.filter((field) => field.primaryKey !== undefined);
-    }, { ...(ngDevMode ? { debugName: "primaryKeys" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
     rootColumns = computed(() => {
         const config = this.config();
         const idCols = [];
@@ -2099,7 +2105,7 @@ class ResourceListComponent {
             }
         }
         return [...new Set([...idCols, ...config.listColumns])];
-    }, { ...(ngDevMode ? { debugName: "rootColumns" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rootColumns" }] : []));
     columns = computed(() => {
         const refmap = this.resourceRefMap();
         const cols = this.rootColumns();
@@ -2208,7 +2214,7 @@ class ResourceListComponent {
             });
         }
         return columns;
-    }, { ...(ngDevMode ? { debugName: "columns" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
     reloadListData() {
         this.store.reloadListData();
     }
@@ -2234,7 +2240,7 @@ class ResourceListComponent {
             }
             return updatedRow;
         });
-    }, { ...(ngDevMode ? { debugName: "processedRowData" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "processedRowData" }] : []));
     filters = computed(() => {
         const configFilter = this.config().filter?.(this.relatedData()) || '';
         const inputFilter = this.filter();
@@ -2245,7 +2251,7 @@ class ResourceListComponent {
             return `(${inputFilter})`;
         }
         return configFilter || '';
-    }, { ...(ngDevMode ? { debugName: "filters" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
     createResource(event) {
         event.stopPropagation();
         this.createMode.emit(true);
@@ -2256,13 +2262,13 @@ class ResourceListComponent {
         }
         const parent = this.config().parentRelation?.parentKey;
         return this.relatedData()?.[parent] || '';
-    }, { ...(ngDevMode ? { debugName: "parentKey" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
     childKey = computed(() => {
         if (!this.config().parentRelation) {
             return '';
         }
         return this.config().parentRelation?.childKey;
-    }, { ...(ngDevMode ? { debugName: "childKey" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "childKey" }] : []));
     getUniqueId(baseId, usedIds) {
         if (!usedIds.has(baseId)) {
             return baseId;
@@ -2299,8 +2305,8 @@ class ResourceListComponent {
                     if (meta === undefined) {
                         return;
                     }
-                    const route = signal(meta.route, { ...(ngDevMode ? { debugName: "route" } : {}) });
-                    const resource = signal(id.resource, { ...(ngDevMode ? { debugName: "resource" } : {}) });
+                    const route = signal(meta.route, ...(ngDevMode ? [{ debugName: "route" }] : []));
+                    const resource = signal(id.resource, ...(ngDevMode ? [{ debugName: "resource" }] : []));
                     if (!this.resourceRefMap().has(resource())) {
                         const ref = this.store.resourceList(route);
                         if (ref === undefined) {
@@ -2319,10 +2325,10 @@ class ResourceListComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceListComponent, isStandalone: true, selector: "ccc-resource-list", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, hideCreateButton: { classPropertyName: "hideCreateButton", publicName: "hideCreateButton", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, viewRoute: { classPropertyName: "viewRoute", publicName: "viewRoute", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, linkCreateType: { classPropertyName: "linkCreateType", publicName: "linkCreateType", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createMode: "createMode" }, providers: [ResourceStore], ngImport: i0, template: "<div [class]=\"linkCreateType() ? 'page-container hide' : 'page-container'\">\n  <div class=\"header-container\" [class.show-background]=\"!config().collapsible\" [class.indent]=\"indentTitle()\">\n    <h1 class=\"title\">{{ listTitle() }}</h1>\n    <action-access-control-wrapper [actionContext]=\"createButtonContext()\">\n      <div class=\"create-button\">\n        <button mat-raised-button color=\"accent\" (click)=\"createResource($event)\">\n          <div class=\"edit-text\">\n            <mat-icon>create</mat-icon>\n            <span class=\"edit-button-text\"> {{ createButtonLabel() }} </span>\n          </div>\n        </button>\n      </div>\n    </action-access-control-wrapper>\n  </div>\n  <div class=\"resource-container\">\n    @if (config().searchable) {\n      <mat-form-field class=\"search\">\n        <input matInput #qry (keyup)=\"store.searchTokens.set(qry.value)\" placeholder=\"Search\" aria-label=\"Search\" />\n        @if (searchableFields() !== '') {\n          <mat-hint>Search {{ searchableFields() }}</mat-hint>\n        }\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n    }\n    <ccc-grid\n      [rowData]=\"processedRowData()\"\n      [columnDefs]=\"columns()\"\n      [enableRowExpansion]=\"config().enableRowExpansion\"\n      [detailTemplate]=\"expandedRowTemplate\">\n    </ccc-grid>\n  </div>\n</div>\n\n<ng-template #expandedRowTemplate let-rowData>\n  <ng-container\n    *ngComponentOutlet=\"\n      compoundResourceComponent();\n      inputs: {\n        uuid: rowData.id,\n        navAfterDelete: false,\n        deleted: store.reloadListData.bind(store),\n        resourceConfig: expansionConfig(),\n      }\n    \">\n  </ng-container>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.header-container{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;top:0;z-index:10;width:100%}.title{display:flex;align-items:center;flex-shrink:0}.create-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.edit-text{display:flex;flex-direction:row;align-items:center}.edit-text .edit{color:#003b49}.edit-text .mat-icon{margin-right:8px}.edit-button-text{margin-top:auto;margin-bottom:auto}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.hide{display:none}.show-background{background-color:#fff;padding-bottom:20px}.indent{padding-left:20px}.search{width:100%}\n"], dependencies: [{ kind: "component", type: AppGridComponent, selector: "ccc-grid", inputs: ["rowData", "columnDefs", "enableRowExpansion", "detailTemplate", "selectionType"], outputs: ["selectedRows"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceListComponent, isStandalone: true, selector: "ccc-resource-list", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, hideCreateButton: { classPropertyName: "hideCreateButton", publicName: "hideCreateButton", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, viewRoute: { classPropertyName: "viewRoute", publicName: "viewRoute", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, linkCreateType: { classPropertyName: "linkCreateType", publicName: "linkCreateType", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createMode: "createMode" }, providers: [ResourceStore], ngImport: i0, template: "<div [class]=\"linkCreateType() ? 'page-container hide' : 'page-container'\">\n  <div class=\"header-container\" [class.show-background]=\"!config().collapsible\" [class.indent]=\"indentTitle()\">\n    <h1 class=\"title\">{{ listTitle() }}</h1>\n    <action-access-control-wrapper [actionContext]=\"createButtonContext()\">\n      <div class=\"create-button\">\n        <button mat-raised-button color=\"accent\" (click)=\"createResource($event)\">\n          <div class=\"edit-text\">\n            <mat-icon>create</mat-icon>\n            <span class=\"edit-button-text\"> {{ createButtonLabel() }} </span>\n          </div>\n        </button>\n      </div>\n    </action-access-control-wrapper>\n  </div>\n  <div class=\"resource-container\">\n    @if (config().searchable) {\n      <mat-form-field class=\"search\">\n        <input matInput #qry (keyup)=\"store.searchTokens.set(qry.value)\" placeholder=\"Search\" aria-label=\"Search\" />\n        @if (searchableFields() !== '') {\n          <mat-hint>Search {{ searchableFields() }}</mat-hint>\n        }\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n    }\n    <ccc-grid\n      [rowData]=\"processedRowData()\"\n      [columnDefs]=\"columns()\"\n      [enableRowExpansion]=\"config().enableRowExpansion\"\n      [detailTemplate]=\"expandedRowTemplate\">\n    </ccc-grid>\n  </div>\n</div>\n\n<ng-template #expandedRowTemplate let-rowData>\n  <ng-container\n    *ngComponentOutlet=\"\n      compoundResourceComponent();\n      inputs: {\n        uuid: rowData.id,\n        navAfterDelete: false,\n        deleted: store.reloadListData.bind(store),\n        resourceConfig: expansionConfig(),\n      }\n    \">\n  </ng-container>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.header-container{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;top:0;z-index:10;width:100%}.title{display:flex;align-items:center;flex-shrink:0}.create-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.edit-text{display:flex;flex-direction:row;align-items:center}.edit-text .edit{color:#003b49}.edit-text .mat-icon{margin-right:8px}.edit-button-text{margin-top:auto;margin-bottom:auto}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.hide{display:none}.show-background{background-color:#fff;padding-bottom:20px}.indent{padding-left:20px}.search{width:100%}\n"], dependencies: [{ kind: "component", type: AppGridComponent, selector: "ccc-grid", inputs: ["rowData", "columnDefs", "enableRowExpansion", "detailTemplate", "selectionType"], outputs: ["selectedRows"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         AppGridComponent,
@@ -2340,59 +2346,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 class ResourceListCreateComponent {
     /* eslint-disable  @typescript-eslint/no-explicit-any */
-    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
+    compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
     injector = inject(Injector);
     store = inject(ResourceStore);
     listChild = viewChild('list', { ...(ngDevMode ? { debugName: "listChild" } : {}), read: ResourceListComponent });
     route = inject(ActivatedRoute);
     router = inject(Router);
-    create = signal(false, { ...(ngDevMode ? { debugName: "create" } : {}) });
-    parentId = input(undefined, { ...(ngDevMode ? { debugName: "parentId" } : {}) });
-    parentData = input({}, { ...(ngDevMode ? { debugName: "parentData" } : {}) });
-    searchParams = input([], { ...(ngDevMode ? { debugName: "searchParams" } : {}) });
-    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
-    isRootList = input(true, { ...(ngDevMode ? { debugName: "isRootList" } : {}) });
+    create = signal(false, ...(ngDevMode ? [{ debugName: "create" }] : []));
+    parentId = input(...(ngDevMode ? [undefined, { debugName: "parentId" }] : []));
+    parentData = input({}, ...(ngDevMode ? [{ debugName: "parentData" }] : []));
+    searchParams = input([], ...(ngDevMode ? [{ debugName: "searchParams" }] : []));
+    resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
+    isRootList = input(true, ...(ngDevMode ? [{ debugName: "isRootList" }] : []));
     childKey = computed(() => {
         if (!this.config().parentRelation) {
             return '';
         }
         return this.config().parentRelation?.childKey;
-    }, { ...(ngDevMode ? { debugName: "childKey" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "childKey" }] : []));
     filter = computed(() => {
         const filters = [];
         if (this.childKey() !== '' && this.parentKey() !== '') {
             filters.push(`${this.childKey()}:eq:${this.parentKey()}`);
         }
         return filters.join(',');
-    }, { ...(ngDevMode ? { debugName: "filter" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "filter" }] : []));
     parentKey = computed(() => {
         if (this.parentData() === undefined || this.childKey() === undefined) {
             return '';
         }
         const parent = this.config().parentRelation?.parentKey;
         return this.parentData()?.[parent] || '';
-    }, { ...(ngDevMode ? { debugName: "parentKey" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
     config = computed(() => {
         const inputConfig = this.resourceConfig();
         if (inputConfig) {
             return inputConfig;
         }
         return this.rootConfig().parentConfig;
-    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
     expPanel = viewChild('expPanel', { ...(ngDevMode ? { debugName: "expPanel" } : {}), read: MatExpansionPanel });
     rootConfig = computed(() => {
         return this.route.snapshot.data['config'];
-    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
     createLinkType = computed(() => {
         return this.config().loadCreatedResource && this.create();
-    }, { ...(ngDevMode ? { debugName: "createLinkType" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createLinkType" }] : []));
     createConfig = computed(() => {
         const config = this.config();
         if (Object.keys(config.createConfig).length !== 0) {
             return config.createConfig;
         }
         return config;
-    }, { ...(ngDevMode ? { debugName: "createConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
     createResource(event) {
         event.stopPropagation();
         this.create.set(true);
@@ -2406,10 +2412,10 @@ class ResourceListCreateComponent {
             this.create.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceListCreateComponent, isStandalone: true, selector: "ccc-resource-list-create", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, searchParams: { classPropertyName: "searchParams", publicName: "searchParams", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "listChild", first: true, predicate: ["list"], descendants: true, read: ResourceListComponent, isSignal: true }, { propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (config().collapsible) {\n  <div class=\"page-container\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      disabled=\"{{ !config().collapsible }}\"\n      expanded=\"{{ !config().collapsible }}\">\n      @if (config().collapsible || config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ config().title }}\n            </h1>\n          </mat-panel-title>\n          @if (config().createTitle !== '') {\n            <button\n              mat-icon-button\n              class=\"exp-panel-add-element-btn\"\n              color=\"accent\"\n              (click)=\"createResource($event)\"\n              matTooltip=\"{{ config().createButtonLabel }}\"\n              matTooltipPosition=\"above\">\n              <mat-icon color=\"accent\">add_circle</mat-icon>\n            </button>\n          }\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n}\n\n<ng-template #resourceComponents>\n  @if (create()) {\n    <ccc-resource-create\n      [resourceConfig]=\"createConfig()\"\n      [parentData]=\"parentData()\"\n      [loadCreatedResource]=\"config().loadCreatedResource\"\n      (complete)=\"makeCreatePatches()\">\n    </ccc-resource-create>\n  }\n\n  <ccc-resource-list\n    #list\n    [viewRoute]=\"rootConfig().routeData.route\"\n    [resourceConfig]=\"config()\"\n    [filter]=\"filter()\"\n    [hideCreateButton]=\"create()\"\n    [relatedData]=\"parentData()\"\n    [parentId]=\"parentId()\"\n    [linkCreateType]=\"createLinkType()\"\n    [isRootList]=\"isRootList()\"\n    (createMode)=\"create.set($event)\"\n    [compoundResourceComponent]=\"compoundResourceComponent()\">\n  </ccc-resource-list>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ResourceListComponent, selector: "ccc-resource-list", inputs: ["compoundResourceComponent", "hideCreateButton", "resourceConfig", "viewRoute", "filter", "linkCreateType", "isRootList", "relatedData", "parentId"], outputs: ["createMode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceListCreateComponent, isStandalone: true, selector: "ccc-resource-list-create", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, searchParams: { classPropertyName: "searchParams", publicName: "searchParams", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "listChild", first: true, predicate: ["list"], descendants: true, read: ResourceListComponent, isSignal: true }, { propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (config().collapsible) {\n  <div class=\"page-container\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      disabled=\"{{ !config().collapsible }}\"\n      expanded=\"{{ !config().collapsible }}\">\n      @if (config().collapsible || config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ config().title }}\n            </h1>\n          </mat-panel-title>\n          @if (config().createTitle !== '') {\n            <button\n              mat-icon-button\n              class=\"exp-panel-add-element-btn\"\n              color=\"accent\"\n              (click)=\"createResource($event)\"\n              matTooltip=\"{{ config().createButtonLabel }}\"\n              matTooltipPosition=\"above\">\n              <mat-icon color=\"accent\">add_circle</mat-icon>\n            </button>\n          }\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n}\n\n<ng-template #resourceComponents>\n  @if (create()) {\n    <ccc-resource-create\n      [resourceConfig]=\"createConfig()\"\n      [parentData]=\"parentData()\"\n      [loadCreatedResource]=\"config().loadCreatedResource\"\n      (complete)=\"makeCreatePatches()\">\n    </ccc-resource-create>\n  }\n\n  <ccc-resource-list\n    #list\n    [viewRoute]=\"rootConfig().routeData.route\"\n    [resourceConfig]=\"config()\"\n    [filter]=\"filter()\"\n    [hideCreateButton]=\"create()\"\n    [relatedData]=\"parentData()\"\n    [parentId]=\"parentId()\"\n    [linkCreateType]=\"createLinkType()\"\n    [isRootList]=\"isRootList()\"\n    (createMode)=\"create.set($event)\"\n    [compoundResourceComponent]=\"compoundResourceComponent()\">\n  </ccc-resource-list>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ResourceListComponent, selector: "ccc-resource-list", inputs: ["compoundResourceComponent", "hideCreateButton", "resourceConfig", "viewRoute", "filter", "linkCreateType", "isRootList", "relatedData", "parentId"], outputs: ["createMode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceListCreateComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ccc-resource-list-create', imports: [
                         MatExpansionModule,
@@ -2424,13 +2430,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 class ResourceResolverComponent {
     /* eslint-disable  @typescript-eslint/no-explicit-any */
-    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
-    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
+    compoundResourceComponent = input.required(...(ngDevMode ? [{ debugName: "compoundResourceComponent" }] : []));
+    resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
     config = computed(() => {
         return this.resourceConfig();
-    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
     dynamicSlot = viewChild.required('dynamicSlot', { read: ViewContainerRef });
-    parentData = input.required({ ...(ngDevMode ? { debugName: "parentData" } : {}) });
+    parentData = input.required(...(ngDevMode ? [{ debugName: "parentData" }] : []));
     constructor() {
         effect(() => {
             const parentData = this.parentData();
@@ -2475,19 +2481,19 @@ class ResourceResolverComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceResolverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.2", type: ResourceResolverComponent, isStandalone: true, selector: "ccc-resource-resolver", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "dynamicSlot", first: true, predicate: ["dynamicSlot"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #dynamicSlot></ng-template>", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceResolverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: ResourceResolverComponent, isStandalone: true, selector: "ccc-resource-resolver", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "dynamicSlot", first: true, predicate: ["dynamicSlot"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #dynamicSlot></ng-template>", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceResolverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceResolverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-resolver', imports: [], providers: [ResourceStore], template: "<ng-template #dynamicSlot></ng-template>" }]
         }], ctorParameters: () => [], propDecorators: { compoundResourceComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceComponent", required: true }] }], resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], dynamicSlot: [{ type: i0.ViewChild, args: ['dynamicSlot', { ...{ read: ViewContainerRef }, isSignal: true }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: true }] }] } });
 
 class DeleteResourceConfirmationModalComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DeleteResourceConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: DeleteResourceConfirmationModalComponent, isStandalone: true, selector: "ccc-delete-resource-confirmation-modal", ngImport: i0, template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DeleteResourceConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DeleteResourceConfirmationModalComponent, isStandalone: true, selector: "ccc-delete-resource-confirmation-modal", ngImport: i0, template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DeleteResourceConfirmationModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DeleteResourceConfirmationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-delete-resource-confirmation-modal', imports: [MatDialogModule, MatFormFieldModule, MatDialogActions, MatButtonModule, MatInputModule], template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n" }]
         }] });
@@ -2503,25 +2509,25 @@ class ResourceViewComponent {
     destroyRef = inject(DestroyRef);
     formState = inject(FormStateService);
     dialog = inject(MatDialog);
-    editMode = signal('view', { ...(ngDevMode ? { debugName: "editMode" } : {}) });
-    uuid = input.required({ ...(ngDevMode ? { debugName: "uuid" } : {}) });
-    config = input.required({ ...(ngDevMode ? { debugName: "config" } : {}) });
-    relatedData = input({}, { ...(ngDevMode ? { debugName: "relatedData" } : {}) });
-    compoundResourceView = input(false, { ...(ngDevMode ? { debugName: "compoundResourceView" } : {}) });
-    isDirty = signal(false, { ...(ngDevMode ? { debugName: "isDirty" } : {}) });
-    displayFormInvalidMessage = signal(false, { ...(ngDevMode ? { debugName: "displayFormInvalidMessage" } : {}) });
+    editMode = signal('view', ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    uuid = input.required(...(ngDevMode ? [{ debugName: "uuid" }] : []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    relatedData = input({}, ...(ngDevMode ? [{ debugName: "relatedData" }] : []));
+    compoundResourceView = input(false, ...(ngDevMode ? [{ debugName: "compoundResourceView" }] : []));
+    isDirty = signal(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
+    displayFormInvalidMessage = signal(false, ...(ngDevMode ? [{ debugName: "displayFormInvalidMessage" }] : []));
     deleted = output();
-    navAfterDelete = input(true, { ...(ngDevMode ? { debugName: "navAfterDelete" } : {}) });
-    showCreateForm = model(false, { ...(ngDevMode ? { debugName: "showCreateForm" } : {}) });
+    navAfterDelete = input(true, ...(ngDevMode ? [{ debugName: "navAfterDelete" }] : []));
+    showCreateForm = model(false, ...(ngDevMode ? [{ debugName: "showCreateForm" }] : []));
     createConfig = computed(() => {
         if (Object.keys(this.config().createConfig || {}).length > 0) {
             return this.config().createConfig;
         }
         return this.config();
-    }, { ...(ngDevMode ? { debugName: "createConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "createConfig" }] : []));
     rootConfig = computed(() => {
         return this.activatedRoute.snapshot.data['config'];
-    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
     showCloseButton = computed(() => {
         const config = this.config();
         const showBackButton = config.showBackButton ?? true;
@@ -2529,7 +2535,7 @@ class ResourceViewComponent {
             return showBackButton && config.primaryResource === this.rootConfig().parentConfig.primaryResource;
         }
         return showBackButton;
-    }, { ...(ngDevMode ? { debugName: "showCloseButton" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
     commonButtonConfig = computed(() => {
         const config = this.config();
         if (config === undefined) {
@@ -2543,7 +2549,7 @@ class ResourceViewComponent {
             resourceData: this.relatedData(),
             config,
         };
-    }, { ...(ngDevMode ? { debugName: "commonButtonConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "commonButtonConfig" }] : []));
     editButtonContext = computed(() => {
         const commonConfig = this.commonButtonConfig();
         if (commonConfig === undefined) {
@@ -2555,7 +2561,7 @@ class ResourceViewComponent {
             resourceData: commonConfig.resourceData,
             shouldRender: commonConfig.config.shouldRenderActions.edit,
         };
-    }, { ...(ngDevMode ? { debugName: "editButtonContext" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "editButtonContext" }] : []));
     deleteButtonContext = computed(() => {
         const commonConfig = this.commonButtonConfig();
         if (commonConfig === undefined) {
@@ -2567,7 +2573,7 @@ class ResourceViewComponent {
             resourceData: commonConfig.resourceData,
             shouldRender: (data) => commonConfig.config.shouldRenderActions.delete(data),
         };
-    }, { ...(ngDevMode ? { debugName: "deleteButtonContext" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "deleteButtonContext" }] : []));
     inlineRpcConfigs = computed(() => {
         const config = this.config();
         if (config === undefined) {
@@ -2584,7 +2590,7 @@ class ResourceViewComponent {
                 },
             };
         });
-    }, { ...(ngDevMode ? { debugName: "inlineRpcConfigs" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "inlineRpcConfigs" }] : []));
     endRpcConfigs = computed(() => {
         const config = this.config();
         if (config === undefined) {
@@ -2601,7 +2607,7 @@ class ResourceViewComponent {
                 },
             };
         });
-    }, { ...(ngDevMode ? { debugName: "endRpcConfigs" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "endRpcConfigs" }] : []));
     useExpansionPanel = computed(() => {
         const config = this.config();
         // TODO: Investigate why we're doing this check, it's weird because viewType is not part of the input configs
@@ -2609,12 +2615,12 @@ class ResourceViewComponent {
             return false;
         }
         return config.collapsible || !this.compoundResourceView();
-    }, { ...(ngDevMode ? { debugName: "useExpansionPanel" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "useExpansionPanel" }] : []));
     resourceConfigRouteSnapshot = computed(() => {
         return (this.config() ||
             this.activatedRoute.snapshot.data['config']?.parentConfig ||
             {});
-    }, { ...(ngDevMode ? { debugName: "resourceConfigRouteSnapshot" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "resourceConfigRouteSnapshot" }] : []));
     emptyFormGroup = new FormGroup({});
     form = computed(() => {
         const meta = this.store.resourceMeta();
@@ -2653,14 +2659,14 @@ class ResourceViewComponent {
         }
         this.pristineFormValues = pristineValues;
         return fg;
-    }, { ...(ngDevMode ? { debugName: "form" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
     pristineFormValues = {};
     route = computed(() => {
         const meta = this.store.resourceMeta();
         if (!meta)
             return '';
         return meta.consolidatedRoute || meta.route;
-    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "route" }] : []));
     primaryKeys = computed(() => {
         const meta = this.store.resourceMeta();
         if (!meta)
@@ -2668,7 +2674,7 @@ class ResourceViewComponent {
         return meta.fields
             .filter((field) => field.primaryKey)
             .sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
-    }, { ...(ngDevMode ? { debugName: "primaryKeys" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryKeys" }] : []));
     primaryKeyPath = computed(() => {
         const meta = this.store.resourceMeta();
         const isConsolidated = !!meta.consolidatedRoute;
@@ -2681,7 +2687,7 @@ class ResourceViewComponent {
             this.primaryKeys()
                 .map((field) => this.store.viewData()[field.fieldName])
                 .join('/'));
-    }, { ...(ngDevMode ? { debugName: "primaryKeyPath" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryKeyPath" }] : []));
     ngOnInit() {
         if (this.resourceMeta(this.config().primaryResource)) {
             this.store.resourceName.set(this.config().primaryResource);
@@ -2819,10 +2825,10 @@ class ResourceViewComponent {
         this.showCreateForm.set(false);
         this.store.buildStoreViewData();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceViewComponent, isStandalone: true, selector: "ccc-resource-view", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceView: { classPropertyName: "compoundResourceView", publicName: "compoundResourceView", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null }, showCreateForm: { classPropertyName: "showCreateForm", publicName: "showCreateForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", showCreateForm: "showCreateFormChange" }, providers: [ResourceStore], ngImport: i0, template: "@if (useExpansionPanel()) {\n  <div class=\"resource-view\">\n    <mat-expansion-panel [@.disabled]=\"true\" [disabled]=\"!config().collapsible\" [expanded]=\"!config().collapsible\">\n      @if (config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">{{ showCreateForm() ? 'Create' : '' }}{{ config().title }}</h1>\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n      @if (store.viewStatus() === 'resolved') {\n        <div class=\"resource-container\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n          <form [formGroup]=\"form()\">\n            <div class=\"resource row\">\n              @if (showCreateForm()) {\n                <ccc-resource-create\n                  [resourceConfig]=\"createConfig()\"\n                  [parentData]=\"relatedData()\"\n                  (complete)=\"createResource()\">\n                </ccc-resource-create>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n              }\n            </div>\n          </form>\n          <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n        </div>\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <div class=\"page-container\">\n    @if (!showCreateForm()) {\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n    }\n    @if (store.viewStatus() === 'resolved') {\n      <div class=\"resource-container base-container-bg\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n        <form [formGroup]=\"form()\">\n          <div class=\"resource row\">\n            @if (showCreateForm()) {\n              <ccc-resource-create\n                [resourceConfig]=\"createConfig()\"\n                [parentData]=\"relatedData()\"\n                (complete)=\"createResource()\">\n              </ccc-resource-create>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n            }\n          </div>\n        </form>\n      </div>\n    } @else {\n      <div class=\"resource-container\">\n        <div class=\"resource row empty\"></div>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n  </div>\n}\n\n<ng-template #formSlot>\n  @for (element of config().elements; track element) {\n    @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    } @else {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [pristineValue]=\"pristineFormValues[element.name]\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    }\n  }\n</ng-template>\n\n<ng-template #headerSlot>\n  <div class=\"header-container\">\n    <div class=\"state-buttons\">\n      @if (store.viewStatus() === 'resolved') {\n        @for (rpc of inlineRpcConfigs(); track rpc.context) {\n          <action-access-control-wrapper [actionContext]=\"rpc.context\">\n            <ccc-rpc-button\n              [rpcConfig]=\"rpc.config\"\n              [relatedData]=\"relatedData()\"\n              [primaryResource]=\"config().primaryResource\">\n            </ccc-rpc-button>\n          </action-access-control-wrapper>\n        }\n        @if (editMode() === 'view') {\n          <action-access-control-wrapper [actionContext]=\"editButtonContext()\">\n            <div class=\"edit-button\">\n              <button mat-raised-button color=\"accent\" (click)=\"setEditMode('edit')\">\n                <div class=\"button-text\">\n                  <mat-icon>edit</mat-icon>\n                  <span class=\"mode-text\"> Edit </span>\n                </div>\n              </button>\n            </div>\n          </action-access-control-wrapper>\n\n          <action-access-control-wrapper [actionContext]=\"deleteButtonContext()\">\n            <button mat-raised-button color=\"primary\" (click)=\"confirmDeleteResource()\">Delete</button>\n          </action-access-control-wrapper>\n        }\n\n        @if (editMode() === 'edit') {\n          @if (form().dirty) {\n            <div class=\"unsaved message\">You have unsaved changes!</div>\n          }\n          @if (!form().valid && displayFormInvalidMessage()) {\n            <div class=\"invalid message\">Please complete or fix required fields.</div>\n          }\n          <button mat-raised-button color=\"primary\" (click)=\"resetForm()\">Cancel</button>\n          <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Save</button>\n        }\n\n        @if (showCloseButton()) {\n          <div class=\"close-button\">\n            <button mat-icon-button color=\"warn\" (click)=\"location.back()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerSlot>\n  @for (rpc of endRpcConfigs(); track rpc) {\n    <action-access-control-wrapper [actionContext]=\"rpc.context\">\n      <ccc-rpc-button\n        [rpcConfig]=\"rpc.config\"\n        [relatedData]=\"relatedData()\"\n        [primaryResource]=\"config().primaryResource\">\n      </ccc-rpc-button>\n    </action-access-control-wrapper>\n  }\n</ng-template>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.padding{width:100px}.page-container{position:relative}.header-container{display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px;min-height:36px}.action-button,.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}.margin-top{margin-top:50px}.resource-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.no-title-exp-panel-padding{padding:10px}.base-container-bg{background-color:var(--app-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceViewComponent, isStandalone: true, selector: "ccc-resource-view", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceView: { classPropertyName: "compoundResourceView", publicName: "compoundResourceView", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null }, showCreateForm: { classPropertyName: "showCreateForm", publicName: "showCreateForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", showCreateForm: "showCreateFormChange" }, providers: [ResourceStore], ngImport: i0, template: "@if (useExpansionPanel()) {\n  <div class=\"resource-view\">\n    <mat-expansion-panel [@.disabled]=\"true\" [disabled]=\"!config().collapsible\" [expanded]=\"!config().collapsible\">\n      @if (config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">{{ showCreateForm() ? 'Create' : '' }}{{ config().title }}</h1>\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n      @if (store.viewStatus() === 'resolved') {\n        <div class=\"resource-container\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n          <form [formGroup]=\"form()\">\n            <div class=\"resource row\">\n              @if (showCreateForm()) {\n                <ccc-resource-create\n                  [resourceConfig]=\"createConfig()\"\n                  [parentData]=\"relatedData()\"\n                  (complete)=\"createResource()\">\n                </ccc-resource-create>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n              }\n            </div>\n          </form>\n          <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n        </div>\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <div class=\"page-container\">\n    @if (!showCreateForm()) {\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n    }\n    @if (store.viewStatus() === 'resolved') {\n      <div class=\"resource-container base-container-bg\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n        <form [formGroup]=\"form()\">\n          <div class=\"resource row\">\n            @if (showCreateForm()) {\n              <ccc-resource-create\n                [resourceConfig]=\"createConfig()\"\n                [parentData]=\"relatedData()\"\n                (complete)=\"createResource()\">\n              </ccc-resource-create>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n            }\n          </div>\n        </form>\n      </div>\n    } @else {\n      <div class=\"resource-container\">\n        <div class=\"resource row empty\"></div>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n  </div>\n}\n\n<ng-template #formSlot>\n  @for (element of config().elements; track element) {\n    @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    } @else {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [pristineValue]=\"pristineFormValues[element.name]\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    }\n  }\n</ng-template>\n\n<ng-template #headerSlot>\n  <div class=\"header-container\">\n    <div class=\"state-buttons\">\n      @if (store.viewStatus() === 'resolved') {\n        @for (rpc of inlineRpcConfigs(); track rpc.context) {\n          <action-access-control-wrapper [actionContext]=\"rpc.context\">\n            <ccc-rpc-button\n              [rpcConfig]=\"rpc.config\"\n              [relatedData]=\"relatedData()\"\n              [primaryResource]=\"config().primaryResource\">\n            </ccc-rpc-button>\n          </action-access-control-wrapper>\n        }\n        @if (editMode() === 'view') {\n          <action-access-control-wrapper [actionContext]=\"editButtonContext()\">\n            <div class=\"edit-button\">\n              <button mat-raised-button color=\"accent\" (click)=\"setEditMode('edit')\">\n                <div class=\"button-text\">\n                  <mat-icon>edit</mat-icon>\n                  <span class=\"mode-text\"> Edit </span>\n                </div>\n              </button>\n            </div>\n          </action-access-control-wrapper>\n\n          <action-access-control-wrapper [actionContext]=\"deleteButtonContext()\">\n            <button mat-raised-button color=\"primary\" (click)=\"confirmDeleteResource()\">Delete</button>\n          </action-access-control-wrapper>\n        }\n\n        @if (editMode() === 'edit') {\n          @if (form().dirty) {\n            <div class=\"unsaved message\">You have unsaved changes!</div>\n          }\n          @if (!form().valid && displayFormInvalidMessage()) {\n            <div class=\"invalid message\">Please complete or fix required fields.</div>\n          }\n          <button mat-raised-button color=\"primary\" (click)=\"resetForm()\">Cancel</button>\n          <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Save</button>\n        }\n\n        @if (showCloseButton()) {\n          <div class=\"close-button\">\n            <button mat-icon-button color=\"warn\" (click)=\"location.back()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerSlot>\n  @for (rpc of endRpcConfigs(); track rpc) {\n    <action-access-control-wrapper [actionContext]=\"rpc.context\">\n      <ccc-rpc-button\n        [rpcConfig]=\"rpc.config\"\n        [relatedData]=\"relatedData()\"\n        [primaryResource]=\"config().primaryResource\">\n      </ccc-rpc-button>\n    </action-access-control-wrapper>\n  }\n</ng-template>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.padding{width:100px}.page-container{position:relative}.header-container{display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px;min-height:36px}.action-button,.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}.margin-top{margin-top:50px}.resource-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.no-title-exp-panel-padding{padding:10px}.base-container-bg{background-color:var(--app-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccc-resource-view', imports: [
                         FormsModule,
@@ -2852,26 +2858,26 @@ class CompoundResourceComponent {
     /* eslint-disable  @typescript-eslint/no-explicit-any */
     componentRef = CompoundResourceComponent;
     resourceMeta = inject(RESOURCE_META);
-    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
-    isArrayChild = input(false, { ...(ngDevMode ? { debugName: "isArrayChild" } : {}) });
-    uuid = input.required({ ...(ngDevMode ? { debugName: "uuid" } : {}) });
-    parentData = input(undefined, { ...(ngDevMode ? { debugName: "parentData" } : {}) });
-    rootConfig = computed(() => this.route.snapshot.data['config'], { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
-    emptyOneToOne = signal(false, { ...(ngDevMode ? { debugName: "emptyOneToOne" } : {}) });
-    missingRoot = input(false, { ...(ngDevMode ? { debugName: "missingRoot" } : {}) });
+    resourceConfig = input(...(ngDevMode ? [undefined, { debugName: "resourceConfig" }] : []));
+    isArrayChild = input(false, ...(ngDevMode ? [{ debugName: "isArrayChild" }] : []));
+    uuid = input.required(...(ngDevMode ? [{ debugName: "uuid" }] : []));
+    parentData = input(...(ngDevMode ? [undefined, { debugName: "parentData" }] : []));
+    rootConfig = computed(() => this.route.snapshot.data['config'], ...(ngDevMode ? [{ debugName: "rootConfig" }] : []));
+    emptyOneToOne = signal(false, ...(ngDevMode ? [{ debugName: "emptyOneToOne" }] : []));
+    missingRoot = input(false, ...(ngDevMode ? [{ debugName: "missingRoot" }] : []));
     resourceCreate = output();
     deleted = output();
-    navAfterDelete = input(true, { ...(ngDevMode ? { debugName: "navAfterDelete" } : {}) });
+    navAfterDelete = input(true, ...(ngDevMode ? [{ debugName: "navAfterDelete" }] : []));
     navAfterDeleteConsideringRoot = computed(() => {
         const navAfterDeleteInput = this.navAfterDelete();
         if (navAfterDeleteInput === undefined)
             return true;
         return false;
-    }, { ...(ngDevMode ? { debugName: "navAfterDeleteConsideringRoot" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "navAfterDeleteConsideringRoot" }] : []));
     hasElements = computed(() => {
         const config = this.primaryConfig();
         return config && (config.type === 'ListView' || config.type === 'View') && config.elements.length > 0;
-    }, { ...(ngDevMode ? { debugName: "hasElements" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "hasElements" }] : []));
     primaryConfigParentId = computed(() => {
         const config = this.primaryConfig();
         const data = this.resolvedData();
@@ -2882,14 +2888,14 @@ class CompoundResourceComponent {
             }
         }
         return this.uuid();
-    }, { ...(ngDevMode ? { debugName: "primaryConfigParentId" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryConfigParentId" }] : []));
     primaryConfig = computed(() => {
         const config = this.resourceConfig();
         if (config) {
             return config;
         }
         return this.rootConfig().parentConfig;
-    }, { ...(ngDevMode ? { debugName: "primaryConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "primaryConfig" }] : []));
     title = computed(() => {
         if (this.isArrayChild()) {
             return '';
@@ -2899,10 +2905,10 @@ class CompoundResourceComponent {
             return config.title;
         }
         return '';
-    }, { ...(ngDevMode ? { debugName: "title" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
     isRootConfig = computed(() => {
         return this.resourceConfig() === undefined;
-    }, { ...(ngDevMode ? { debugName: "isRootConfig" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "isRootConfig" }] : []));
     configs = computed(() => {
         if (this.hasElements() && this.emptyOneToOne()) {
             return [];
@@ -2915,7 +2921,7 @@ class CompoundResourceComponent {
             return config.relatedConfigs;
         }
         return [];
-    }, { ...(ngDevMode ? { debugName: "configs" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "configs" }] : []));
     rpcConfigs = computed(() => {
         const isRootConfig = this.isRootConfig();
         const rootConfig = this.rootConfig();
@@ -2933,14 +2939,14 @@ class CompoundResourceComponent {
                 resourceData: this.resolvedData(),
             },
         }));
-    }, { ...(ngDevMode ? { debugName: "rpcConfigs" } : {}) });
-    hasRpcConfigs = computed(() => !!this.rpcConfigs() && this.rpcConfigs().length > 0, { ...(ngDevMode ? { debugName: "hasRpcConfigs" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "rpcConfigs" }] : []));
+    hasRpcConfigs = computed(() => !!this.rpcConfigs() && this.rpcConfigs().length > 0, ...(ngDevMode ? [{ debugName: "hasRpcConfigs" }] : []));
     resolvedData = computed(() => {
         if (Object.keys(this.store.viewData()).length > 0) {
             return this.store.viewData();
         }
         return this.parentData() || {};
-    }, { ...(ngDevMode ? { debugName: "resolvedData" } : {}) });
+    }, ...(ngDevMode ? [{ debugName: "resolvedData" }] : []));
     ngOnInit() {
         const resource = this.primaryConfig().primaryResource;
         const meta = this.resourceMeta(resource);
@@ -2968,10 +2974,10 @@ class CompoundResourceComponent {
     goBack() {
         this.location.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CompoundResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: CompoundResourceComponent, isStandalone: true, selector: "compound-resource", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isArrayChild: { classPropertyName: "isArrayChild", publicName: "isArrayChild", isSignal: true, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, missingRoot: { classPropertyName: "missingRoot", publicName: "missingRoot", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourceCreate: "resourceCreate", deleted: "deleted" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n  <div class=\"header-container\">\n    <div class=\"title\" [class.title-without-back]=\"title()\">\n      @if (title() !== '') {\n        <h1>{{ title() }}</h1>\n      }\n    </div>\n  </div>\n\n  @if (hasElements() || configs().length > 0) {\n    <div class=\"resource-container\" [class.empty-elements]=\"!hasElements()\">\n      @let primaryConfigRef = primaryConfig();\n      @if (primaryConfigRef.type === 'View' || primaryConfigRef.type === 'ListView') {\n        <ccc-resource-view\n          [uuid]=\"uuid()\"\n          [config]=\"primaryConfigRef\"\n          [relatedData]=\"resolvedData()\"\n          [showCreateForm]=\"missingRoot()\"\n          [compoundResourceView]=\"true\"\n          [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n          (createChange)=\"resourceCreate.emit()\"\n          (deleted)=\"deleted.emit(true)\">\n        </ccc-resource-view>\n      }\n\n      @for (config of configs(); track config) {\n        @let hasrelatedConfigs = 'relatedConfigs' in config && config.relatedConfigs.length > 0;\n        @if (hasrelatedConfigs) {\n          <compound-resource [uuid]=\"primaryConfigParentId()\" [parentData]=\"resolvedData()\" [resourceConfig]=\"config\">\n          </compound-resource>\n        } @else if (config.type === 'ListView') {\n          <ccc-resource-list-create\n            [resourceConfig]=\"config\"\n            [parentData]=\"resolvedData()\"\n            [isRootList]=\"false\"\n            [parentId]=\"primaryConfigParentId()\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-list-create>\n        } @else if (config.type === 'Array') {\n          <ccc-resource-array-view\n            [resourceConfig]=\"config\"\n            [parentData]=\"store.viewData()\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-array-view>\n        } @else if (config.type === 'View') {\n          @let relatedId = resolvedData()[config.parentRelation.parentKey] || primaryConfigParentId();\n          @if (relatedId) {\n            <ccc-resource-view\n              [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n              [uuid]=\"relatedId + ''\"\n              [config]=\"config\"\n              [relatedData]=\"resolvedData()\"></ccc-resource-view>\n          }\n        } @else if (config.type === 'Component') {\n          <ccc-resource-resolver\n            [parentData]=\"resolvedData()\"\n            [resourceConfig]=\"config\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-resolver>\n        }\n      }\n      @if (hasRpcConfigs()) {\n        <div class=\"rpc-buttons-container\">\n          @for (rpc of rpcConfigs(); track rpc.config.label) {\n            <action-access-control-wrapper [actionContext]=\"rpc.context\">\n              <ccc-rpc-button\n                [rpcConfig]=\"rpc.config\"\n                [relatedData]=\"resolvedData()\"\n                [primaryResource]=\"primaryConfig().primaryResource\">\n              </ccc-rpc-button>\n            </action-access-control-wrapper>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".page-container{position:relative}.header-container{display:flex;flex-direction:row;position:absolute;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.title-without-back{margin-left:48px;height:48px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:32px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.empty-elements{padding-top:30px}.rpc-buttons-container{display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:10px}\n"], dependencies: [{ kind: "component", type: CompoundResourceComponent, selector: "compound-resource", inputs: ["resourceConfig", "isArrayChild", "uuid", "parentData", "missingRoot", "navAfterDelete"], outputs: ["resourceCreate", "deleted"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "component", type: ResourceViewComponent, selector: "ccc-resource-view", inputs: ["uuid", "config", "relatedData", "compoundResourceView", "navAfterDelete", "showCreateForm"], outputs: ["deleted", "showCreateFormChange"] }, { kind: "component", type: ResourceListCreateComponent, selector: "ccc-resource-list-create", inputs: ["compoundResourceComponent", "parentId", "parentData", "searchParams", "resourceConfig", "isRootList"] }, { kind: "component", type: ResourceArrayViewComponent, selector: "ccc-resource-array-view", inputs: ["resourceConfig", "parentData", "compoundResourceComponent"], outputs: ["emptyOneToOne"] }, { kind: "component", type: ResourceResolverComponent, selector: "ccc-resource-resolver", inputs: ["compoundResourceComponent", "resourceConfig", "parentData"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CompoundResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CompoundResourceComponent, isStandalone: true, selector: "compound-resource", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isArrayChild: { classPropertyName: "isArrayChild", publicName: "isArrayChild", isSignal: true, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, missingRoot: { classPropertyName: "missingRoot", publicName: "missingRoot", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourceCreate: "resourceCreate", deleted: "deleted" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n  <div class=\"header-container\">\n    <div class=\"title\" [class.title-without-back]=\"title()\">\n      @if (title() !== '') {\n        <h1>{{ title() }}</h1>\n      }\n    </div>\n  </div>\n\n  @if (hasElements() || configs().length > 0) {\n    <div class=\"resource-container\" [class.empty-elements]=\"!hasElements()\">\n      @let primaryConfigRef = primaryConfig();\n      @if (primaryConfigRef.type === 'View' || primaryConfigRef.type === 'ListView') {\n        <ccc-resource-view\n          [uuid]=\"uuid()\"\n          [config]=\"primaryConfigRef\"\n          [relatedData]=\"resolvedData()\"\n          [showCreateForm]=\"missingRoot()\"\n          [compoundResourceView]=\"true\"\n          [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n          (createChange)=\"resourceCreate.emit()\"\n          (deleted)=\"deleted.emit(true)\">\n        </ccc-resource-view>\n      }\n\n      @for (config of configs(); track config) {\n        @let hasrelatedConfigs = 'relatedConfigs' in config && config.relatedConfigs.length > 0;\n        @if (hasrelatedConfigs) {\n          <compound-resource [uuid]=\"primaryConfigParentId()\" [parentData]=\"resolvedData()\" [resourceConfig]=\"config\">\n          </compound-resource>\n        } @else if (config.type === 'ListView') {\n          <ccc-resource-list-create\n            [resourceConfig]=\"config\"\n            [parentData]=\"resolvedData()\"\n            [isRootList]=\"false\"\n            [parentId]=\"primaryConfigParentId()\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-list-create>\n        } @else if (config.type === 'Array') {\n          <ccc-resource-array-view\n            [resourceConfig]=\"config\"\n            [parentData]=\"store.viewData()\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-array-view>\n        } @else if (config.type === 'View') {\n          @let relatedId = resolvedData()[config.parentRelation.parentKey] || primaryConfigParentId();\n          @if (relatedId) {\n            <ccc-resource-view\n              [navAfterDelete]=\"navAfterDeleteConsideringRoot()\"\n              [uuid]=\"relatedId + ''\"\n              [config]=\"config\"\n              [relatedData]=\"resolvedData()\"></ccc-resource-view>\n          }\n        } @else if (config.type === 'Component') {\n          <ccc-resource-resolver\n            [parentData]=\"resolvedData()\"\n            [resourceConfig]=\"config\"\n            [compoundResourceComponent]=\"componentRef\">\n          </ccc-resource-resolver>\n        }\n      }\n      @if (hasRpcConfigs()) {\n        <div class=\"rpc-buttons-container\">\n          @for (rpc of rpcConfigs(); track rpc.config.label) {\n            <action-access-control-wrapper [actionContext]=\"rpc.context\">\n              <ccc-rpc-button\n                [rpcConfig]=\"rpc.config\"\n                [relatedData]=\"resolvedData()\"\n                [primaryResource]=\"primaryConfig().primaryResource\">\n              </ccc-rpc-button>\n            </action-access-control-wrapper>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".page-container{position:relative}.header-container{display:flex;flex-direction:row;position:absolute;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.title-without-back{margin-left:48px;height:48px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:32px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.empty-elements{padding-top:30px}.rpc-buttons-container{display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:10px}\n"], dependencies: [{ kind: "component", type: CompoundResourceComponent, selector: "compound-resource", inputs: ["resourceConfig", "isArrayChild", "uuid", "parentData", "missingRoot", "navAfterDelete"], outputs: ["resourceCreate", "deleted"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "component", type: ResourceViewComponent, selector: "ccc-resource-view", inputs: ["uuid", "config", "relatedData", "compoundResourceView", "navAfterDelete", "showCreateForm"], outputs: ["deleted", "showCreateFormChange"] }, { kind: "component", type: ResourceListCreateComponent, selector: "ccc-resource-list-create", inputs: ["compoundResourceComponent", "parentId", "parentData", "searchParams", "resourceConfig", "isRootList"] }, { kind: "component", type: ResourceArrayViewComponent, selector: "ccc-resource-array-view", inputs: ["resourceConfig", "parentData", "compoundResourceComponent"], outputs: ["emptyOneToOne"] }, { kind: "component", type: ResourceResolverComponent, selector: "ccc-resource-resolver", inputs: ["compoundResourceComponent", "resourceConfig", "parentData"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CompoundResourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CompoundResourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'compound-resource', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatIconModule,