@cccteam/ccc-lib 0.0.15 → 0.0.16

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

@@ -0,0 +1,3129 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, HostBinding, effect, signal, inject, Injector, untracked, Injectable, Directive, ChangeDetectionStrategy, model, DestroyRef, output, viewChild, runInInjectionContext, ViewContainerRef } from '@angular/core';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/material/dialog';
+import { MatDialogModule, MatDialogActions, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i9 from '@angular/router';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { createResourceValidator, defaultEmptyFieldValue, API_URL, METHOD_META, AlertLevel, RESOURCE_META, validatorsPresent, rpcConfigDefaults } from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+import { tap, of, firstValueFrom, filter } from 'rxjs';
+import * as i3 from '@angular/forms';
+import { Validators, FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { isDate, isValid, format, parseISO } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { isNumber, camelCase } from 'lodash-es';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$1 from '@angular/common';
+import { NgTemplateOutlet, NgComponentOutlet, Location, CommonModule } from '@angular/common';
+import * as i2$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AuthService } from '@cccteam/ccc-lib/src/auth-service';
+import * as i10 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i3$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$3 from '@angular/material/expansion';
+import { MatExpansionPanel, MatExpansionModule, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { CamelCaseToTitlePipe } from '@cccteam/ccc-lib/src/ccc-camel-case-to-title';
+import { cleanStringForm, sparseFormData } from '@cccteam/ccc-lib/src/forms';
+import { AppGridComponent } from '@cccteam/ccc-lib/src/ccc-grid';
+
+class ActionAccessControlWrapperComponent {
+    actionContext = input(undefined, { ...(ngDevMode ? { debugName: "actionContext" } : {}) });
+    showAction = computed(() => {
+        const context = this.actionContext();
+        let isActionPermittedForUser = true;
+        if (context === undefined) {
+            return true;
+        }
+        const actionType = context.actionType;
+        if (actionType === 'rpc') {
+            //TODO: When ABAC permissions is completed, update this logic
+            isActionPermittedForUser = true;
+        }
+        if (actionType === 'create') {
+            isActionPermittedForUser = !context.meta.createDisabled;
+        }
+        if (actionType === 'edit') {
+            isActionPermittedForUser = !context.meta.updateDisabled;
+        }
+        if (actionType === 'delete') {
+            isActionPermittedForUser = !context.meta.deleteDisabled;
+        }
+        if (!isActionPermittedForUser) {
+            console.debug('ACCESS CONTROL | ', actionType, ' action not permitted for user in context: ', context);
+            return false;
+        }
+        let showAction = true;
+        try {
+            showAction = context.shouldRender(context.resourceData);
+        }
+        catch (e) {
+            console.error('Failed to calculate value for should Render function for action: ', actionType);
+            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()) {
+    <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: [{
+            type: Component,
+            args: [{ selector: 'action-access-control-wrapper', template: `@if (showAction()) {
+    <ng-content />
+  }`, styles: [":host{margin-top:auto;margin-bottom:auto}\n"] }]
+        }], propDecorators: { actionContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionContext", required: false }] }] } });
+
+const maxConfigElementRecursionDepth = 240;
+const maxLayoutNestingDepth = 48;
+/** Returns a flat array of nested elements by recursively traversing
+ * through the elements graph */
+const flattenElements = (elements, depth = 0) => {
+    depth++;
+    if (!elements || elements.length === 0 || depth > maxConfigElementRecursionDepth) {
+        return [];
+    }
+    return elements.reduce((acc, element) => {
+        if (element.type === 'section') {
+            return acc.concat(element, flattenElements(element.children, depth));
+        }
+        return acc.concat(element);
+    }, []);
+};
+const civildateCoercion = (value) => {
+    if (value === undefined || value === '') {
+        return new Date(value);
+    }
+    return new Date(formatInTimeZone(new Date(value), 'UTC', 'yyyy-MM-dd HH:mm:ss'));
+};
+const currentOrFutureDateValidator = (control) => {
+    if (!control.value) {
+        return null; // Let "REQUIRED" validator handle empty values
+    }
+    if (!isDate(control.value)) {
+        return { errorMsg: 'Value must be a valid date' };
+    }
+    const selectedDate = new Date(control.value);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    if (selectedDate >= today) {
+        return null;
+    }
+    return { errorMsg: 'Past date not allowed' };
+};
+const positiveNumberValidator = (control) => {
+    if (!control.value && control.value !== 0) {
+        return null; // Let "REQUIRED" validator handle "empty" values
+    }
+    if (isNumber(control.value) && control.value > 0) {
+        return null;
+    }
+    return { errorMsg: 'Value must be a positive number' };
+};
+const notFutureDateValidator = (control) => {
+    if (!control.value) {
+        return null; // Let "REQUIRED" validator handle empty values
+    }
+    if (!isDate(control.value)) {
+        return { errorMsg: 'Value must be a valid date' };
+    }
+    const selectedDate = new Date(control.value);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    if (selectedDate <= today) {
+        return null;
+    }
+    return { errorMsg: 'Future date not allowed' };
+};
+const valueInRangeInclusive = (min, max) => {
+    return (control) => {
+        if (!control.value && control.value !== 0) {
+            return null; // Let "REQUIRED" validator handle "empty" values
+        }
+        if (isNumber(control.value) && control.value >= min && control.value <= max) {
+            return null;
+        }
+        return { errorMsg: `Value must be in the range [${min}, ${max}]` };
+    };
+};
+/**
+ * This object stores every possible validator used across the application
+ * Add all validators that are used in configs to this object
+ *
+ * Available validators that may be added: min, max, required, requiredTrue,
+ *    email, minLength, maxLength, pattern, nullValidator
+ */
+const resourceValidators = Object.freeze({
+    REQUIRED: createResourceValidator(Validators.required),
+    EMAIL: createResourceValidator(Validators.email),
+    CURRENT_OR_FUTURE_DATE: createResourceValidator(currentOrFutureDateValidator),
+    POSITIVE_NUMBER: createResourceValidator(positiveNumberValidator),
+    NOT_FUTURE_DATE: createResourceValidator(notFutureDateValidator),
+    VALUE_IN_RANGE_INCLUSIVE: (min, max) => createResourceValidator(valueInRangeInclusive(min, max)),
+    MAX_LENGTH: (maxLength) => createResourceValidator(Validators.maxLength(maxLength)),
+    // Add any additional validators here. They may be defined in
+    // a different file if they are too large. E.g.:
+    // MIN_LENGTH_3: createResourceValidator(Validators.minLength(3)),
+});
+
+class PaddingElementComponent {
+    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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ComputedFieldComponent {
+    fieldConfig = input.required({ ...(ngDevMode ? { debugName: "fieldConfig" } : {}) });
+    fieldClass = input(undefined, { ...(ngDevMode ? { debugName: "fieldClass" } : {}) });
+    formDataState = input(undefined, { ...(ngDevMode ? { debugName: "formDataState" } : {}) });
+    computedValue = computed(() => {
+        try {
+            return this.fieldConfig().calculatedValue(this.formDataState());
+        }
+        catch (e) {
+            console.error('Failed to calculate value for computed field: ', this.fieldConfig().label);
+            console.error(e);
+            return '';
+        }
+    }, { ...(ngDevMode ? { debugName: "computedValue" } : {}) });
+    showField = computed(() => {
+        const shouldRender = this.fieldConfig().shouldRender;
+        if (typeof shouldRender === 'boolean') {
+            return shouldRender;
+        }
+        try {
+            return shouldRender(this.formDataState());
+        }
+        catch (e) {
+            console.error('Failed to calculate value for should Render function for field: ', this.fieldConfig().label);
+            console.error(e);
+            return true;
+        }
+    }, { ...(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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EmptyReadonlyFieldComponent {
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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" } : {}) });
+    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" } : {}) });
+    listData = computed(() => {
+        const ref = this.resourceListRef();
+        if (ref && ref.status() === 'resolved') {
+            return ref.value();
+        }
+        return [];
+    }, { ...(ngDevMode ? { debugName: "listData" } : {}) });
+    listStatus = computed(() => {
+        return this.resourceListRef()?.status();
+    }, { ...(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" } : {}) });
+    viewStatus = computed(() => {
+        return this.resourceViewRef()?.status();
+    }, { ...(ngDevMode ? { debugName: "viewStatus" } : {}) });
+    overrideRoute = signal('', { ...(ngDevMode ? { debugName: "overrideRoute" } : {}) });
+    resourceRoute = computed(() => this.resourceMeta()?.route, { ...(ngDevMode ? { debugName: "resourceRoute" } : {}) });
+    route = computed(() => {
+        if (this.overrideRoute()) {
+            return this.overrideRoute();
+        }
+        const route = this.resourceRoute();
+        if (route) {
+            return route;
+        }
+        return '';
+    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    reloadViewData() {
+        this.resourceViewRef()?.reload();
+    }
+    reloadListData() {
+        this.resourceListRef()?.reload();
+    }
+    buildStoreListData() {
+        const route = this.route();
+        const name = this.resourceName();
+        if (!route || name === '') {
+            return;
+        }
+        const columnIds = this.listColumns().flatMap((col) => {
+            return [col.id];
+        });
+        const resourceMeta = this.resourceMeta();
+        if (resourceMeta && resourceMeta.fields.some((field) => field.fieldName === 'id')) {
+            columnIds.push('id');
+        }
+        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();
+    }
+    buildStoreViewData() {
+        const route = this.route();
+        const uuid = this.uuid();
+        if (!route || !uuid || uuid === 'undefined') {
+            return;
+        }
+        const ref = this.resourceView(this.route, this.uuid);
+        this.resourceViewRef.set(ref);
+        this.reloadListData();
+    }
+    routes = {
+        resources: (rootUrl, resources) => `${rootUrl}/${resources}`,
+        resource: (rootUrl, resources, uuid) => `${rootUrl}/${resources}/${uuid}`,
+        method: (rootUrl, method) => `${rootUrl}/${method}`,
+    };
+    makePatches(operations, route, resource) {
+        return this.patchMultiple(String(route), operations).pipe(tap(() => {
+            this.notifications.addGlobalNotification({
+                message: `${resource} updated successfully`,
+                level: AlertLevel.SUCCESS,
+                duration: 5000,
+                link: '',
+            });
+        }));
+    }
+    createPatch(operation, route, resource) {
+        return this.patchMultiple(String(route), [operation]).pipe(tap(() => {
+            this.notifications.addGlobalNotification({
+                message: `${resource} created successfully`,
+                level: AlertLevel.SUCCESS,
+                duration: 5000,
+                link: '',
+            });
+        }));
+    }
+    patchMultiple(resourceRoute, data) {
+        return this.http.patch(this.routes.resources(this.apiUrl, resourceRoute), data);
+    }
+    resourceView(route, uuid) {
+        return untracked(() => rxResource({
+            injector: this.injector,
+            params: () => ({
+                route: route,
+                uuid: uuid,
+            }),
+            stream: ({ params }) => {
+                if (!params.route() || !params.uuid() || params.uuid() === 'undefined')
+                    return of({});
+                return this.http.get(this.routes.resource(this.apiUrl, String(params.route()), params.uuid() || ''));
+            },
+        }));
+    }
+    resourceList(route, filter = signal(''), columns = signal([]), disableCacheForFilterPii = signal(false), searchTokens = signal(''), sorts = signal([]), defaultEmpty = false) {
+        return untracked(() => {
+            return rxResource({
+                defaultValue: [],
+                injector: this.injector,
+                params: () => ({
+                    route: route(),
+                    filter: filter(),
+                    columns: columns(),
+                    searchTokens: searchTokens(),
+                    sorts: sorts(),
+                }),
+                stream: ({ params }) => {
+                    if (!params.route)
+                        return of([]);
+                    if (defaultEmpty && (!params.searchTokens || params.searchTokens.trim() === '')) {
+                        return of([]);
+                    }
+                    return this.list(String(params.route), params.filter, disableCacheForFilterPii(), params.columns, params.searchTokens, params.sorts);
+                },
+            });
+        });
+    }
+    list(resourceRoute, filter, disableCacheForFilterPii, columns, searchTokens, sort) {
+        const paramsObj = {};
+        if (filter && filter.trim() !== '')
+            paramsObj['filter'] = filter;
+        if (columns && columns.length > 0)
+            paramsObj['columns'] = columns.join(',');
+        if (searchTokens && searchTokens.trim() !== '')
+            paramsObj['SearchTokens'] = searchTokens;
+        if (sort && sort.length > 0) {
+            paramsObj['sort'] = sort.map((s) => `${s.field}:${s.direction}`).join(',');
+        }
+        const params = new HttpParams({ fromObject: paramsObj });
+        if (disableCacheForFilterPii) {
+            const paramsObjWithoutFilter = { ...paramsObj };
+            delete paramsObjWithoutFilter['filter'];
+            return this.http.post(this.routes.resources(this.apiUrl, resourceRoute), { filter: filter }, paramsObjWithoutFilter);
+        }
+        return this.http.get(this.routes.resources(this.apiUrl, resourceRoute), { params });
+    }
+    rpcCall(rpcConfig, body) {
+        const methodData = this.methodMeta(rpcConfig.method);
+        if (!methodData) {
+            console.error('Method not found in methodMap:', rpcConfig.method);
+            return of({});
+        }
+        return this.http.post(this.routes.method(this.apiUrl, methodData.route), body).pipe(tap(() => {
+            this.notifications.addGlobalNotification({
+                message: rpcConfig.successMessage ? rpcConfig.successMessage : `${rpcConfig.method} called successfully`,
+                level: AlertLevel.SUCCESS,
+                duration: 5000,
+                link: '',
+            });
+            if (rpcConfig.afterMethodRedirect) {
+                if (typeof rpcConfig.afterMethodRedirect === 'string') {
+                    this.router.navigate([rpcConfig.afterMethodRedirect]);
+                }
+                else {
+                    this.router.navigate(rpcConfig.afterMethodRedirect);
+                }
+            }
+        }));
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceStore, decorators: [{
+            type: Injectable
+        }] });
+
+class FormStateService {
+    dirtyForms = signal(0, { ...(ngDevMode ? { debugName: "dirtyForms" } : {}) });
+    incrementDirtyForms() {
+        this.dirtyForms.set(this.dirtyForms() + 1);
+    }
+    decrementDirtyForms() {
+        this.dirtyForms.set(this.dirtyForms() - 1);
+    }
+    resetDirtyForms() {
+        this.dirtyForms.set(0);
+    }
+    isDirty = computed(() => {
+        return this.dirtyForms() > 0;
+    }, { ...(ngDevMode ? { debugName: "isDirty" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LeavePageConfirmationModalComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: LeavePageConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: LeavePageConfirmationModalComponent, isStandalone: true, selector: "ccc-leave-page-confirmation-modal", ngImport: i0, template: "<div mat-dialog-title>You have unsaved changes, are you sure you want to leave?</div>\n<mat-dialog-content>\n  <p>Any unsaved changes will be lost.</p>\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]=\"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: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: LeavePageConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccc-leave-page-confirmation-modal', imports: [MatDialogModule, MatFormFieldModule, MatDialogActions, MatButtonModule], template: "<div mat-dialog-title>You have unsaved changes, are you sure you want to leave?</div>\n<mat-dialog-content>\n  <p>Any unsaved changes will be lost.</p>\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]=\"true\">Confirm</button>\n</mat-dialog-actions>\n" }]
+        }] });
+
+const canDeactivateGuard = async (_, __, ___, nextState) => {
+    const auth = inject(AuthService);
+    const dialog = inject(MatDialog);
+    const formStateService = inject(FormStateService);
+    if (nextState?.url.includes(auth.loginRoute())) {
+        return true;
+    }
+    if (!formStateService.isDirty()) {
+        return true;
+    }
+    const existingDialog = dialog.openDialogs.find((d) => d.componentInstance instanceof LeavePageConfirmationModalComponent);
+    const dialogRef = existingDialog ?? dialog.open(LeavePageConfirmationModalComponent, { delayFocusTrap: false });
+    const result = dialogRef.afterClosed().pipe(tap((value) => {
+        if (value === true) {
+            formStateService.resetDirtyForms();
+        }
+    }));
+    return firstValueFrom(result);
+};
+
+const generatedNavItems = [];
+const generatedNavGroups = [];
+const createFormGroup = (meta, resourceData, config, formDataState) => {
+    const fg = new FormGroup({});
+    const pristineValues = {};
+    const allElements = flattenElements(config.elements);
+    for (const field of meta.fields || []) {
+        const isFieldNameRegistered = fg.get(field.fieldName) !== null;
+        if (isFieldNameRegistered) {
+            continue;
+        }
+        const findConfig = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+        const fieldConfig = findConfig;
+        if (!fieldConfig) {
+            continue;
+        }
+        let value = null;
+        const stringValue = resourceData?.[field.fieldName] ? String(resourceData[field.fieldName]) : '';
+        if (field.displayType === 'civildate' && stringValue) {
+            value = civildateCoercion(stringValue);
+        }
+        else if (resourceData[field.fieldName] !== undefined) {
+            value = resourceData[field.fieldName];
+        }
+        const control = new FormControl(value);
+        if (fieldConfig.validators.length > 0) {
+            control.setValidators(fieldConfig.validators);
+        }
+        fg.addControl(field.fieldName, control);
+        pristineValues[field.fieldName] = value;
+    }
+    // todo: swap this with a manual subscription where the form data is subscribed to and
+    // is dstroyed once the form is destroyed, similar to gui/src/app/components/Resource/resource-view/resource-view.component.ts
+    // constructor effect
+    console.debug(formDataState);
+    // formDataState && formDataState.set(pristineValues);
+    return {
+        formGroup: fg,
+        pristineFormValues: pristineValues,
+    };
+};
+const resourceRoutes = (config, resourceMeta) => {
+    const meta = resourceMeta(config.parentConfig.primaryResource);
+    if (!meta) {
+        return {};
+    }
+    if (config.nav.group) {
+        if (config.routeData.route) {
+            addToNavItems(config.nav, config.routeData.route);
+        }
+        else {
+            addToNavItems(config.nav, meta.route);
+        }
+    }
+    if (config.routeData.route) {
+        const baseRoute = {
+            path: config.routeData.route,
+            data: { config: config },
+            children: [
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return resourceListCreate_component; }).then((mod) => mod.ResourceListCreateComponent),
+                    canDeactivate: [canDeactivateGuard],
+                },
+            ],
+        };
+        if (config.routeData.hasViewRoute !== false) {
+            baseRoute.children?.push({
+                path: ':uuid',
+                loadComponent: () => Promise.resolve().then(function () { return compoundResource_component; }).then((mod) => mod.CompoundResourceComponent),
+                canDeactivate: [canDeactivateGuard],
+            });
+            return baseRoute;
+        }
+    }
+    return {
+        path: meta.route,
+        data: { config: config },
+        children: [
+            {
+                path: ':uuid',
+                loadComponent: () => Promise.resolve().then(function () { return compoundResource_component; }).then((mod) => mod.CompoundResourceComponent),
+                canDeactivate: [canDeactivateGuard],
+            },
+            {
+                path: '',
+                loadComponent: () => Promise.resolve().then(function () { return resourceListCreate_component; }).then((mod) => mod.ResourceListCreateComponent),
+                canDeactivate: [canDeactivateGuard],
+            },
+        ],
+    };
+};
+function addToNavItems(nav, route) {
+    nav.navItem.route = [route];
+    if (!nav.group) {
+        generatedNavItems.push(nav.navItem);
+        return;
+    }
+    if (!generatedNavGroups.includes(nav.group)) {
+        generatedNavGroups.push(nav.group);
+    }
+    let groupItem = generatedNavItems.find((item) => item.label === nav.group);
+    if (!groupItem) {
+        groupItem = { label: nav.group, children: [] };
+        generatedNavItems.push(groupItem);
+    }
+    groupItem.children = groupItem.children || [];
+    groupItem.children.push(nav.navItem);
+    generatedNavItems.sort((a, b) => (a.label > b.label ? -1 : 1));
+}
+/**
+ * Recursive function to extract nested field names from a config.
+ * @param elements - The elements to extract field names from.
+ * @returns - An array of field names.
+ */
+function extractFieldNames(elements) {
+    const fields = [];
+    for (const element of elements) {
+        if (element.type === 'section') {
+            fields.push(...extractFieldNames(element.children));
+        }
+        else if (element.type === 'field') {
+            fields.push(element.name);
+        }
+    }
+    return fields;
+}
+/**
+ * Checks if a string is a valid UUID (versions 1-5) according to RFC 4122.
+ *
+ * @param str - The string to validate.
+ * @returns `true` if the string is a valid UUID, otherwise `false`.
+ */
+function isUUID(str) {
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    return uuidRegex.test(str);
+}
+function metadataTypeCoercion(record, meta) {
+    if (!meta?.fields)
+        return record;
+    const displayTypeByField = new Map(meta.fields.map((f) => [f.fieldName, f.displayType]));
+    for (const [key, value] of Object.entries(record)) {
+        const displayType = displayTypeByField.get(key);
+        if (displayType === 'civildate' && value && isValid(value)) {
+            const date = value;
+            record[key] = format(date, 'yyyy-MM-dd');
+        }
+    }
+    return record;
+}
+
+/*
+ * Base class for all resource input components.
+ */
+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" } : {}) });
+    /**
+     * Resets the field back to its pristine value.
+     */
+    reset() {
+        const control = this.form().get(this.fieldConfig().name);
+        if (control) {
+            control.setValue(this.pristineValue());
+            control.markAsPristine();
+        }
+    }
+    affixResources = new Map();
+    prefixString = computed(() => {
+        const relatedData = this.relatedData();
+        let builtPrefix = '';
+        this.fieldConfig().prefixes.forEach((prefix) => {
+            if (typeof prefix === 'string') {
+                builtPrefix += prefix;
+            }
+            else if ('resource' in prefix) {
+                if (!relatedData || !relatedData[prefix.id]) {
+                    return;
+                }
+                const id = relatedData[prefix.id];
+                if (typeof id !== 'string' || !id || !isUUID(id)) {
+                    return;
+                }
+                const cacheKey = `${prefix.resource}-${id}`;
+                let resourceRef = this.affixResources.get(cacheKey);
+                if (!resourceRef) {
+                    const prefixResourceMeta = this.resourceMeta(prefix.resource);
+                    resourceRef = this.store.resourceView(signal(prefixResourceMeta.route), signal(id));
+                    this.affixResources.set(cacheKey, resourceRef);
+                }
+                const resource = resourceRef.value();
+                if (resource && prefix.field in resource) {
+                    builtPrefix += resource[String(prefix.field)];
+                }
+            }
+            else if ('field' in prefix) {
+                if (relatedData) {
+                    const fieldValue = relatedData[prefix.field];
+                    builtPrefix += fieldValue ? fieldValue : '';
+                }
+            }
+        });
+        return builtPrefix;
+    }, { ...(ngDevMode ? { debugName: "prefixString" } : {}) });
+    suffixString = computed(() => {
+        const relatedData = this.relatedData();
+        let builtSuffix = '';
+        this.fieldConfig().suffixes.forEach((suffix) => {
+            if (typeof suffix === 'string') {
+                builtSuffix += suffix;
+            }
+            else if ('resource' in suffix) {
+                if (!relatedData || !relatedData[suffix.id]) {
+                    return;
+                }
+                const id = relatedData[suffix.id];
+                if (typeof id !== 'string' || !id || !isUUID(id)) {
+                    return;
+                }
+                const cacheKey = `${suffix.resource}-${id}`;
+                let resourceRef = this.affixResources.get(cacheKey);
+                if (!resourceRef) {
+                    const suffixResourceMeta = this.resourceMeta(suffix.resource);
+                    resourceRef = this.store.resourceView(signal(suffixResourceMeta.route), signal(id));
+                    this.affixResources.set(cacheKey, resourceRef);
+                }
+                const resource = resourceRef.value();
+                if (resource && suffix.field in resource) {
+                    builtSuffix += resource[suffix.field];
+                }
+            }
+            else if ('field' in suffix) {
+                if (relatedData) {
+                    const fieldValue = relatedData[suffix.field];
+                    builtSuffix += fieldValue ? fieldValue : '';
+                }
+            }
+        });
+        return builtSuffix;
+    }, { ...(ngDevMode ? { debugName: "suffixString" } : {}) });
+    floatLabel = computed(() => {
+        if (this.fieldConfig().prefixes.length > 0 || this.fieldConfig().suffixes.length > 0) {
+            return 'always';
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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$2.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: [{
+            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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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" }]
+        }] });
+
+const concatFunctions = {
+    'space-concat': spaceConcat,
+    'hyphen-concat': hyphenConcat,
+    'space-hyphen-concat': spaceHyphenConcat,
+    'hyphen-space-concat': hyphenSpaceConcat,
+};
+/**
+ * Concatenates the strings corresponding to the given keys in the resource,
+ * using a space separator.
+ * @param resource A record mapping keys to string values.
+ * @param args Keys of the resource to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * const resource = { foo: 'foo', bar: 'bar', baz: 'baz' };
+ * spaceConcat(resource, 'foo', 'bar', 'baz'); // returns 'foo bar baz'
+ */
+function spaceConcat(resource, ...args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return resource[args[0] ?? ''] ?? '';
+    return args.map((arg) => resource[arg] ?? '').join(' ');
+}
+/**
+ * Concatenates the strings corresponding to the given keys in the resource,
+ * using a hyphen separator.
+ * @param resource A record mapping keys to string values.
+ * @param args Keys of the resource to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * const resource = { foo: 'foo', bar: 'bar', baz: 'baz' };
+ * hyphenConcat(resource, 'foo', 'bar', 'baz'); // returns 'foo - bar - baz'
+ */
+function hyphenConcat(resource, ...args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return resource[args[0] ?? ''] ?? '';
+    return args.map((arg) => resource[arg] ?? '').join(' - ');
+}
+/**
+ * Concatenates the given strings so that all but the last are joined with a space,
+ * and the last string is appended with a " - " separator.
+ * @param resource A mapping of keys to string values.
+ * @param args Keys of strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcat(resource, 'foo', 'bar', 'baz') => 'foo bar - baz'
+ */
+function spaceHyphenConcat(resource, ...args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return resource[args[0] || ''] || '';
+    const initialPart = args
+        .slice(0, -1)
+        .map((arg) => resource[arg] || '')
+        .join(' ');
+    const lastPart = resource[args[args.length - 1] || ''] || '';
+    return `${initialPart} - ${lastPart}`;
+}
+/**
+ * Concatenates the given strings so that all but the first are joined with a space,
+ * and the first string is appended with a " - " separator.
+ * @param resource A mapping of keys to string values.
+ * @param args Keys of strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcat(resource, 'foo', 'bar', 'baz') => 'foo - bar baz'
+ */
+function hyphenSpaceConcat(resource, ...args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return resource[args[0] || ''] || '';
+    const initialPart = args[0] !== undefined ? resource[args[0]] || '' : '';
+    const lastPart = args
+        .slice(1, args.length)
+        .map((arg) => resource[arg] || '')
+        .join(' ');
+    return `${initialPart} - ${lastPart}`;
+}
+/**
+ * Concatenates the strings using a space separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * spaceConcatWithoutResource(['foo', 'bar', 'baz']); // returns 'foo bar baz'
+ */
+function spaceConcatWithoutResource(args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return args[0] ?? '';
+    return args.map((arg) => arg ?? '').join(' ');
+}
+/**
+ * Concatenates the strings using a hyphen separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * hyphenConcatWithoutResource(['foo', 'bar', 'baz']); // returns 'foo - bar - baz'
+ */
+function hyphenConcatWithoutResource(args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return args[0] || '';
+    return args.join(' - ');
+}
+/**
+ * Concatenates the given strings so that all but the last are joined with a space,
+ * and the last string is appended with a " - " separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcatWithoutResource(['foo', 'bar', 'baz']) => 'foo bar - baz'
+ */
+function spaceHyphenConcatWithoutResource(args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return args[0] || '';
+    const initialPart = args
+        .slice(0, -1)
+        .map((arg) => arg || '')
+        .join(' ');
+    const lastPart = args[args.length - 1] || '';
+    return `${initialPart} - ${lastPart}`;
+}
+/**
+ * Concatenates the given strings so that all but the first are joined with a space,
+ * and the first string is appended with a " - " separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example hyphenSpaceConcatWithoutResource(['foo', 'bar', 'baz']) => 'foo - bar baz'
+ */
+function hyphenSpaceConcatWithoutResource(args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return args[0] || '';
+    const initialPart = args[0] || '';
+    const lastPart = args
+        .slice(1, args.length)
+        .map((arg) => arg || '')
+        .join(' ');
+    return `${initialPart} - ${lastPart}`;
+}
+/**
+ * Concatenates the given strings without any space,
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example noSpaceConcatWithoutResource(['foo', 'bar', 'baz']) => 'foobarbaz'
+ */
+function noSpaceConcatWithoutResource(args) {
+    if (args.length === 0)
+        return '';
+    if (args.length === 1)
+        return args[0] || '';
+    return args.join('');
+}
+
+class EnumeratedFieldComponent extends BaseInputComponent {
+    activatedRoute = inject(ActivatedRoute);
+    router = inject(Router);
+    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" } : {}) });
+    tooltipMessage = computed(() => {
+        const label = this.fieldConfig().label;
+        return 'View ' + label + ' details';
+    }, { ...(ngDevMode ? { debugName: "tooltipMessage" } : {}) });
+    route = computed(() => {
+        const resource = this.fieldMeta()?.enumeratedResource;
+        return this.resourceMeta(resource)?.route;
+    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    viewDetails = computed(() => {
+        return this.editMode() === 'view' && this.fieldConfig().enumeratedConfig.viewDetails === true;
+    }, { ...(ngDevMode ? { debugName: "viewDetails" } : {}) });
+    sorts = computed(() => {
+        return this.fieldConfig().enumeratedConfig.sorts;
+    }, { ...(ngDevMode ? { debugName: "sorts" } : {}) });
+    singleEnumResourceRef = computed(() => {
+        this.editMode();
+        if (this.showField() === false) {
+            return undefined;
+        }
+        const route = this.route();
+        const resource = this.resource();
+        this.reloadSignal();
+        const fieldValue = this.form().get(this.fieldConfig().name)?.value;
+        if (fieldValue && route && resource) {
+            return untracked(() => this.store.resourceView(this.route, signal(fieldValue)));
+        }
+        return undefined;
+    }, { ...(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" } : {}) });
+    enumResourceRef = computed(() => {
+        if (this.showField() === false)
+            return undefined;
+        const enumeratedMeta = this.resourceMeta(this.resource());
+        const config = this.fieldConfig().enumeratedConfig;
+        const filter = config.filterType === 'rootResource'
+            ? 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" } : {}) });
+    singleEnumDisplayText = computed(() => {
+        const showField = this.showField();
+        if (showField === false) {
+            return undefined;
+        }
+        const form = this.form();
+        const fieldConfig = this.fieldConfig();
+        const singleEnumResourceRef = this.singleEnumResourceRef();
+        if (form === undefined || fieldConfig === undefined || singleEnumResourceRef === undefined) {
+            return defaultEmptyFieldValue;
+        }
+        const record = singleEnumResourceRef.value();
+        if (record === undefined) {
+            return defaultEmptyFieldValue;
+        }
+        const enumeratedValues = this.toEnumerated(record, fieldConfig);
+        return enumeratedValues.display;
+    }, { ...(ngDevMode ? { debugName: "singleEnumDisplayText" } : {}) });
+    hasRequiredValidator = computed(() => {
+        const form = this.form();
+        const fieldConfig = this.fieldConfig();
+        if (form === undefined || fieldConfig === undefined) {
+            return false;
+        }
+        const control = form.get(fieldConfig.name);
+        if (!control) {
+            return false;
+        }
+        return control.hasValidator(Validators.required);
+    }, { ...(ngDevMode ? { debugName: "hasRequiredValidator" } : {}) });
+    singleEnumValue = computed(() => {
+        if (this.showField() === false)
+            return undefined;
+        const currentValue = this.form().get(this.fieldConfig().name)?.value;
+        const record = this.singleEnumResourceRef()?.value();
+        if (!currentValue)
+            return [];
+        if (!record)
+            return [];
+        return [this.toEnumerated(record, this.fieldConfig())];
+    }, { ...(ngDevMode ? { debugName: "singleEnumValue" } : {}) });
+    listEnumValues = computed(() => {
+        if (this.showField() === false)
+            return [];
+        const currentValue = this.singleEnumValue();
+        const records = this.enumResourceRef()?.value();
+        if (!records || !records.length)
+            return currentValue || [];
+        return records.map((record) => this.toEnumerated(record, this.fieldConfig()));
+    }, { ...(ngDevMode ? { debugName: "listEnumValues" } : {}) });
+    availableEnumOptions = computed(() => {
+        if (this.editMode() === 'edit') {
+            return this.listEnumValues();
+        }
+        return this.singleEnumValue();
+    }, { ...(ngDevMode ? { debugName: "availableEnumOptions" } : {}) });
+    toEnumerated(resource, element) {
+        const enumeratedConfig = element.enumeratedConfig;
+        const displayFields = this.editMode() === 'edit' && enumeratedConfig.listDisplay.length > 0
+            ? enumeratedConfig.listDisplay
+            : enumeratedConfig.viewDisplay;
+        const concat = this.editMode() === 'edit'
+            ? enumeratedConfig.listConcatFn || enumeratedConfig.viewConcatFn
+            : enumeratedConfig.viewConcatFn;
+        const concatFunction = concatFunctions[concat] || hyphenConcat;
+        return {
+            id: resource['id'] ?? '',
+            display: concatFunction(resource, ...displayFields),
+        };
+    }
+    getDisplayText = (value) => {
+        if (!value)
+            return '';
+        if (typeof value === 'string') {
+            const option = this.availableEnumOptions()?.find((o) => o.id === value);
+            return option ? option['display'] || this.formatDisplay(option) : '';
+        }
+        return value['display'] || this.formatDisplay(value);
+    };
+    formatDisplay(resource) {
+        return this.toEnumerated(resource, this.fieldConfig()).display;
+    }
+    search(value) {
+        this.query.set(value);
+    }
+    select(value) {
+        this.form().patchValue({ [this.fieldConfig().name]: value });
+        this.form().markAsDirty();
+        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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-enumerated-field', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        ReactiveFormsModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        RouterModule,
+                        MatAutocompleteModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }] });
+
+class NullBooleanFieldComponent extends BaseInputComponent {
+    availableEnumOptions = computed(() => {
+        const fieldConfig = this.fieldConfig();
+        if (fieldConfig === undefined) {
+            return;
+        }
+        const valueMap = new Map();
+        Object.values(fieldConfig.nullBooleanConfig.displayValues).forEach((value) => {
+            valueMap.set(value.value, value.label);
+        });
+        return valueMap;
+    }, { ...(ngDevMode ? { debugName: "availableEnumOptions" } : {}) });
+    currentValue = computed(() => {
+        const form = this.form();
+        const fieldConfig = this.fieldConfig();
+        if (form === undefined || fieldConfig === undefined) {
+            return;
+        }
+        return form.get(fieldConfig.name)?.value;
+    }, { ...(ngDevMode ? { debugName: "currentValue" } : {}) });
+    currentDisplayText = computed(() => {
+        const value = this.currentValue();
+        const availableOptions = this.availableEnumOptions();
+        if (availableOptions === undefined || value === undefined) {
+            return;
+        }
+        return availableOptions.get(value);
+    }, { ...(ngDevMode ? { debugName: "currentDisplayText" } : {}) });
+    hasRequiredValidator = computed(() => {
+        const form = this.form();
+        const fieldConfig = this.fieldConfig();
+        if (form === undefined || fieldConfig === undefined) {
+            return false;
+        }
+        const control = form.get(fieldConfig.name);
+        if (control === null) {
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NullBooleanFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccc-nullboolean-field', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        ReactiveFormsModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        RouterModule,
+                        MatAutocompleteModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }] });
+
+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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-text-field', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                    ], 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"] }]
+        }] });
+
+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" } : {}) });
+    previouslyNulled = null;
+    fieldMeta = computed(() => {
+        return (this.meta().fields?.find((field) => field.fieldName === this.fieldConfig().name) ||
+            {});
+    }, { ...(ngDevMode ? { debugName: "fieldMeta" } : {}) });
+    mode = computed(() => {
+        if (this.fieldConfig().readOnly) {
+            return 'view';
+        }
+        return this.editMode();
+    }, { ...(ngDevMode ? { debugName: "mode" } : {}) });
+    showField = computed(() => {
+        const shouldRender = this.fieldConfig().shouldRender;
+        const conditionallyNull = this.fieldConfig().nullIfConditionallyHidden;
+        const isForeignKeyDefault = this.fieldConfig().default?.type === 'foreignKey';
+        if (typeof shouldRender === 'boolean') {
+            return shouldRender && !isForeignKeyDefault;
+        }
+        const formValues = this.formDataState();
+        if (!formValues) {
+            return true;
+        }
+        console.debug('Field: ', this.fieldConfig().name, ' | Values to be used in showField calculation ', formValues);
+        try {
+            const showField = shouldRender(formValues) && !isForeignKeyDefault;
+            if (!conditionallyNull) {
+                return showField;
+            }
+            const formControlName = this.fieldConfig()?.name;
+            const control = this.form()?.controls[formControlName];
+            const pristineFieldValue = this.data()?.[formControlName];
+            const previouslyNulled = this.previouslyNulled;
+            untracked(() => {
+                if (!showField && !previouslyNulled) {
+                    this.previouslyNulled = true;
+                    control?.setValue(null);
+                }
+                if (showField && previouslyNulled) {
+                    this.previouslyNulled = false;
+                    control?.setValue(pristineFieldValue);
+                }
+            });
+            return showField;
+        }
+        catch (e) {
+            console.error('Failed to calculate value for should Render function for field: ', this.fieldConfig().name);
+            console.error(e);
+            return true;
+        }
+    }, { ...(ngDevMode ? { debugName: "showField" } : {}) });
+    showEmptyField = computed(() => {
+        const editMode = this.mode();
+        const showField = this.showField();
+        if (!showField || editMode === 'edit') {
+            return false;
+        }
+        const form = this.form();
+        const config = this.fieldConfig();
+        const meta = this.fieldMeta();
+        if (form === undefined || config === undefined || meta === undefined) {
+            return false;
+        }
+        if (meta.displayType === 'nullboolean') {
+            return false;
+        }
+        const value = form.get(config.name)?.value;
+        if (value === null || value === '') {
+            return true;
+        }
+        return false;
+    }, { ...(ngDevMode ? { debugName: "showEmptyField" } : {}) });
+    class = '';
+    booleanEditDisplayType = computed(() => {
+        const fieldConfig = this.fieldConfig();
+        const fieldMeta = this.fieldMeta();
+        const form = this.form();
+        if (fieldConfig === undefined || fieldMeta === undefined || form === undefined) {
+            return 'boolean';
+        }
+        const control = form.get(fieldConfig.name);
+        if (control === null) {
+            console.warn("Unable to find control for field '" + fieldConfig.name + "' to determine boolean display type");
+            return 'boolean';
+        }
+        // Frontend forcing users to make a choice displays nullboolean to
+        // trigger form validation - users must interact and explicitly
+        // choose a true or false value
+        if (control.hasValidator(Validators.required) || fieldMeta.displayType === 'nullboolean') {
+            return 'nullboolean';
+        }
+        return 'boolean';
+    }, { ...(ngDevMode ? { debugName: "booleanEditDisplayType" } : {}) });
+    previousValidatorCount = 0;
+    constructor() {
+        effect(() => {
+            this.class = this.showField() ? 'col-' + this.fieldConfig()?.cols : 'hidden-field';
+        });
+        effect(() => {
+            const getValidators = this.fieldConfig().validators;
+            if (typeof getValidators !== 'function') {
+                return;
+            }
+            const formValues = this.formDataState();
+            if (!formValues) {
+                return;
+            }
+            console.debug('Field: ', this.fieldConfig().name, ' | Values to be used in validators calculation ', formValues);
+            try {
+                const newValidators = getValidators(formValues);
+                const formControlName = this.fieldConfig().name;
+                const control = this.form().get(formControlName);
+                if (control === null) {
+                    throw new Error(`Control with name ${this.fieldConfig().name} not found during forceRequired calculation`);
+                }
+                const addValidators = !validatorsPresent(control, newValidators, this.previousValidatorCount);
+                if (addValidators) {
+                    control.setValidators(newValidators);
+                    control.updateValueAndValidity();
+                }
+                this.previousValidatorCount = newValidators.length;
+            }
+            catch (e) {
+                console.error('Failed to calculate value for forceRequired function for field: ', this.fieldConfig().name);
+                console.error(e);
+                return;
+            }
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccc-resource-field', imports: [
+                        DateFieldComponent,
+                        BooleanFieldComponent,
+                        TextFieldComponent,
+                        NumberFieldComponent,
+                        EnumeratedFieldComponent,
+                        MatFormFieldModule,
+                        EmptyReadonlyFieldComponent,
+                        NullBooleanFieldComponent,
+                        NgTemplateOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", 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: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], formDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDataState", required: false }] }], pristineValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pristineValue", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+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" } : {}) });
+    maxLayoutNestingDepth = maxLayoutNestingDepth;
+    children = computed(() => {
+        const element = this.element();
+        if (element.type === 'section') {
+            return element.children;
+        }
+        return [];
+    }, { ...(ngDevMode ? { debugName: "children" } : {}) });
+    layoutChildrenConfig = computed(() => {
+        return flattenElements(this.children());
+    }, { ...(ngDevMode ? { debugName: "layoutChildrenConfig" } : {}) });
+    previouslyNulled = false;
+    nullIfConditionallyHidden = computed(() => {
+        const element = this.element();
+        if (element.type === 'field') {
+            return element.nullIfConditionallyHidden;
+        }
+        if (element.type === 'section') {
+            return element.nullAllChildrenIfConditionallyHidden;
+        }
+        return false;
+    }, { ...(ngDevMode ? { debugName: "nullIfConditionallyHidden" } : {}) });
+    showLayout = computed(() => {
+        const element = this.element();
+        const shouldRender = element.shouldRender;
+        const conditionallyNull = this.nullIfConditionallyHidden();
+        const form = this.form();
+        const label = 'label' in element ? element.label : 'padding';
+        const isForeignKeyDefault = element.type === 'field' && element.default?.type === 'foreignKey';
+        if (typeof shouldRender === 'boolean') {
+            return shouldRender && !isForeignKeyDefault;
+        }
+        const formValues = this.formDataState();
+        if (!formValues) {
+            return true;
+        }
+        console.debug('Layout: ', label, ' | Values to be used in showLayout calculation ', formValues);
+        try {
+            const showLayout = shouldRender(formValues) && !isForeignKeyDefault;
+            if (!conditionallyNull) {
+                return showLayout;
+            }
+            const previouslyNulled = this.previouslyNulled;
+            untracked(() => {
+                this.layoutChildrenConfig().forEach((configElement) => {
+                    const isFormControl = configElement.type === 'field';
+                    if (!isFormControl) {
+                        return;
+                    }
+                    const control = form?.controls[configElement.name];
+                    const pristineFieldValue = this.relatedData()?.[configElement.name];
+                    if (!showLayout && !previouslyNulled) {
+                        this.previouslyNulled = true;
+                        control?.setValue(null);
+                    }
+                    if (showLayout && previouslyNulled) {
+                        this.previouslyNulled = false;
+                        control?.setValue(pristineFieldValue);
+                    }
+                });
+            });
+            return showLayout;
+        }
+        catch (e) {
+            console.error('Failed to calculate value for should Render function for layout: ', label);
+            console.error(e);
+            return true;
+        }
+    }, { ...(ngDevMode ? { debugName: "showLayout" } : {}) });
+    class = '';
+    constructor() {
+        // TODO: Remove this effect once Angular supports signals in Reactive forms to obtain changes to form values.
+        // This effect has been necessary because translating from Observables to Signals, specifically via an input signal
+        // doesn't have a clean solution
+        effect((onCleanup) => {
+            const element = this.element();
+            if (element === undefined) {
+                return;
+            }
+            const currentForm = this.form();
+            const shouldRender = element.shouldRender;
+            const nestingDepth = this.layoutNestingDepth();
+            const layoutChildren = this.layoutChildrenConfig();
+            const label = 'label' in element ? element.label : 'padding';
+            if (!this.shouldInitializeFormData(currentForm, nestingDepth, shouldRender, layoutChildren)) {
+                return;
+            }
+            console.debug('USAGE | New subscription for formValuesSignal created for layout: ', label);
+            this.formDataState.set(currentForm.getRawValue());
+            const subscription = currentForm.valueChanges.subscribe((value) => {
+                this.formDataState.set(value);
+            });
+            onCleanup(() => {
+                console.debug('USAGE | Unsubscribing from valueChanges for layout: ', label);
+                subscription.unsubscribe();
+            });
+        });
+    }
+    ngOnInit() {
+        this.class = 'col-' + this.element().cols;
+    }
+    shouldInitializeFormData(form, layoutNestingDepth, shouldRender, layoutChildren) {
+        const childrenNeedFormDataState = layoutChildren.some((config) => {
+            const shouldRenderIsFunction = typeof config.shouldRender === 'function';
+            const isComputedField = config.type === 'computedDisplayField';
+            let validatorsIsFunction = false;
+            const castConfig = config;
+            if (castConfig.validators && typeof castConfig.validators === 'function') {
+                validatorsIsFunction = true;
+            }
+            return shouldRenderIsFunction || isComputedField || validatorsIsFunction;
+        });
+        if (!form || layoutNestingDepth > 1) {
+            return false;
+        }
+        if (!childrenNeedFormDataState && typeof shouldRender !== 'function') {
+            return false;
+        }
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class BaseRPCModalComponent {
+    methodMeta = inject(METHOD_META);
+    dialogRef = inject(MatDialogRef);
+    data = inject(MAT_DIALOG_DATA);
+    formData = signal({}, { ...(ngDevMode ? { debugName: "formData" } : {}) });
+    meta = computed(() => {
+        return this.methodMeta(this.formData().method);
+    }, { ...(ngDevMode ? { debugName: "meta" } : {}) });
+    constructor() {
+        this.formData.set(this.data);
+        if (this.data.width) {
+            this.dialogRef.updateSize(this.data.width);
+        }
+    }
+    onConfirm() {
+        this.dialogRef.close(this.form());
+    }
+    form = computed(() => {
+        const fg = new FormGroup({});
+        this.formData();
+        const meta = this.meta();
+        const allElements = flattenElements(this.data.elements);
+        if (meta) {
+            for (const field of meta.fields || []) {
+                const value = '';
+                const control = new FormControl(value);
+                const findConfig = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+                const fieldConfig = findConfig;
+                if (!fieldConfig) {
+                    continue;
+                }
+                if (fieldConfig.validators.length > 0) {
+                    control.setValidators(fieldConfig.validators);
+                }
+                fg.addControl(field.fieldName, control);
+                this.pristineForm[field.fieldName] = value;
+            }
+        }
+        return fg;
+    }, { ...(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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-base-rpc-modal', imports: [
+                        MatDialogModule,
+                        MatDialogActions,
+                        MatButtonModule,
+                        ResourceLayoutComponent,
+                        FormsModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                    ], providers: [ResourceStore], 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" }]
+        }], ctorParameters: () => [] });
+
+class RpcButtonComponent {
+    activatedRoute = inject(ActivatedRoute);
+    router = inject(Router);
+    notifications = inject(NotificationService);
+    formState = inject(FormStateService);
+    dialog = inject(MatDialog);
+    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" } : {}) });
+    resourceConfigRouteSnapshot = computed(() => {
+        return (this.rpcConfig() ||
+            this.activatedRoute.snapshot.data['config']?.parentConfig ||
+            {});
+    }, { ...(ngDevMode ? { debugName: "resourceConfigRouteSnapshot" } : {}) });
+    showRPCButton = computed(() => {
+        const rpcConfig = this.rpcConfig();
+        if (!rpcConfig) {
+            return false;
+        }
+        let canView = true;
+        for (const condition of rpcConfig.conditions || []) {
+            const filterField = condition.field;
+            const matchValues = condition.matchValues;
+            const parentFieldData = this.relatedData()[filterField ? filterField : ''];
+            for (const matchValue of matchValues) {
+                if (parentFieldData === matchValue) {
+                    canView = true;
+                    break;
+                }
+                canView = false;
+            }
+            if (!canView) {
+                break;
+            }
+        }
+        return canView;
+    }, { ...(ngDevMode ? { debugName: "showRPCButton" } : {}) });
+    submitRPC() {
+        const rpcConfig = this.rpcConfig();
+        if (!rpcConfig) {
+            console.error('RPC config is not defined');
+            return;
+        }
+        const submitBody = {};
+        let dialogRef;
+        if (rpcConfig.customComponent !== rpcConfigDefaults.customComponent) {
+            let componentToOpen;
+            if (!componentToOpen) {
+                console.error('Custom RPC component ' + rpcConfig.customComponent.component + ' not found.');
+                return;
+            }
+            if (!dialogRef) {
+                console.error('Dialog reference is undefined.');
+                return;
+            }
+        }
+        else if (rpcConfig.elements.length > 0) {
+            dialogRef = this.dialog.open(BaseRPCModalComponent, {
+                data: {
+                    label: rpcConfig.label,
+                    elements: rpcConfig.elements,
+                    method: rpcConfig.method,
+                    width: rpcConfig.defaultModalWidth,
+                },
+            });
+        }
+        else {
+            this.buildRpcBody(rpcConfig, submitBody);
+            return;
+        }
+        const meta = this.methodMeta(rpcConfig.method);
+        dialogRef
+            .afterClosed()
+            .pipe(filter((data) => !!data), tap((data) => {
+            const coercedData = metadataTypeCoercion(data, meta);
+            Object.keys(coercedData).forEach((key) => {
+                const value = coercedData[key];
+                if (value) {
+                    submitBody[key] = value;
+                }
+            });
+            this.buildRpcBody(rpcConfig, submitBody);
+        }), tap(() => {
+            this.reloadDependentResources();
+        }))
+            .subscribe();
+    }
+    buildRpcBody(rpcConfig, submitBody) {
+        let canSubmitRPC = true;
+        const method = this.methodMeta(rpcConfig.method);
+        if (method.fields) {
+            method.fields.forEach((methodField) => {
+                const key = methodField.fieldName;
+                if (submitBody[key] === undefined || submitBody[key] === null || submitBody[key] === '') {
+                    if (!method.fields) {
+                        return;
+                    }
+                    const value = rpcConfig.methodBodyTemplate[key];
+                    if (value == undefined) {
+                        return;
+                    }
+                    if (typeof value !== 'string') {
+                        const returnValue = this.relatedData()[value.field];
+                        if (returnValue === undefined) {
+                            this.notifications.addGlobalNotification({
+                                message: 'Value not found for field: ' + value.field,
+                                link: '',
+                                level: AlertLevel.ERROR,
+                            });
+                            canSubmitRPC = false;
+                            return;
+                        }
+                        if (returnValue)
+                            submitBody[key] = returnValue;
+                    }
+                    else {
+                        submitBody[key] = value;
+                    }
+                }
+            });
+        }
+        if (!canSubmitRPC) {
+            return;
+        }
+        this.callRpc(rpcConfig, submitBody);
+    }
+    callRpc(rpc, submitBody) {
+        this.store
+            .rpcCall(rpc, submitBody)
+            .pipe(tap(() => {
+            this.reloadDependentResources();
+        }))
+            .subscribe();
+    }
+    reloadDependentResources() {
+        // TODO: this does not work. We need to invalidate the cache via resource names.
+        for (const ref of this.dependentResources()) {
+            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$1.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: [{
+            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 }] }] } });
+
+class ResourceCreateComponent {
+    resourceMeta = inject(RESOURCE_META);
+    activatedRoute = inject(ActivatedRoute);
+    notifications = inject(NotificationService);
+    store = inject(ResourceStore);
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    formState = inject(FormStateService);
+    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" } : {}) });
+    rootConfig = computed(() => {
+        return this.activatedRoute.snapshot.data['config'];
+    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    config = computed(() => {
+        const inputConfig = this.resourceConfig();
+        if (inputConfig !== undefined) {
+            return inputConfig;
+        }
+        return this.rootConfig().parentConfig;
+    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    indentTitle = computed(() => {
+        if (this.config().collapsible || this.resourceConfig() === undefined) {
+            return false;
+        }
+        return true;
+    }, { ...(ngDevMode ? { debugName: "indentTitle" } : {}) });
+    form = computed(() => {
+        const meta = this.store.resourceMeta();
+        const fg = new FormGroup({});
+        const allElements = flattenElements(this.config().elements);
+        for (const field of meta.fields || []) {
+            if (fg.get(field.fieldName)) {
+                continue;
+            }
+            let control = new FormControl('');
+            if (field.displayType === 'boolean') {
+                control = new FormControl(false);
+            }
+            const findElement = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+            const fieldConfig = findElement;
+            if (!fieldConfig) {
+                continue;
+            }
+            const fieldDefault = fieldConfig.default;
+            if (field.displayType === 'boolean') {
+                const booleanDefaultValue = fieldDefault?.type == 'static' && typeof fieldDefault?.value === 'boolean' ? fieldDefault.value : null;
+                if (booleanDefaultValue === null) {
+                    console.error(`Default value for boolean field, ${field.fieldName}, is null, add a default value to the config`);
+                }
+                control = new FormControl(booleanDefaultValue);
+            }
+            if (fieldDefault?.type === 'foreignKey' && this.parentData()) {
+                const parentValue = this.parentData()[fieldDefault.parentId];
+                if (parentValue !== undefined) {
+                    control.setValue(parentValue);
+                }
+            }
+            else if (fieldDefault?.type == 'static') {
+                const staticDefault = fieldDefault;
+                if (staticDefault.value) {
+                    control.setValue(staticDefault.value);
+                }
+            }
+            control.setValidators([]);
+            if (fieldConfig.validators.length > 0) {
+                control.addValidators(fieldConfig.validators);
+            }
+            if (field.required && !control.hasValidator(Validators.required)) {
+                control.addValidators(Validators.required);
+            }
+            fg.addControl(field.fieldName, control);
+        }
+        return fg;
+    }, { ...(ngDevMode ? { debugName: "form" } : {}) });
+    route = computed(() => {
+        const meta = this.store.resourceMeta();
+        if (!meta)
+            return '';
+        return meta.consolidatedRoute || meta.route;
+    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    primaryKeys = computed(() => {
+        const meta = this.store.resourceMeta();
+        if (!meta)
+            return [];
+        return meta.fields
+            .filter((field) => field.primaryKey)
+            .sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
+    }, { ...(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" } : {}) });
+    primaryKeyPath = computed(() => {
+        const meta = this.store.resourceMeta();
+        const isConsolidated = meta.consolidatedRoute !== undefined;
+        const pathPrefix = isConsolidated ? '/' + meta.route : '';
+        const keyPath = this.primaryKeys()
+            .map((field) => this.form().get(field.fieldName)?.value)
+            .join('/');
+        if (keyPath === '' && pathPrefix === '') {
+            return '/';
+        }
+        if (keyPath === '') {
+            return pathPrefix;
+        }
+        return pathPrefix + '/' + keyPath;
+    }, { ...(ngDevMode ? { debugName: "primaryKeyPath" } : {}) });
+    camelCaseToTitlePipe = new CamelCaseToTitlePipe();
+    ngOnInit() {
+        if (this.resourceMeta(this.config().primaryResource)) {
+            this.store.resourceName.set(this.config().primaryResource);
+            this.store.resourceMeta.set(this.resourceMeta(this.config().primaryResource));
+        }
+    }
+    saveForm() {
+        if (!this.form().valid) {
+            this.submitted.set(true);
+            this.form().markAllAsTouched();
+            const formElement = document.getElementById('resource-form');
+            const invalidField = formElement?.querySelector('.mdc-text-field--invalid');
+            if (invalidField) {
+                invalidField.scrollIntoView({ behavior: 'smooth' });
+            }
+            return;
+        }
+        const resourceMeta = this.store.resourceMeta();
+        if (!resourceMeta) {
+            return;
+        }
+        const cleanedForm = cleanStringForm(this.form());
+        if (cleanedForm === undefined || cleanedForm === null) {
+            return;
+        }
+        const coercedCleanedData = metadataTypeCoercion(cleanedForm, this.store.resourceMeta());
+        const cleanedDataWithoutPrimaryKeys = Object.fromEntries(Object.entries(coercedCleanedData).filter(([key]) => !this.primaryKeys().some((field) => field.fieldName === key)));
+        const createPatch = {
+            op: 'add',
+            value: cleanedDataWithoutPrimaryKeys,
+            path: this.primaryKeyPath(),
+        };
+        this.store
+            .createPatch(createPatch, this.route(), this.store.resourceName())
+            .pipe(tap((response) => {
+            this.formState.decrementDirtyForms();
+            if (!response) {
+                this.complete.emit(true);
+                return;
+            }
+            let createIds = [];
+            if (resourceMeta.consolidatedRoute) {
+                const resourceName = camelCase(this.store.resourceName());
+                createIds = response[resourceName] || [];
+            }
+            else {
+                createIds = (response['iDs'] || []);
+            }
+            if (this.loadCreatedResource() && createIds.length === 1) {
+                let route = this.rootConfig().routeData.route;
+                if (this.parentData() || !route) {
+                    route = resourceMeta.route;
+                }
+                const navigationRoutes = this.config().createNavigation;
+                if (navigationRoutes.length === 0) {
+                    this.router.navigate([route, createIds[0]]);
+                }
+                else {
+                    if (createIds[0]) {
+                        navigationRoutes.push(createIds[0]);
+                    }
+                    this.router.navigate(navigationRoutes);
+                }
+            }
+            else {
+                this.complete.emit(true);
+            }
+        }))
+            .subscribe();
+    }
+    cancelForm() {
+        if (this.form().dirty) {
+            this.formState.decrementDirtyForms();
+        }
+        this.complete.emit(true);
+    }
+    constructor() {
+        effect(() => {
+            console.debug('USAGE | New FormGroup subscription for: ', this.config().title);
+            this.form()
+                .valueChanges.pipe(tap(() => {
+                const dirty = this.form().dirty;
+                if (dirty !== this.isDirty()) {
+                    this.isDirty.set(dirty);
+                    if (dirty) {
+                        this.formState.incrementDirtyForms();
+                    }
+                    else {
+                        this.formState.decrementDirtyForms();
+                    }
+                }
+            }), takeUntilDestroyed(this.destroyRef))
+                .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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-resource-create', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatDividerModule,
+                        ResourceLayoutComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ResourceStore], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { complete: [{ type: i0.Output, args: ["complete"] }], resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: false }] }], loadCreatedResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadCreatedResource", required: false }] }] } });
+
+class ResourceArrayViewComponent {
+    resourceMeta = inject(RESOURCE_META);
+    store = inject(ResourceStore);
+    injector = inject(Injector);
+    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" } : {}) });
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
+    showCreateButton = computed(() => {
+        const list = this.store.listData();
+        const resourceConfig = this.resourceConfig();
+        const iteratedConfig = resourceConfig.iteratedConfig;
+        if (list && resourceConfig?.viewType === 'OneToOne') {
+            this.emptyOneToOne.emit(list.length === 0);
+            return list.length === 0;
+        }
+        if ('createTitle' in iteratedConfig && iteratedConfig.createTitle !== '') {
+            return true;
+        }
+        return false;
+    }, { ...(ngDevMode ? { debugName: "showCreateButton" } : {}) });
+    createActionConfig = computed(() => {
+        const config = this.resourceConfig();
+        const showCreate = this.showCreateButton();
+        const meta = this.store.resourceMeta();
+        if (config === undefined || showCreate === undefined || meta === undefined) {
+            return undefined;
+        }
+        return {
+            actionType: 'create',
+            meta: this.store.resourceMeta(),
+            shouldRender: () => (showCreate && config.shouldRenderActions?.create?.(this.parentData())) ?? false,
+            resourceData: this.parentData(),
+        };
+    }, { ...(ngDevMode ? { debugName: "createActionConfig" } : {}) });
+    createConfig = computed(() => {
+        const config = this.resourceConfig();
+        if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
+            return config.createConfig;
+        }
+        if (config.iteratedConfig && Object.keys(config.iteratedConfig).length !== 0) {
+            return config.iteratedConfig;
+        }
+        return config;
+    }, { ...(ngDevMode ? { debugName: "createConfig" } : {}) });
+    resourceListRoute = computed(() => {
+        const config = this.resourceConfig();
+        const meta = this.resourceMeta(config.connectorResource || config.primaryResource);
+        return meta.route;
+    }, { ...(ngDevMode ? { debugName: "resourceListRoute" } : {}) });
+    setCreateMode(value) {
+        this.createMode.set(value);
+        if (value && this.expPanel && this.expPanel()?.closed) {
+            this.expPanel()?.open();
+        }
+    }
+    ngOnInit() {
+        this.store.resourceName.set(this.resourceConfig().primaryResource);
+        const meta = this.resourceMeta(this.resourceConfig().primaryResource);
+        this.store.resourceMeta.set(meta);
+        this.store.overrideRoute.set(this.resourceListRoute());
+        const columnArray = [];
+        if (this.resourceConfig().connectorField !== '') {
+            columnArray.push({ id: this.resourceConfig().connectorField });
+        }
+        else {
+            columnArray.push({ id: 'id' });
+        }
+        this.store.listColumns.set(columnArray);
+        this.store.sorts.set(this.resourceConfig().sorts);
+    }
+    constructor() {
+        effect(() => {
+            const parentData = this.parentData();
+            const resourceConfig = this.resourceConfig();
+            if (resourceConfig && 'listFilter' in resourceConfig && parentData) {
+                const filter = resourceConfig.listFilter(parentData);
+                this.store.filter.set(filter);
+                this.store.disableCacheForFilterPii.set(resourceConfig.disableCacheForFilterPii);
+                this.store.buildStoreListData();
+            }
+        });
+    }
+    createResource(event) {
+        event.stopPropagation();
+        const expPanel = this.expPanel();
+        if (!expPanel) {
+            this.setCreateMode(true);
+            return;
+        }
+        this.setCreateMode(true);
+        if (expPanel.closed) {
+            expPanel.open();
+        }
+    }
+    onResourceDeleted() {
+        this.setCreateMode(false);
+    }
+    onCreateCompleted() {
+        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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-resource-array-view', imports: [
+                        MatButtonModule,
+                        MatExpansionModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ResourceCreateComponent,
+                        ActionAccessControlWrapperComponent,
+                        NgComponentOutlet,
+                    ], providers: [ResourceStore], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: true }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: false }] }], expPanel: [{ type: i0.ViewChild, args: ['expPanel', { ...{ read: MatExpansionPanel }, isSignal: true }] }], emptyOneToOne: [{ type: i0.Output, args: ["emptyOneToOne"] }], compoundResourceComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceComponent", required: true }] }] } });
+
+const simpleSlashDateFormatter = (value) => {
+    if (!value)
+        return '';
+    const parsedDate = parseISO(value.toString());
+    if (isValid(parsedDate)) {
+        return format(parsedDate, 'M/d/yyyy');
+    }
+    console.error('Applying simpleSlashDateFormatter to invalid date value:', value);
+    return value.toString();
+};
+const ValueFormatters = {
+    ['simpleSlashDateFormat']: simpleSlashDateFormatter,
+};
+function applyFormatting(formatString, value) {
+    if (!value)
+        return '';
+    if (formatString in ValueFormatters) {
+        return ValueFormatters[formatString](value);
+    }
+    //default to formatting as a date with provided format string
+    const parsedDate = parseISO(value.toString());
+    if (isValid(parsedDate)) {
+        return format(parsedDate, formatString);
+    }
+    return value.toString();
+}
+function formatDateString(formatString, value) {
+    if (!value)
+        return '';
+    //default to formatting as a date with provided format string
+    const parsedDate = parseISO(value.toString());
+    if (isValid(parsedDate)) {
+        return format(parsedDate, formatString);
+    }
+    return value.toString();
+}
+
+class ResourceListComponent {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    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" } : {}) });
+    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" } : {}) });
+    showCreateButton = computed(() => {
+        const config = this.config();
+        if (config.createTitle !== '' && !config.collapsible && !this.hideCreateButton()) {
+            return true;
+        }
+        if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
+            return true;
+        }
+        return false;
+    }, { ...(ngDevMode ? { debugName: "showCreateButton" } : {}) });
+    createButtonContext = computed(() => {
+        const config = this.resourceConfig();
+        const showCreate = this.showCreateButton();
+        if (config === undefined || showCreate === undefined) {
+            return undefined;
+        }
+        if (config.shouldRenderActions === undefined) {
+            return undefined;
+        }
+        return {
+            actionType: 'create',
+            meta: this.meta(),
+            shouldRender: (data) => showCreate && config.shouldRenderActions.create(data),
+            resourceData: this.relatedData() ?? {},
+        };
+    }, { ...(ngDevMode ? { debugName: "createButtonContext" } : {}) });
+    searchableFields = computed(() => {
+        const meta = this.meta();
+        if (!meta)
+            return '';
+        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" } : {}) });
+    routeConfig = computed(() => {
+        return this.activatedRoute.snapshot.data['config'];
+    }, { ...(ngDevMode ? { debugName: "routeConfig" } : {}) });
+    config = computed(() => {
+        return this.resourceConfig();
+    }, { ...(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" } : {}) });
+    viewRouteFallback = computed(() => {
+        if (this.viewRoute()) {
+            return this.viewRoute();
+        }
+        return this.resourceMeta(this.config().primaryResource).route;
+    }, { ...(ngDevMode ? { debugName: "viewRouteFallback" } : {}) });
+    listTitle = computed(() => {
+        if (this.config()?.collapsible)
+            return '';
+        return this.config().title || '';
+    }, { ...(ngDevMode ? { debugName: "listTitle" } : {}) });
+    indentTitle = computed(() => {
+        if (this.config() === undefined) {
+            return false;
+        }
+        return true;
+    }, { ...(ngDevMode ? { debugName: "indentTitle" } : {}) });
+    createButtonLabel = computed(() => {
+        return this.config().createButtonLabel || 'Create';
+    }, { ...(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" } : {}) });
+    primaryKeys = computed(() => {
+        const meta = this.meta();
+        if (!meta) {
+            return [];
+        }
+        return meta.fields.filter((field) => field.primaryKey !== undefined);
+    }, { ...(ngDevMode ? { debugName: "primaryKeys" } : {}) });
+    rootColumns = computed(() => {
+        const config = this.config();
+        const idCols = [];
+        for (const pk of this.primaryKeys()) {
+            if (pk.required) {
+                continue;
+            }
+            idCols.push({
+                id: pk.fieldName,
+                hidden: true,
+            });
+        }
+        for (const col of config.listColumns) {
+            if (!('additionalIds' in col))
+                continue;
+            for (const additionalCol of col.additionalIds) {
+                if (additionalCol.resource !== undefined)
+                    continue;
+                idCols.push({
+                    id: additionalCol.id,
+                    hidden: true,
+                });
+            }
+        }
+        return [...new Set([...idCols, ...config.listColumns])];
+    }, { ...(ngDevMode ? { debugName: "rootColumns" } : {}) });
+    columns = computed(() => {
+        const refmap = this.resourceRefMap();
+        const cols = this.rootColumns();
+        const columns = [];
+        const usedIds = new Set();
+        for (const col of cols) {
+            const indexId = this.getUniqueId(col.id, usedIds);
+            usedIds.add(indexId);
+            if (col.hidden) {
+                continue;
+            }
+            if ('additionalIds' in col) {
+                columns.push({
+                    id: indexId,
+                    header: col.header,
+                    width: col.width,
+                    resizable: col.resizable,
+                    valueGetter: (data) => {
+                        const concatArray = [];
+                        col.additionalIds.forEach((additionalCol) => {
+                            if (!additionalCol.resource) {
+                                concatArray.push(data[additionalCol.id]);
+                            }
+                            else {
+                                const resource = signal(additionalCol.resource);
+                                const resourceRef = refmap.get(resource());
+                                const resData = resourceRef?.value();
+                                if (!resData) {
+                                    return;
+                                }
+                                for (const res of resData) {
+                                    if (res[additionalCol.id] === data[col.id] && additionalCol.field) {
+                                        const value = res[additionalCol.field];
+                                        if (col.formatType && typeof value === 'string') {
+                                            concatArray.push(formatDateString(col.formatType, value));
+                                        }
+                                        else if (value) {
+                                            concatArray.push(value);
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                        if (concatArray.length === 0) {
+                            return col.emptyDataValue;
+                        }
+                        switch (col.concatFn) {
+                            case 'space-concat':
+                                return spaceConcatWithoutResource(concatArray);
+                            case 'space-hyphen-concat':
+                                return spaceHyphenConcatWithoutResource(concatArray);
+                            case 'hyphen-space-concat':
+                                return hyphenSpaceConcatWithoutResource(concatArray);
+                            case 'no-space-concat':
+                                return noSpaceConcatWithoutResource(concatArray);
+                            default: {
+                                // default case is hyphen-concat
+                                return hyphenConcatWithoutResource(concatArray);
+                            }
+                        }
+                    },
+                });
+            }
+            else {
+                columns.push({
+                    id: indexId,
+                    header: col.header,
+                    width: col.width,
+                    resizable: col.resizable,
+                    valueFormatter: (params) => {
+                        if (col.formatType) {
+                            const retValue = applyFormatting(col.formatType, params);
+                            return retValue || col.emptyDataValue;
+                        }
+                        return params || col.emptyDataValue;
+                    },
+                });
+            }
+        }
+        if (this.config().showViewButton) {
+            let route = '';
+            const isRootList = this.isRootList() === undefined;
+            if (this.viewRouteFallback() && isRootList) {
+                route = this.viewRouteFallback() || '';
+            }
+            else {
+                let viewResource = this.config().viewResource;
+                if (!viewResource || viewResource === '') {
+                    viewResource = this.config().primaryResource;
+                }
+                const meta = this.resourceMeta(viewResource);
+                if (meta !== undefined) {
+                    route = meta.route;
+                }
+            }
+            columns.push({
+                id: 'view',
+                header: 'View',
+                hideHeader: true,
+                buttonConfig: {
+                    label: 'View',
+                    icon: 'arrow_forward',
+                    viewRoute: route,
+                    actionType: 'link',
+                },
+            });
+        }
+        return columns;
+    }, { ...(ngDevMode ? { debugName: "columns" } : {}) });
+    reloadListData() {
+        this.store.reloadListData();
+    }
+    processedRowData = computed(() => {
+        this.filter();
+        this.relatedData();
+        const data = this.store.listData();
+        if (!data)
+            return [];
+        const columns = this.columns();
+        return data.map((row) => {
+            const updatedRow = { ...row };
+            for (const col of columns) {
+                if (col.valueGetter) {
+                    updatedRow[col.id] = col.valueGetter(row);
+                }
+                else {
+                    updatedRow[col.id] = row[col.id];
+                }
+                if (typeof col.valueFormatter === 'function') {
+                    updatedRow[col.id] = col.valueFormatter(updatedRow[col.id]);
+                }
+            }
+            return updatedRow;
+        });
+    }, { ...(ngDevMode ? { debugName: "processedRowData" } : {}) });
+    filters = computed(() => {
+        const configFilter = this.config().filter?.(this.relatedData()) || '';
+        const inputFilter = this.filter();
+        if (inputFilter && configFilter) {
+            return `(${inputFilter}),(${configFilter})`;
+        }
+        if (inputFilter) {
+            return `(${inputFilter})`;
+        }
+        return configFilter || '';
+    }, { ...(ngDevMode ? { debugName: "filters" } : {}) });
+    createResource(event) {
+        event.stopPropagation();
+        this.createMode.emit(true);
+    }
+    parentKey = computed(() => {
+        if (this.relatedData() === undefined || this.childKey() === undefined) {
+            return '';
+        }
+        const parent = this.config().parentRelation?.parentKey;
+        return this.relatedData()?.[parent] || '';
+    }, { ...(ngDevMode ? { debugName: "parentKey" } : {}) });
+    childKey = computed(() => {
+        if (!this.config().parentRelation) {
+            return '';
+        }
+        return this.config().parentRelation?.childKey;
+    }, { ...(ngDevMode ? { debugName: "childKey" } : {}) });
+    getUniqueId(baseId, usedIds) {
+        if (!usedIds.has(baseId)) {
+            return baseId;
+        }
+        let counter = 1;
+        let newId = `${baseId}_${counter}`;
+        while (usedIds.has(newId)) {
+            counter++;
+            newId = `${baseId}_${counter}`;
+        }
+        return newId;
+    }
+    ngOnInit() {
+        const primaryResource = this.config().primaryResource;
+        if (this.meta()) {
+            this.store.resourceName.set(primaryResource);
+            this.store.resourceMeta.set(this.meta());
+            this.store.listColumns.set(this.config().listColumns || []);
+            this.store.requireSearchToDisplayResults.set(this.config().requireSearchToDisplayResults || false);
+            this.store.sorts.set(this.config().sorts || []);
+        }
+        this.store.filter.set(this.filters());
+        this.store.disableCacheForFilterPii.set(this.config().disableCacheForFilterPii);
+        runInInjectionContext(this.injector, () => {
+            this.config().listColumns.forEach((element) => {
+                if (!('additionalIds' in element)) {
+                    return;
+                }
+                element.additionalIds.forEach((id) => {
+                    if (id.resource === undefined) {
+                        return;
+                    }
+                    const meta = this.resourceMeta(id.resource);
+                    if (meta === undefined) {
+                        return;
+                    }
+                    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) {
+                            return;
+                        }
+                        this.resourceRefMap.set(this.resourceRefMap().set(resource(), ref));
+                    }
+                });
+            });
+            effect(() => {
+                this.filter();
+                this.relatedData();
+                this.store.filter.set(this.filters());
+                this.store.disableCacheForFilterPii.set(this.config().disableCacheForFilterPii);
+                this.store.buildStoreListData();
+            });
+        });
+    }
+    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$1.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: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        AppGridComponent,
+                        RouterModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatExpansionModule,
+                        MatTooltipModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        ActionAccessControlWrapperComponent,
+                        NgComponentOutlet,
+                    ], selector: 'ccc-resource-list', providers: [ResourceStore], 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"] }]
+        }], propDecorators: { compoundResourceComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceComponent", required: true }] }], hideCreateButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCreateButton", required: false }] }], createMode: [{ type: i0.Output, args: ["createMode"] }], resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], viewRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewRoute", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], linkCreateType: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkCreateType", required: false }] }], isRootList: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRootList", required: false }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }] } });
+
+class ResourceListCreateComponent {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    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" } : {}) });
+    childKey = computed(() => {
+        if (!this.config().parentRelation) {
+            return '';
+        }
+        return this.config().parentRelation?.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" } : {}) });
+    parentKey = computed(() => {
+        if (this.parentData() === undefined || this.childKey() === undefined) {
+            return '';
+        }
+        const parent = this.config().parentRelation?.parentKey;
+        return this.parentData()?.[parent] || '';
+    }, { ...(ngDevMode ? { debugName: "parentKey" } : {}) });
+    config = computed(() => {
+        const inputConfig = this.resourceConfig();
+        if (inputConfig) {
+            return inputConfig;
+        }
+        return this.rootConfig().parentConfig;
+    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    expPanel = viewChild('expPanel', { ...(ngDevMode ? { debugName: "expPanel" } : {}), read: MatExpansionPanel });
+    rootConfig = computed(() => {
+        return this.route.snapshot.data['config'];
+    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    createLinkType = computed(() => {
+        return this.config().loadCreatedResource && this.create();
+    }, { ...(ngDevMode ? { debugName: "createLinkType" } : {}) });
+    createConfig = computed(() => {
+        const config = this.config();
+        if (Object.keys(config.createConfig).length !== 0) {
+            return config.createConfig;
+        }
+        return config;
+    }, { ...(ngDevMode ? { debugName: "createConfig" } : {}) });
+    createResource(event) {
+        event.stopPropagation();
+        this.create.set(true);
+        if (this.expPanel() && this.expPanel()?.closed) {
+            this.expPanel()?.open();
+        }
+    }
+    makeCreatePatches() {
+        if (this.create()) {
+            this.listChild()?.reloadListData();
+            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$1.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: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ccc-resource-list-create', imports: [
+                        MatExpansionModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        ResourceCreateComponent,
+                        ResourceListComponent,
+                        NgTemplateOutlet,
+                    ], providers: [ResourceStore], 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"] }]
+        }], propDecorators: { compoundResourceComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceComponent", required: true }] }], listChild: [{ type: i0.ViewChild, args: ['list', { ...{ read: ResourceListComponent }, isSignal: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: false }] }], searchParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchParams", required: false }] }], resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], isRootList: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRootList", required: false }] }], expPanel: [{ type: i0.ViewChild, args: ['expPanel', { ...{ read: MatExpansionPanel }, isSignal: true }] }] } });
+
+var resourceListCreate_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ResourceListCreateComponent: ResourceListCreateComponent
+});
+
+class ResourceResolverComponent {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    compoundResourceComponent = input.required({ ...(ngDevMode ? { debugName: "compoundResourceComponent" } : {}) });
+    resourceConfig = input(undefined, { ...(ngDevMode ? { debugName: "resourceConfig" } : {}) });
+    config = computed(() => {
+        return this.resourceConfig();
+    }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+    dynamicSlot = viewChild.required('dynamicSlot', { read: ViewContainerRef });
+    parentData = input.required({ ...(ngDevMode ? { debugName: "parentData" } : {}) });
+    constructor() {
+        effect(() => {
+            const parentData = this.parentData();
+            const config = this.config();
+            const params = config?.params;
+            if (params === undefined || config === undefined) {
+                return;
+            }
+            untracked(() => {
+                this.dynamicSlot().clear();
+                const component = config.component;
+                switch (component) {
+                    case 'SwitchResolver': {
+                        let uuid = '';
+                        let caseConfig = {};
+                        for (const c of params.cases) {
+                            if (parentData) {
+                                if (parentData[c.parentField] === c.caseId) {
+                                    uuid = String(parentData[c.childId]);
+                                    caseConfig = c.config;
+                                    if ('parentRelation' in caseConfig) {
+                                        caseConfig.parentRelation.childKey = '';
+                                        caseConfig.parentRelation.parentKey = '';
+                                    }
+                                    break;
+                                }
+                            }
+                        }
+                        if (uuid == '') {
+                            return;
+                        }
+                        // Use dynamic import to avoid circular dependency
+                        const primaryComponentRef = this.dynamicSlot().createComponent(this.compoundResourceComponent());
+                        primaryComponentRef.setInput('resourceConfig', caseConfig);
+                        primaryComponentRef.setInput('uuid', uuid);
+                        primaryComponentRef.setInput('parentData', parentData);
+                        break;
+                    }
+                    default:
+                        console.warn('Component not found', component);
+                        // add default component to dynamic slot
+                        break;
+                }
+            });
+        });
+    }
+    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: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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$1.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: [{
+            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" }]
+        }] });
+
+class ResourceViewComponent {
+    resourceMeta = inject(RESOURCE_META);
+    location = inject(Location);
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    notifications = inject(NotificationService);
+    store = inject(ResourceStore);
+    injector = inject(Injector);
+    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" } : {}) });
+    deleted = output();
+    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" } : {}) });
+    rootConfig = computed(() => {
+        return this.activatedRoute.snapshot.data['config'];
+    }, { ...(ngDevMode ? { debugName: "rootConfig" } : {}) });
+    showCloseButton = computed(() => {
+        const config = this.config();
+        const showBackButton = config.showBackButton ?? true;
+        if (config) {
+            return showBackButton && config.primaryResource === this.rootConfig().parentConfig.primaryResource;
+        }
+        return showBackButton;
+    }, { ...(ngDevMode ? { debugName: "showCloseButton" } : {}) });
+    commonButtonConfig = computed(() => {
+        const config = this.config();
+        if (config === undefined) {
+            return undefined;
+        }
+        if (config.shouldRenderActions === undefined) {
+            return undefined;
+        }
+        return {
+            meta: this.store.resourceMeta(),
+            resourceData: this.relatedData(),
+            config,
+        };
+    }, { ...(ngDevMode ? { debugName: "commonButtonConfig" } : {}) });
+    editButtonContext = computed(() => {
+        const commonConfig = this.commonButtonConfig();
+        if (commonConfig === undefined) {
+            return undefined;
+        }
+        return {
+            actionType: 'edit',
+            meta: commonConfig.meta,
+            resourceData: commonConfig.resourceData,
+            shouldRender: commonConfig.config.shouldRenderActions.edit,
+        };
+    }, { ...(ngDevMode ? { debugName: "editButtonContext" } : {}) });
+    deleteButtonContext = computed(() => {
+        const commonConfig = this.commonButtonConfig();
+        if (commonConfig === undefined) {
+            return undefined;
+        }
+        return {
+            actionType: 'delete',
+            meta: commonConfig.meta,
+            resourceData: commonConfig.resourceData,
+            shouldRender: (data) => commonConfig.config.shouldRenderActions.delete(data),
+        };
+    }, { ...(ngDevMode ? { debugName: "deleteButtonContext" } : {}) });
+    inlineRpcConfigs = computed(() => {
+        const config = this.config();
+        if (config === undefined) {
+            return [];
+        }
+        const rpcConfigs = config.rpcConfigs?.filter((rpc) => rpc.placement === 'inline');
+        return rpcConfigs?.map((config) => {
+            return {
+                config,
+                context: {
+                    actionType: 'rpc',
+                    shouldRender: config.shouldRender,
+                    resourceData: this.relatedData(),
+                },
+            };
+        });
+    }, { ...(ngDevMode ? { debugName: "inlineRpcConfigs" } : {}) });
+    endRpcConfigs = computed(() => {
+        const config = this.config();
+        if (config === undefined) {
+            return [];
+        }
+        const rpcConfigs = config.rpcConfigs?.filter((rpc) => rpc.placement === 'end');
+        return rpcConfigs?.map((config) => {
+            return {
+                config,
+                context: {
+                    actionType: 'rpc',
+                    shouldRender: config.shouldRender,
+                    resourceData: this.relatedData(),
+                },
+            };
+        });
+    }, { ...(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
+        if (config && 'viewType' in config && config.viewType !== 'View') {
+            return false;
+        }
+        return config.collapsible || !this.compoundResourceView();
+    }, { ...(ngDevMode ? { debugName: "useExpansionPanel" } : {}) });
+    resourceConfigRouteSnapshot = computed(() => {
+        return (this.config() ||
+            this.activatedRoute.snapshot.data['config']?.parentConfig ||
+            {});
+    }, { ...(ngDevMode ? { debugName: "resourceConfigRouteSnapshot" } : {}) });
+    emptyFormGroup = new FormGroup({});
+    form = computed(() => {
+        const meta = this.store.resourceMeta();
+        const resourceData = this.store.viewData();
+        const config = this.config();
+        if (meta === undefined || resourceData === undefined || config === undefined) {
+            return this.emptyFormGroup;
+        }
+        const fg = new FormGroup({});
+        const pristineValues = {};
+        const allElements = flattenElements(config.elements);
+        for (const field of meta.fields || []) {
+            const isFieldNameRegistered = fg.get(field.fieldName) !== null;
+            if (isFieldNameRegistered) {
+                continue;
+            }
+            const findConfig = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+            const fieldConfig = findConfig;
+            if (!fieldConfig) {
+                continue;
+            }
+            let value = null;
+            const stringValue = resourceData?.[field.fieldName] ? String(resourceData[field.fieldName]) : '';
+            if (field.displayType === 'civildate' && stringValue) {
+                value = civildateCoercion(stringValue);
+            }
+            else if (resourceData[field.fieldName] !== undefined) {
+                value = resourceData[field.fieldName];
+            }
+            const control = new FormControl(value);
+            if (fieldConfig.validators.length > 0) {
+                control.setValidators(fieldConfig.validators);
+            }
+            fg.addControl(field.fieldName, control);
+            pristineValues[field.fieldName] = value;
+        }
+        this.pristineFormValues = pristineValues;
+        return fg;
+    }, { ...(ngDevMode ? { debugName: "form" } : {}) });
+    pristineFormValues = {};
+    route = computed(() => {
+        const meta = this.store.resourceMeta();
+        if (!meta)
+            return '';
+        return meta.consolidatedRoute || meta.route;
+    }, { ...(ngDevMode ? { debugName: "route" } : {}) });
+    primaryKeys = computed(() => {
+        const meta = this.store.resourceMeta();
+        if (!meta)
+            return [];
+        return meta.fields
+            .filter((field) => field.primaryKey)
+            .sort((a, b) => a.primaryKey.ordinalPosition - b.primaryKey.ordinalPosition);
+    }, { ...(ngDevMode ? { debugName: "primaryKeys" } : {}) });
+    primaryKeyPath = computed(() => {
+        const meta = this.store.resourceMeta();
+        const isConsolidated = !!meta.consolidatedRoute;
+        let resourceIdentifier = '';
+        if (isConsolidated) {
+            resourceIdentifier = '/' + String(meta.route);
+        }
+        return (resourceIdentifier +
+            '/' +
+            this.primaryKeys()
+                .map((field) => this.store.viewData()[field.fieldName])
+                .join('/'));
+    }, { ...(ngDevMode ? { debugName: "primaryKeyPath" } : {}) });
+    ngOnInit() {
+        if (this.resourceMeta(this.config().primaryResource)) {
+            this.store.resourceName.set(this.config().primaryResource);
+            this.store.resourceMeta.set(this.resourceMeta(this.config().primaryResource));
+        }
+        this.inlineRpcConfigs();
+        this.endRpcConfigs();
+    }
+    setEditMode(mode) {
+        if (mode === 'view') {
+            const changeData = sparseFormData(this.form(), this.pristineFormValues);
+            if (Object.keys(changeData).length !== 0) {
+                this.notifications.addGlobalNotification({
+                    message: 'You have unsaved changes.',
+                    link: '',
+                    level: AlertLevel.ERROR,
+                });
+                return;
+            }
+            this.editMode.set('view');
+        }
+        else if (mode === 'edit') {
+            this.editMode.set('edit');
+        }
+    }
+    saveForm() {
+        if (!this.form().valid) {
+            this.displayFormInvalidMessage.set(true);
+            this.form().markAllAsTouched();
+            return;
+        }
+        this.displayFormInvalidMessage.set(false);
+        const resourceMeta = this.store.resourceMeta();
+        if (!resourceMeta) {
+            return;
+        }
+        const sparseData = sparseFormData(this.form(), this.pristineFormValues);
+        const coercedSparseData = metadataTypeCoercion(sparseData, resourceMeta);
+        const updatePatch = {
+            op: 'patch',
+            value: coercedSparseData,
+            path: this.primaryKeyPath(),
+        };
+        this.pristineFormValues = this.form().getRawValue();
+        if (Object.keys(coercedSparseData).length === 0) {
+            return;
+        }
+        this.store
+            .makePatches([updatePatch], this.route(), this.store.resourceName())
+            .pipe(tap(() => {
+            this.form().markAsPristine();
+            this.setEditMode('view');
+            this.formState.decrementDirtyForms();
+            this.store.reloadViewData();
+        }))
+            .subscribe();
+    }
+    resetForm() {
+        this.form().reset();
+        this.form().patchValue(this.pristineFormValues);
+        this.setEditMode('view');
+        if (this.form().dirty) {
+            this.formState.decrementDirtyForms();
+        }
+    }
+    confirmDeleteResource() {
+        const existingDialog = this.dialog.openDialogs.find((d) => d.componentInstance instanceof DeleteResourceConfirmationModalComponent);
+        const dialogRef = existingDialog ?? this.dialog.open(DeleteResourceConfirmationModalComponent, { delayFocusTrap: false });
+        const result = dialogRef.afterClosed().pipe(tap((value) => {
+            if (value === true) {
+                console.debug('Deleting resource | ', this.config().title, '|', this.relatedId());
+                this.deleteResource();
+            }
+        }), takeUntilDestroyed(this.destroyRef));
+        result.subscribe();
+    }
+    deleteResource() {
+        const deletePatch = {
+            op: 'remove',
+            value: {},
+            path: this.primaryKeyPath(),
+        };
+        this.store
+            .makePatches([deletePatch], this.route(), this.store.resourceName())
+            .pipe(tap(() => {
+            this.deleted.emit(true);
+        }), filter(() => this.compoundResourceView()), tap(() => {
+            const navAfterDelete = this.navAfterDelete() !== false;
+            if (navAfterDelete) {
+                this.location.back();
+            }
+            else {
+                this.showCreateForm.set(true);
+            }
+        }))
+            .subscribe();
+    }
+    relatedId() {
+        const uuid = this.uuid();
+        const relatedData = this.relatedData();
+        const config = this.config();
+        if (config.parentRelation?.parentKey) {
+            return String(relatedData[config.parentRelation.parentKey]);
+        }
+        return uuid;
+    }
+    constructor() {
+        effect(() => {
+            console.debug('USAGE | New FormGroup subscription for: ', this.config().title);
+            this.form()
+                .valueChanges.pipe(tap(() => {
+                const dirty = this.form().dirty;
+                if (dirty !== this.isDirty()) {
+                    this.isDirty.set(dirty);
+                    if (dirty) {
+                        this.formState.incrementDirtyForms();
+                    }
+                    else {
+                        this.formState.decrementDirtyForms();
+                    }
+                }
+            }), takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        });
+        effect(() => {
+            const id = this.relatedId();
+            const create = this.showCreateForm();
+            this.store.uuid.set(id);
+            if (!create) {
+                this.store.buildStoreViewData();
+            }
+        });
+    }
+    createResource() {
+        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$1.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$1.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: [{
+            type: Component,
+            args: [{ selector: 'ccc-resource-view', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatDividerModule,
+                        ResourceLayoutComponent,
+                        MatExpansionPanel,
+                        MatExpansionPanelHeader,
+                        MatExpansionPanelTitle,
+                        RpcButtonComponent,
+                        CommonModule,
+                        ActionAccessControlWrapperComponent,
+                        ResourceCreateComponent,
+                    ], providers: [ResourceStore], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { uuid: [{ type: i0.Input, args: [{ isSignal: true, alias: "uuid", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], relatedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedData", required: false }] }], compoundResourceView: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundResourceView", required: false }] }], deleted: [{ type: i0.Output, args: ["deleted"] }], navAfterDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAfterDelete", required: false }] }], showCreateForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCreateForm", required: false }] }, { type: i0.Output, args: ["showCreateFormChange"] }] } });
+
+class CompoundResourceComponent {
+    location = inject(Location);
+    route = inject(ActivatedRoute);
+    store = inject(ResourceStore);
+    injector = inject(Injector);
+    /* 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" } : {}) });
+    resourceCreate = output();
+    deleted = output();
+    navAfterDelete = input(true, { ...(ngDevMode ? { debugName: "navAfterDelete" } : {}) });
+    navAfterDeleteConsideringRoot = computed(() => {
+        const navAfterDeleteInput = this.navAfterDelete();
+        if (navAfterDeleteInput === undefined)
+            return true;
+        return false;
+    }, { ...(ngDevMode ? { debugName: "navAfterDeleteConsideringRoot" } : {}) });
+    hasElements = computed(() => {
+        const config = this.primaryConfig();
+        return config && (config.type === 'ListView' || config.type === 'View') && config.elements.length > 0;
+    }, { ...(ngDevMode ? { debugName: "hasElements" } : {}) });
+    primaryConfigParentId = computed(() => {
+        const config = this.primaryConfig();
+        const data = this.resolvedData();
+        if (config.type === 'View' || config.type === 'ListView') {
+            const parentKey = config.parentRelation?.parentKey;
+            if (parentKey !== '') {
+                return String(data[parentKey]);
+            }
+        }
+        return this.uuid();
+    }, { ...(ngDevMode ? { debugName: "primaryConfigParentId" } : {}) });
+    primaryConfig = computed(() => {
+        const config = this.resourceConfig();
+        if (config) {
+            return config;
+        }
+        return this.rootConfig().parentConfig;
+    }, { ...(ngDevMode ? { debugName: "primaryConfig" } : {}) });
+    title = computed(() => {
+        if (this.isArrayChild()) {
+            return '';
+        }
+        const config = this.primaryConfig();
+        if (config.type !== 'Component') {
+            return config.title;
+        }
+        return '';
+    }, { ...(ngDevMode ? { debugName: "title" } : {}) });
+    isRootConfig = computed(() => {
+        return this.resourceConfig() === undefined;
+    }, { ...(ngDevMode ? { debugName: "isRootConfig" } : {}) });
+    configs = computed(() => {
+        if (this.hasElements() && this.emptyOneToOne()) {
+            return [];
+        }
+        if (this.isRootConfig()) {
+            return this.rootConfig().relatedConfigs;
+        }
+        const config = this.primaryConfig();
+        if (config.type === 'ListView' || config.type === 'View') {
+            return config.relatedConfigs;
+        }
+        return [];
+    }, { ...(ngDevMode ? { debugName: "configs" } : {}) });
+    rpcConfigs = computed(() => {
+        const isRootConfig = this.isRootConfig();
+        const rootConfig = this.rootConfig();
+        if (isRootConfig === undefined || rootConfig === undefined) {
+            return [];
+        }
+        if (!isRootConfig || rootConfig.rpcConfigs === undefined) {
+            return [];
+        }
+        return rootConfig.rpcConfigs?.map((config) => ({
+            config,
+            context: {
+                actionType: 'rpc',
+                shouldRender: config.shouldRender,
+                resourceData: this.resolvedData(),
+            },
+        }));
+    }, { ...(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" } : {}) });
+    ngOnInit() {
+        const resource = this.primaryConfig().primaryResource;
+        const meta = this.resourceMeta(resource);
+        if (meta) {
+            this.store.resourceName.set(resource);
+            this.store.resourceMeta.set(meta);
+        }
+    }
+    constructor() {
+        effect(() => {
+            this.store.uuid.set(this.primaryConfigParentId());
+            const c = this.primaryConfig();
+            if (this.missingRoot()) {
+                return;
+            }
+            if (c.type === 'View') {
+                this.store.buildStoreViewData();
+            }
+            else if (c.type === 'ListView') {
+                this.store.buildStoreListData();
+                this.store.buildStoreViewData();
+            }
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CompoundResourceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'compound-resource', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIconModule,
+                        RouterModule,
+                        MatButtonModule,
+                        RpcButtonComponent,
+                        ResourceViewComponent,
+                        ResourceListCreateComponent,
+                        ResourceArrayViewComponent,
+                        ResourceResolverComponent,
+                        ActionAccessControlWrapperComponent,
+                        RouterModule,
+                    ], providers: [ResourceStore], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { resourceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceConfig", required: false }] }], isArrayChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "isArrayChild", required: false }] }], uuid: [{ type: i0.Input, args: [{ isSignal: true, alias: "uuid", required: true }] }], parentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentData", required: false }] }], missingRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "missingRoot", required: false }] }], resourceCreate: [{ type: i0.Output, args: ["resourceCreate"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], navAfterDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAfterDelete", required: false }] }] } });
+
+var compoundResource_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  CompoundResourceComponent: CompoundResourceComponent
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionAccessControlWrapperComponent, BaseInputComponent, BaseRPCModalComponent, CompoundResourceComponent, DeleteResourceConfirmationModalComponent, EmptyReadonlyFieldComponent, FormStateService, LeavePageConfirmationModalComponent, PaddingElementComponent, ResourceArrayViewComponent, ResourceCreateComponent, ResourceFieldComponent, ResourceLayoutComponent, ResourceListComponent, ResourceListCreateComponent, ResourceResolverComponent, ResourceStore, ResourceViewComponent, RpcButtonComponent, ValueFormatters, applyFormatting, canDeactivateGuard, civildateCoercion, concatFunctions, createFormGroup, extractFieldNames, flattenElements, formatDateString, generatedNavGroups, generatedNavItems, hyphenConcat, hyphenConcatWithoutResource, hyphenSpaceConcat, hyphenSpaceConcatWithoutResource, isUUID, maxConfigElementRecursionDepth, maxLayoutNestingDepth, metadataTypeCoercion, noSpaceConcatWithoutResource, resourceRoutes, resourceValidators, simpleSlashDateFormatter, spaceConcat, spaceConcatWithoutResource, spaceHyphenConcat, spaceHyphenConcatWithoutResource };
+//# sourceMappingURL=cccteam-ccc-lib-src-ccc-resource.mjs.map