@cccteam/ccc-lib 0.0.19 → 0.0.21

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

@@ -1,14 +1,14 @@
 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 * as i2$2 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 { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialogActions, MatDialog } 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/types';
 import { NotificationService } from '@cccteam/ccc-lib/ui-notification-service';
-import { tap, of, firstValueFrom, filter } from 'rxjs';
+import { tap, of, 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';
@@ -20,13 +20,12 @@ 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 * as i2$1 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/auth-service';
 import * as i10 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i4 from '@angular/material/core';
@@ -459,61 +458,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             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 = {};
@@ -543,90 +487,12 @@ const createFormGroup = (meta, resourceData, config, formDataState) => {
         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) {
@@ -639,12 +505,6 @@ function extractFieldNames(elements) {
     }
     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);
@@ -779,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BooleanFieldComponent, isStandalone: true, selector: "ccc-boolean-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <ng-container [formGroup]=\"form()\">\n    <div [class.readonly-field]=\"editMode() === 'view'\">\n      <mat-checkbox\n        class=\"field checkbox {{ fieldClass() }}\"\n        [formControlName]=\"fieldConfig().name\"\n        (keydown.enter)=\"$event.preventDefault()\">\n        {{ fieldConfig().label }}\n      </mat-checkbox>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
@@ -1102,7 +962,7 @@ class EnumeratedFieldComponent extends BaseInputComponent {
         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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EnumeratedFieldComponent, isStandalone: true, selector: "ccc-enumerated-field", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form()\">\n  @if (showField()) {\n    @let options = availableEnumOptions();\n    @if (editMode() === 'edit') {\n      <div class=\"enumerated-field-container\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          @if (fieldConfig().enumeratedConfig.searchable) {\n            <input\n              #input\n              type=\"text\"\n              placeholder=\"Search\"\n              matInput\n              [matAutocomplete]=\"auto\"\n              [formControlName]=\"fieldConfig().name\"\n              (input)=\"search(input.value)\" />\n            <mat-autocomplete\n              (optionSelected)=\"select($event.option.value)\"\n              #auto=\"matAutocomplete\"\n              [displayWith]=\"getDisplayText\">\n              @for (option of options; track option.id) {\n                <mat-option [value]=\"option.id\">{{ option?.display }}</mat-option>\n              }\n            </mat-autocomplete>\n          } @else {\n            <mat-select\n              [formControlName]=\"fieldConfig().name\"\n              (keydown.enter)=\"$event.preventDefault()\"\n              (selectionChange)=\"select($event.value)\"\n              [ariaReadOnly]=\"editMode() === 'view'\">\n              @for (option of options; track option.id) {\n                @if (option?.id === form().get(this.fieldConfig().name)?.value) {\n                  <mat-option [value]=\"option?.id\" selected>{{ option?.display }}</mat-option>\n                } @else {\n                  <mat-option [value]=\"option?.id\">{{ option?.display }}</mat-option>\n                }\n              }\n            </mat-select>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"enumerated-field-container readonly-field\">\n        <mat-form-field class=\"field {{ fieldClass() }}\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ fieldConfig().label }}</mat-label>\n          <input\n            id=\"{{ fieldConfig().name }}-readonly-input-text\"\n            matInput\n            (keydown.enter)=\"$event.preventDefault()\"\n            [readonly]=\"true\"\n            type=\"text\"\n            [required]=\"hasRequiredValidator()\"\n            [value]=\"singleEnumDisplayText()\" />\n        </mat-form-field>\n        @if (viewDetails()) {\n          <a\n            mat-icon-button\n            color=\"accent\"\n            [matTooltip]=\"tooltipMessage()\"\n            matTooltipPosition=\"below\"\n            [routerLink]=\"['/', route(), form().get(this.fieldConfig().name)?.value]\">\n            <mat-icon>arrow_forward</mat-icon>\n          </a>\n        }\n      </div>\n      <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n    }\n  } @else {\n    <input class=\"display-none\" [formControlName]=\"fieldConfig().name\" />\n  }\n</ng-container>\n", styles: [".enumerated-field-container{display:flex;flex-direction:row;gap:10px}.display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EnumeratedFieldComponent, decorators: [{
             type: Component,
@@ -1192,7 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: TextFieldComponent, isStandalone: true, selector: "ccc-text-field", usesInheritance: true, ngImport: i0, template: "@if (showField()) {\n  <div [class.readonly-field]=\"editMode() === 'view'\">\n    <mat-form-field\n      class=\"field {{ fieldClass() }}\"\n      [formGroup]=\"form()\"\n      [subscriptSizing]=\"'dynamic'\"\n      [floatLabel]=\"floatLabel()\">\n      <mat-label>{{ fieldConfig().label }}</mat-label>\n      <span matTextPrefix class=\"prefix\">{{ prefixString() }}</span>\n      <span matTextSuffix class=\"suffix\">{{ suffixString() }}</span>\n      <input\n        matInput\n        (keydown.enter)=\"$event.preventDefault()\"\n        [readonly]=\"editMode() === 'view'\"\n        type=\"text\"\n        [formControlName]=\"fieldConfig().name\"\n        [class.dirty-input]=\"form().get(fieldConfig().name)?.dirty\" />\n      @if (editMode() === 'edit' && form().get(fieldConfig().name)?.dirty) {\n        <button matSuffix mat-icon-button (click)=\"reset()\" tabindex=\"-1\">\n          <mat-icon>refresh</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n} @else {\n  <ng-container [formGroup]=\"form()\">\n    <input type=\"hidden\" [formControlName]=\"fieldConfig().name\" />\n  </ng-container>\n}\n", styles: [".prefix,.suffix{font-style:italic;color:gray;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -1548,7 +1408,7 @@ class BaseRPCModalComponent {
     }, { ...(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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseRPCModalComponent, isStandalone: true, selector: "ccc-base-rpc-modal", providers: [ResourceStore], ngImport: i0, template: "<div mat-dialog-title>{{ formData().label }}</div>\n<mat-dialog-content>\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of formData().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"meta()\"\n            [pristineValue]=\"pristineForm[element.name]\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"form().getRawValue()\" [disabled]=\"!form().valid\">\n    Complete\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseRPCModalComponent, decorators: [{
             type: Component,
@@ -1563,6 +1423,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                     ], 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 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 RpcButtonComponent {
     activatedRoute = inject(ActivatedRoute);
     router = inject(Router);
@@ -1706,7 +1590,7 @@ class RpcButtonComponent {
         }
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: RpcButtonComponent, isStandalone: true, selector: "ccc-rpc-button", inputs: { relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: true, transformFunction: null }, rpcConfig: { classPropertyName: "rpcConfig", publicName: "rpcConfig", isSignal: true, isRequired: true, transformFunction: null }, primaryResource: { classPropertyName: "primaryResource", publicName: "primaryResource", isSignal: true, isRequired: true, transformFunction: null }, dependentResources: { classPropertyName: "dependentResources", publicName: "dependentResources", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], ngImport: i0, template: "@if (showRPCButton()) {\n  <div class=\"button-container\">\n    <button mat-raised-button color=\"accent\" (click)=\"submitRPC()\" [disabled]=\"formState.isDirty()\">\n      {{ rpcConfig().label }}\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RpcButtonComponent, decorators: [{
             type: Component,
@@ -1924,7 +1808,7 @@ class ResourceCreateComponent {
         });
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceCreateComponent, isStandalone: true, selector: "ccc-resource-create", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, loadCreatedResource: { classPropertyName: "loadCreatedResource", publicName: "loadCreatedResource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, providers: [ResourceStore], ngImport: i0, template: "<div class=\"page-container\">\n  <div class=\"header-container\">\n    <div class=\"title\" [class.indent]=\"indentTitle()\">\n      <h1>Create {{ config().title }}</h1>\n    </div>\n\n    <div class=\"state-buttons\">\n      @if (!form().valid && submitted()) {\n        <div class=\"invalid message\">Please complete or fix required fields.</div>\n      }\n      <button mat-raised-button color=\"primary\" (click)=\"cancelForm()\">Cancel</button>\n      <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Create</button>\n    </div>\n  </div>\n\n  <div class=\"resource-container\">\n    <form [formGroup]=\"form()\">\n      <div class=\"resource row\">\n        @for (element of config().elements; track element) {\n          <ccc-resource-layout-template\n            [element]=\"element\"\n            [meta]=\"store.resourceMeta()\"\n            [fieldClass]=\"config().fieldClass\"\n            [relatedData]=\"parentData()\"\n            editMode=\"edit\"\n            [form]=\"form()\"></ccc-resource-layout-template>\n        }\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.page-container{position:relative}.header-container{margin:20px 20px 0;display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.indent{padding-left:20px}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px}.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceCreateComponent, decorators: [{
             type: Component,
@@ -2047,7 +1931,7 @@ class ResourceArrayViewComponent {
         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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceArrayViewComponent, isStandalone: true, selector: "ccc-resource-array-view", inputs: { resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: true, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { emptyOneToOne: "emptyOneToOne" }, providers: [ResourceStore], viewQueries: [{ propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (resourceConfig().title !== '') {\n  <div class=\"resource-array-view\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      [disabled]=\"!resourceConfig().collapsible\"\n      [expanded]=\"!resourceConfig().collapsible\">\n      <mat-expansion-panel-header>\n        @if (resourceConfig().title) {\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ resourceConfig().title }}\n            </h1>\n          </mat-panel-title>\n        }\n        <action-access-control-wrapper [actionContext]=\"createActionConfig()\">\n          <button\n            mat-icon-button\n            class=\"exp-panel-add-element-btn\"\n            color=\"accent\"\n            (click)=\"createResource($event)\"\n            [matTooltip]=\"resourceConfig().createButtonLabel\"\n            matTooltipPosition=\"above\">\n            <mat-icon color=\"accent\">add_circle</mat-icon>\n          </button>\n        </action-access-control-wrapper>\n      </mat-expansion-panel-header>\n\n      @if (!resourceConfig().collapsible && !resourceConfig().title) {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      @if (createMode()) {\n        <ccc-resource-create\n          [resourceConfig]=\"createConfig()\"\n          [parentData]=\"parentData()\"\n          (complete)=\"onCreateCompleted()\">\n        </ccc-resource-create>\n      }\n      @if (store.listStatus() === 'resolved') {\n        @for (resource of store.listData(); track resource['id']; let i = $index) {\n          @let resourceId = (resource[resourceConfig().connectorField] || resource['id']) + '';\n\n          @if (parentData() && resourceConfig().iteratedConfig && resourceId && i + 1 <= resourceConfig().limit) {\n            <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n              inputs: { \n                uuid: resourceId, \n                parentData: parentData(), \n                isArrayChild: true, \n                resourceConfig: resourceConfig().iteratedConfig \n              }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n\n      @if (store.listData().length === 0) {\n        <div>No records found</div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  @if (createMode()) {\n    <ccc-resource-create [resourceConfig]=\"createConfig()\" [parentData]=\"parentData()\" (complete)=\"onCreateCompleted()\">\n    </ccc-resource-create>\n  }\n  @if (store.listStatus() === 'resolved') {\n    @for (resource of store.listData(); track resource['id']; let i = $index) {\n      @if (parentData() && resourceConfig().iteratedConfig && resource['id'] && i + 1 <= resourceConfig().limit) {\n      <ng-container *ngComponentOutlet=\"compoundResourceComponent();\n        inputs: { \n          uuid: resource['id'] + '', \n          parentData: parentData(), \n          isArrayChild: true, \n          resourceConfig: resourceConfig().iteratedConfig \n        }\">\n      </ng-container>\n      }\n    }\n  } @else {\n    <div class=\"resource-container empty\">\n      <div class=\"resource row\"></div>\n    </div>\n  }\n\n  @if (store.listData().length === 0) {\n    <div>No records found</div>\n  }\n}\n", styles: [".resource-array-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.title{display:flex;align-items:center;flex-shrink:0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.no-title-exp-panel-padding{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceArrayViewComponent, decorators: [{
             type: Component,
@@ -2441,7 +2325,7 @@ class ResourceListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceListComponent, isStandalone: true, selector: "ccc-resource-list", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, hideCreateButton: { classPropertyName: "hideCreateButton", publicName: "hideCreateButton", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, viewRoute: { classPropertyName: "viewRoute", publicName: "viewRoute", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, linkCreateType: { classPropertyName: "linkCreateType", publicName: "linkCreateType", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createMode: "createMode" }, providers: [ResourceStore], ngImport: i0, template: "<div [class]=\"linkCreateType() ? 'page-container hide' : 'page-container'\">\n  <div class=\"header-container\" [class.show-background]=\"!config().collapsible\" [class.indent]=\"indentTitle()\">\n    <h1 class=\"title\">{{ listTitle() }}</h1>\n    <action-access-control-wrapper [actionContext]=\"createButtonContext()\">\n      <div class=\"create-button\">\n        <button mat-raised-button color=\"accent\" (click)=\"createResource($event)\">\n          <div class=\"edit-text\">\n            <mat-icon>create</mat-icon>\n            <span class=\"edit-button-text\"> {{ createButtonLabel() }} </span>\n          </div>\n        </button>\n      </div>\n    </action-access-control-wrapper>\n  </div>\n  <div class=\"resource-container\">\n    @if (config().searchable) {\n      <mat-form-field class=\"search\">\n        <input matInput #qry (keyup)=\"store.searchTokens.set(qry.value)\" placeholder=\"Search\" aria-label=\"Search\" />\n        @if (searchableFields() !== '') {\n          <mat-hint>Search {{ searchableFields() }}</mat-hint>\n        }\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n    }\n    <ccc-grid\n      [rowData]=\"processedRowData()\"\n      [columnDefs]=\"columns()\"\n      [enableRowExpansion]=\"config().enableRowExpansion\"\n      [detailTemplate]=\"expandedRowTemplate\">\n    </ccc-grid>\n  </div>\n</div>\n\n<ng-template #expandedRowTemplate let-rowData>\n  <ng-container\n    *ngComponentOutlet=\"\n      compoundResourceComponent();\n      inputs: {\n        uuid: rowData.id,\n        navAfterDelete: false,\n        deleted: store.reloadListData.bind(store),\n        resourceConfig: expansionConfig(),\n      }\n    \">\n  </ng-container>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.header-container{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;top:0;z-index:10;width:100%}.title{display:flex;align-items:center;flex-shrink:0}.create-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.edit-text{display:flex;flex-direction:row;align-items:center}.edit-text .edit{color:#003b49}.edit-text .mat-icon{margin-right:8px}.edit-button-text{margin-top:auto;margin-bottom:auto}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.hide{display:none}.show-background{background-color:#fff;padding-bottom:20px}.indent{padding-left:20px}.search{width:100%}\n"], dependencies: [{ kind: "component", type: AppGridComponent, selector: "ccc-grid", inputs: ["rowData", "columnDefs", "enableRowExpansion", "detailTemplate", "selectionType"], outputs: ["selectedRows"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceListComponent, isStandalone: true, selector: "ccc-resource-list", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, hideCreateButton: { classPropertyName: "hideCreateButton", publicName: "hideCreateButton", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, viewRoute: { classPropertyName: "viewRoute", publicName: "viewRoute", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, linkCreateType: { classPropertyName: "linkCreateType", publicName: "linkCreateType", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createMode: "createMode" }, providers: [ResourceStore], ngImport: i0, template: "<div [class]=\"linkCreateType() ? 'page-container hide' : 'page-container'\">\n  <div class=\"header-container\" [class.show-background]=\"!config().collapsible\" [class.indent]=\"indentTitle()\">\n    <h1 class=\"title\">{{ listTitle() }}</h1>\n    <action-access-control-wrapper [actionContext]=\"createButtonContext()\">\n      <div class=\"create-button\">\n        <button mat-raised-button color=\"accent\" (click)=\"createResource($event)\">\n          <div class=\"edit-text\">\n            <mat-icon>create</mat-icon>\n            <span class=\"edit-button-text\"> {{ createButtonLabel() }} </span>\n          </div>\n        </button>\n      </div>\n    </action-access-control-wrapper>\n  </div>\n  <div class=\"resource-container\">\n    @if (config().searchable) {\n      <mat-form-field class=\"search\">\n        <input matInput #qry (keyup)=\"store.searchTokens.set(qry.value)\" placeholder=\"Search\" aria-label=\"Search\" />\n        @if (searchableFields() !== '') {\n          <mat-hint>Search {{ searchableFields() }}</mat-hint>\n        }\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n    }\n    <ccc-grid\n      [rowData]=\"processedRowData()\"\n      [columnDefs]=\"columns()\"\n      [enableRowExpansion]=\"config().enableRowExpansion\"\n      [detailTemplate]=\"expandedRowTemplate\">\n    </ccc-grid>\n  </div>\n</div>\n\n<ng-template #expandedRowTemplate let-rowData>\n  <ng-container\n    *ngComponentOutlet=\"\n      compoundResourceComponent();\n      inputs: {\n        uuid: rowData.id,\n        navAfterDelete: false,\n        deleted: store.reloadListData.bind(store),\n        resourceConfig: expansionConfig(),\n      }\n    \">\n  </ng-container>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.header-container{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;top:0;z-index:10;width:100%}.title{display:flex;align-items:center;flex-shrink:0}.create-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.edit-text{display:flex;flex-direction:row;align-items:center}.edit-text .edit{color:#003b49}.edit-text .mat-icon{margin-right:8px}.edit-button-text{margin-top:auto;margin-bottom:auto}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}.hide{display:none}.show-background{background-color:#fff;padding-bottom:20px}.indent{padding-left:20px}.search{width:100%}\n"], dependencies: [{ kind: "component", type: AppGridComponent, selector: "ccc-grid", inputs: ["rowData", "columnDefs", "enableRowExpansion", "detailTemplate", "selectionType"], outputs: ["selectedRows"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListComponent, decorators: [{
             type: Component,
@@ -2528,7 +2412,7 @@ class ResourceListCreateComponent {
         }
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceListCreateComponent, isStandalone: true, selector: "ccc-resource-list-create", inputs: { compoundResourceComponent: { classPropertyName: "compoundResourceComponent", publicName: "compoundResourceComponent", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentData: { classPropertyName: "parentData", publicName: "parentData", isSignal: true, isRequired: false, transformFunction: null }, searchParams: { classPropertyName: "searchParams", publicName: "searchParams", isSignal: true, isRequired: false, transformFunction: null }, resourceConfig: { classPropertyName: "resourceConfig", publicName: "resourceConfig", isSignal: true, isRequired: false, transformFunction: null }, isRootList: { classPropertyName: "isRootList", publicName: "isRootList", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ResourceStore], viewQueries: [{ propertyName: "listChild", first: true, predicate: ["list"], descendants: true, read: ResourceListComponent, isSignal: true }, { propertyName: "expPanel", first: true, predicate: ["expPanel"], descendants: true, read: MatExpansionPanel, isSignal: true }], ngImport: i0, template: "@if (config().collapsible) {\n  <div class=\"page-container\">\n    <mat-expansion-panel\n      #expPanel\n      [@.disabled]=\"true\"\n      disabled=\"{{ !config().collapsible }}\"\n      expanded=\"{{ !config().collapsible }}\">\n      @if (config().collapsible || config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">\n              {{ config().title }}\n            </h1>\n          </mat-panel-title>\n          @if (config().createTitle !== '') {\n            <button\n              mat-icon-button\n              class=\"exp-panel-add-element-btn\"\n              color=\"accent\"\n              (click)=\"createResource($event)\"\n              matTooltip=\"{{ config().createButtonLabel }}\"\n              matTooltipPosition=\"above\">\n              <mat-icon color=\"accent\">add_circle</mat-icon>\n            </button>\n          }\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n\n      <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"resourceComponents\"></ng-container>\n}\n\n<ng-template #resourceComponents>\n  @if (create()) {\n    <ccc-resource-create\n      [resourceConfig]=\"createConfig()\"\n      [parentData]=\"parentData()\"\n      [loadCreatedResource]=\"config().loadCreatedResource\"\n      (complete)=\"makeCreatePatches()\">\n    </ccc-resource-create>\n  }\n\n  <ccc-resource-list\n    #list\n    [viewRoute]=\"rootConfig().routeData.route\"\n    [resourceConfig]=\"config()\"\n    [filter]=\"filter()\"\n    [hideCreateButton]=\"create()\"\n    [relatedData]=\"parentData()\"\n    [parentId]=\"parentId()\"\n    [linkCreateType]=\"createLinkType()\"\n    [isRootList]=\"isRootList()\"\n    (createMode)=\"create.set($event)\"\n    [compoundResourceComponent]=\"compoundResourceComponent()\">\n  </ccc-resource-list>\n</ng-template>\n", styles: [".page-container{position:relative;margin:10px 0 0}.exp-panel-add-element-btn{margin-right:10px;transform:scale(1.2)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }, { kind: "component", type: ResourceListComponent, selector: "ccc-resource-list", inputs: ["compoundResourceComponent", "hideCreateButton", "resourceConfig", "viewRoute", "filter", "linkCreateType", "isRootList", "relatedData", "parentId"], outputs: ["createMode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceListCreateComponent, decorators: [{
             type: Component,
@@ -2543,11 +2427,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                     ], 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" } : {}) });
@@ -2611,7 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 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 }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: DeleteResourceConfirmationModalComponent, isStandalone: true, selector: "ccc-delete-resource-confirmation-modal", ngImport: i0, template: "<div mat-dialog-title>Are you sure you want to delete this resource?</div>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"false\">Cancel</button>\n  <button mat-raised-button color=\"accent\" [mat-dialog-close]=\"true\">Confirm</button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DeleteResourceConfirmationModalComponent, decorators: [{
             type: Component,
@@ -2946,7 +2825,7 @@ class ResourceViewComponent {
         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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResourceViewComponent, isStandalone: true, selector: "ccc-resource-view", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relatedData: { classPropertyName: "relatedData", publicName: "relatedData", isSignal: true, isRequired: false, transformFunction: null }, compoundResourceView: { classPropertyName: "compoundResourceView", publicName: "compoundResourceView", isSignal: true, isRequired: false, transformFunction: null }, navAfterDelete: { classPropertyName: "navAfterDelete", publicName: "navAfterDelete", isSignal: true, isRequired: false, transformFunction: null }, showCreateForm: { classPropertyName: "showCreateForm", publicName: "showCreateForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", showCreateForm: "showCreateFormChange" }, providers: [ResourceStore], ngImport: i0, template: "@if (useExpansionPanel()) {\n  <div class=\"resource-view\">\n    <mat-expansion-panel [@.disabled]=\"true\" [disabled]=\"!config().collapsible\" [expanded]=\"!config().collapsible\">\n      @if (config().title) {\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <h1 class=\"title\">{{ showCreateForm() ? 'Create' : '' }}{{ config().title }}</h1>\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n      } @else {\n        <div class=\"no-title-exp-panel-padding\"></div>\n      }\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n      @if (store.viewStatus() === 'resolved') {\n        <div class=\"resource-container\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n          <form [formGroup]=\"form()\">\n            <div class=\"resource row\">\n              @if (showCreateForm()) {\n                <ccc-resource-create\n                  [resourceConfig]=\"createConfig()\"\n                  [parentData]=\"relatedData()\"\n                  (complete)=\"createResource()\">\n                </ccc-resource-create>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n              }\n            </div>\n          </form>\n          <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n        </div>\n      } @else {\n        <div class=\"resource-container empty\">\n          <div class=\"resource row\"></div>\n        </div>\n      }\n    </mat-expansion-panel>\n  </div>\n} @else {\n  <div class=\"page-container\">\n    @if (!showCreateForm()) {\n      <ng-container *ngTemplateOutlet=\"headerSlot\"></ng-container>\n    }\n    @if (store.viewStatus() === 'resolved') {\n      <div class=\"resource-container base-container-bg\" [class.form-edit-mode]=\"editMode() === 'edit'\">\n        <form [formGroup]=\"form()\">\n          <div class=\"resource row\">\n            @if (showCreateForm()) {\n              <ccc-resource-create\n                [resourceConfig]=\"createConfig()\"\n                [parentData]=\"relatedData()\"\n                (complete)=\"createResource()\">\n              </ccc-resource-create>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"formSlot\"></ng-container>\n            }\n          </div>\n        </form>\n      </div>\n    } @else {\n      <div class=\"resource-container\">\n        <div class=\"resource row empty\"></div>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerSlot\"></ng-container>\n  </div>\n}\n\n<ng-template #formSlot>\n  @for (element of config().elements; track element) {\n    @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    } @else {\n      <ccc-resource-layout-template\n        [element]=\"element\"\n        [meta]=\"store.resourceMeta()\"\n        [fieldClass]=\"config().fieldClass\"\n        [pristineValue]=\"pristineFormValues[element.name]\"\n        [editMode]=\"editMode()\"\n        [relatedData]=\"relatedData()\"\n        [form]=\"form()\">\n      </ccc-resource-layout-template>\n    }\n  }\n</ng-template>\n\n<ng-template #headerSlot>\n  <div class=\"header-container\">\n    <div class=\"state-buttons\">\n      @if (store.viewStatus() === 'resolved') {\n        @for (rpc of inlineRpcConfigs(); track rpc.context) {\n          <action-access-control-wrapper [actionContext]=\"rpc.context\">\n            <ccc-rpc-button\n              [rpcConfig]=\"rpc.config\"\n              [relatedData]=\"relatedData()\"\n              [primaryResource]=\"config().primaryResource\">\n            </ccc-rpc-button>\n          </action-access-control-wrapper>\n        }\n        @if (editMode() === 'view') {\n          <action-access-control-wrapper [actionContext]=\"editButtonContext()\">\n            <div class=\"edit-button\">\n              <button mat-raised-button color=\"accent\" (click)=\"setEditMode('edit')\">\n                <div class=\"button-text\">\n                  <mat-icon>edit</mat-icon>\n                  <span class=\"mode-text\"> Edit </span>\n                </div>\n              </button>\n            </div>\n          </action-access-control-wrapper>\n\n          <action-access-control-wrapper [actionContext]=\"deleteButtonContext()\">\n            <button mat-raised-button color=\"primary\" (click)=\"confirmDeleteResource()\">Delete</button>\n          </action-access-control-wrapper>\n        }\n\n        @if (editMode() === 'edit') {\n          @if (form().dirty) {\n            <div class=\"unsaved message\">You have unsaved changes!</div>\n          }\n          @if (!form().valid && displayFormInvalidMessage()) {\n            <div class=\"invalid message\">Please complete or fix required fields.</div>\n          }\n          <button mat-raised-button color=\"primary\" (click)=\"resetForm()\">Cancel</button>\n          <button mat-raised-button color=\"accent\" (click)=\"saveForm()\" [disabled]=\"form().pristine\">Save</button>\n        }\n\n        @if (showCloseButton()) {\n          <div class=\"close-button\">\n            <button mat-icon-button color=\"warn\" (click)=\"location.back()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerSlot>\n  @for (rpc of endRpcConfigs(); track rpc) {\n    <action-access-control-wrapper [actionContext]=\"rpc.context\">\n      <ccc-rpc-button\n        [rpcConfig]=\"rpc.config\"\n        [relatedData]=\"relatedData()\"\n        [primaryResource]=\"config().primaryResource\">\n      </ccc-rpc-button>\n    </action-access-control-wrapper>\n  }\n</ng-template>\n", styles: [".container{border:1px solid #8e8e8e;border-radius:5px;position:relative;margin-bottom:20px;padding-top:10px}.label{position:absolute;top:-15px;left:20px;height:20px;background-color:#fff;margin:0 10px;padding:0 10px;text-align:center;z-index:10;font-weight:500;font:18px Roboto,sans-serif}.padding{width:100px}.page-container{position:relative}.header-container{display:flex;flex-direction:row;top:0;z-index:11;background:transparent}.title{display:flex;align-items:center;flex-shrink:0}.message{margin-top:auto;margin-bottom:auto}.state-buttons{display:flex;flex-direction:row;margin-top:auto;margin-bottom:auto;justify-content:right;flex-grow:1;gap:20px;margin-right:20px;min-height:36px}.action-button,.mode-text{margin-top:auto;margin-bottom:auto}.resource{margin:10px}.section h2{font-size:1.5em;border-bottom:2px solid #ccc;padding-bottom:8px;margin-bottom:100px}.section{margin-top:15px}.divider{margin:16px 0}.section-elements{display:flex;flex-wrap:wrap}.mat-input-element:disabled[readonly]{color:currentColor}.unsaved{color:#f44336}.edit-button{margin-top:auto;margin-bottom:auto;padding-left:10px}.button-text{display:flex;flex-direction:row;align-items:center}.button-text .edit{color:#003b49}.button-text .mat-icon{margin-right:8px}.shaded{background-color:#e9e9e9}.rounded{border-radius:8px}.dotted-outline{border:1px dotted #ccc;padding:8px}.margin-top{margin-top:50px}.resource-view{display:flex;flex-direction:column;min-height:36px;padding:10px 0 0}.no-title-exp-panel-padding{padding:10px}.base-container-bg{background-color:var(--app-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: ResourceLayoutComponent, selector: "ccc-resource-layout-template", inputs: ["element", "meta", "fieldClass", "editMode", "form", "formDataState", "pristineValue", "relatedData", "parentClass", "layoutNestingDepth"], outputs: ["formDataStateChange"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: RpcButtonComponent, selector: "ccc-rpc-button", inputs: ["relatedData", "rpcConfig", "primaryResource", "dependentResources"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionAccessControlWrapperComponent, selector: "action-access-control-wrapper", inputs: ["actionContext"] }, { kind: "component", type: ResourceCreateComponent, selector: "ccc-resource-create", inputs: ["resourceConfig", "parentData", "loadCreatedResource"], outputs: ["complete"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResourceViewComponent, decorators: [{
             type: Component,
@@ -3113,14 +2992,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                     ], 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
-});
+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$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: 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" }]
+        }] });
 
 /**
  * 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 };
+export { ActionAccessControlWrapperComponent, BaseInputComponent, BaseRPCModalComponent, CompoundResourceComponent, DeleteResourceConfirmationModalComponent, EmptyReadonlyFieldComponent, FormStateService, LeavePageConfirmationModalComponent, PaddingElementComponent, ResourceArrayViewComponent, ResourceCreateComponent, ResourceFieldComponent, ResourceLayoutComponent, ResourceListComponent, ResourceListCreateComponent, ResourceResolverComponent, ResourceStore, ResourceViewComponent, RpcButtonComponent, ValueFormatters, applyFormatting, civildateCoercion, concatFunctions, createFormGroup, extractFieldNames, flattenElements, formatDateString, hyphenConcat, hyphenConcatWithoutResource, hyphenSpaceConcat, hyphenSpaceConcatWithoutResource, isUUID, maxConfigElementRecursionDepth, maxLayoutNestingDepth, metadataTypeCoercion, noSpaceConcatWithoutResource, resourceValidators, simpleSlashDateFormatter, spaceConcat, spaceConcatWithoutResource, spaceHyphenConcat, spaceHyphenConcatWithoutResource };
 //# sourceMappingURL=cccteam-ccc-lib-ccc-resource.mjs.map