@smallpearl/ngx-helper 0.33.50 → 20.0.3

package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs

@@ -1,38 +1,40 @@
-import * as i1 from '@angular/common/http';
-import { HttpContext, HttpClient, HttpParams, HttpContextToken } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { input, signal, computed, inject, ChangeDetectorRef, Component, InjectionToken, viewChild, ViewContainerRef, ChangeDetectionStrategy, viewChildren, EventEmitter, effect, ContentChildren, Output } from '@angular/core';
+import { InjectionToken, input, signal, computed, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, viewChild, ViewContainerRef, viewChildren, EventEmitter, effect, Output, ContentChildren } from '@angular/core';
+import * as i1$1 from '@angular/common/http';
+import { HttpContext, HttpContextToken, HttpClient, HttpParams } from '@angular/common/http';
 import { FormArray } from '@angular/forms';
-import * as i4$1 from '@jsverse/transloco';
+import * as i3$1 from '@jsverse/transloco';
 import { TranslocoService, TranslocoModule, provideTranslocoScope } from '@jsverse/transloco';
 import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
 import { Subscription, map, tap, Observable, of, switchMap, firstValueFrom, catchError, EMPTY, throwError } from 'rxjs';
 import { sideloadToComposite } from '@smallpearl/ngx-helper/sideload';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import * as i7 from '@angular/material/table';
 import { MatColumnDef, MatTableModule } from '@angular/material/table';
+import * as i3$2 from '@angular/platform-browser';
 import * as i5 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { SPMatHostBusyWheelDirective, showBusyWheelUntilComplete } from '@smallpearl/ngx-helper/mat-busy-wheel';
 import { SPMatContextMenuComponent } from '@smallpearl/ngx-helper/mat-context-menu';
 import { SPMatEntityListComponent } from '@smallpearl/ngx-helper/mat-entity-list';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/platform-browser';
 import * as i11 from 'angular-split';
 import { AngularSplitModule } from 'angular-split';
 import { startCase, clone } from 'lodash';
 import { plural } from 'pluralize';
-import * as i1$1 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
+
+const SP_MAT_ENTITY_CRUD_CONFIG = new InjectionToken('SPMatEntityCrudConfig');
 
 /**
  * Converts array of HttpContextToken key, value pairs to HttpContext
@@ -59,6 +61,13 @@ function convertHttpContextInputToHttpContext(context, reqContext) {
     return context;
 }
 
+const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
+    entityName: '',
+    entityNamePlural: '',
+    endpoint: '',
+    op: undefined,
+}));
+
 /**
  * This is a convenience base class that clients can derive from to implement
  * their CRUD form component. Particularly this class registers the change
@@ -185,37 +194,37 @@ function convertHttpContextInputToHttpContext(context, reqContext) {
  */
 class SPMatEntityCrudFormBase {
     // bridge mode inputs
-    entity = input();
-    bridge = input();
-    params = input();
+    entity = input(...(ngDevMode ? [undefined, { debugName: "entity" }] : []));
+    bridge = input(...(ngDevMode ? [undefined, { debugName: "bridge" }] : []));
+    params = input(...(ngDevMode ? [undefined, { debugName: "params" }] : []));
     // END bridge mode inputs
     // standalone mode inputs
     // Entity name, which is used to parse sideloaded entity responses
-    entityName = input();
+    entityName = input(...(ngDevMode ? [undefined, { debugName: "entityName" }] : []));
     // Base CRUD URL, which is the GET-list-of-entities/POST-to-create
     // URL. Update URL will be derived from this ias `baseUrl()/${TEntity[IdKey]}`
-    baseUrl = input();
+    baseUrl = input(...(ngDevMode ? [undefined, { debugName: "baseUrl" }] : []));
     // Additional request context to be passed to the request
-    httpReqContext = input();
+    httpReqContext = input(...(ngDevMode ? [undefined, { debugName: "httpReqContext" }] : []));
     // ID key, defaults to 'id'
-    idKey = input('id');
+    idKey = input('id', ...(ngDevMode ? [{ debugName: "idKey" }] : []));
     // END standalone mode inputs
     // IMPLEMENTATION
     loadEntity$;
     // This will hold the raw response returned by load() method
-    loadResponse = signal(undefined);
+    loadResponse = signal(undefined, ...(ngDevMode ? [{ debugName: "loadResponse" }] : []));
     // This will hold the loaded entity after it's extracted from the
     // load response.
-    _entity = signal(undefined);
+    _entity = signal(undefined, ...(ngDevMode ? [{ debugName: "_entity" }] : []));
     sub$ = new Subscription();
     // Store for internal form signal. form() is computed from this.
-    _form = signal(undefined);
+    _form = signal(undefined, ...(ngDevMode ? [{ debugName: "_form" }] : []));
     // Force typecast to TFormGroup so that we can use it in the template
     // without having to use the non-nullable operator ! with every reference
     // of form(). In any case the form() signal is always set in ngOnInit()
     // method after the form is created. And if form() is not set, then there
     // will be errors while loading the form in the template.
-    form = computed(() => this._form());
+    form = computed(() => this._form(), ...(ngDevMode ? [{ debugName: "form" }] : []));
     transloco = inject(TranslocoService);
     cdr = inject(ChangeDetectorRef);
     http = inject(HttpClient);
@@ -502,26 +511,151 @@ class SPMatEntityCrudFormBase {
         }
         return context;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: SPMatEntityCrudFormBase, isStandalone: false, selector: "_#_sp-mat-entity-crud-form-base_#_", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, bridge: { classPropertyName: "bridge", publicName: "bridge", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudFormBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: SPMatEntityCrudFormBase, isStandalone: false, selector: "_#_sp-mat-entity-crud-form-base_#_", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, bridge: { classPropertyName: "bridge", publicName: "bridge", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudFormBase, decorators: [{
             type: Component,
             args: [{
                     selector: '_#_sp-mat-entity-crud-form-base_#_',
                     template: ``,
                     standalone: false,
                 }]
-        }] });
+        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: false }] }], bridge: [{ type: i0.Input, args: [{ isSignal: true, alias: "bridge", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], entityName: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityName", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], httpReqContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpReqContext", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: false }] }] } });
 
-const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
-    entityName: '',
-    entityNamePlural: '',
-    endpoint: '',
-    op: undefined,
-}));
+const ITEM_ACTION_UPDATE = '_update_';
+const ITEM_ACTION_DELETE = '_delete_';
 
-const SP_MAT_ENTITY_CRUD_CONFIG = new InjectionToken('SPMatEntityCrudConfig');
+/**
+ * A preview pane container to provide a consistent UX for all preview panes.
+ * It consits of a toolbar on the top and a container div below that takes up
+ * the rest of the preview pane area.
+ */
+class SPMatEntityCrudPreviewPaneComponent {
+    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : []));
+    entityCrudComponent = input.required(...(ngDevMode ? [{ debugName: "entityCrudComponent" }] : []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    disableUpdate = input(false, ...(ngDevMode ? [{ debugName: "disableUpdate" }] : []));
+    hideUpdate = input(false, ...(ngDevMode ? [{ debugName: "hideUpdate" }] : []));
+    disableDelete = input(false, ...(ngDevMode ? [{ debugName: "disableDelete" }] : []));
+    hideDelete = input(false, ...(ngDevMode ? [{ debugName: "hideDelete" }] : []));
+    itemActions;
+    _disableActionFactory = (role, signal) => {
+        return computed(() => {
+            if (signal && signal()) {
+                return true;
+            }
+            const actionFn = this.itemActions.find((a) => a.role === role)?.disable;
+            if (actionFn && actionFn(this.entity())) {
+                return true;
+            }
+            return false;
+        });
+    };
+    _disableUpdate = this._disableActionFactory(ITEM_ACTION_UPDATE, this.disableUpdate);
+    _disableDelete = this._disableActionFactory(ITEM_ACTION_DELETE, this.disableDelete);
+    ngOnInit() {
+        this.itemActions = this.entityCrudComponent().getItemActions();
+    }
+    ngOnDestroy() { }
+    onEdit() {
+        this.entityCrudComponent().triggerEntityUpdate(this.entity());
+    }
+    onDelete() {
+        this.entityCrudComponent().triggerEntityDelete(this.entity());
+    }
+    onClose() {
+        this.entityCrudComponent().closePreview();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudPreviewPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SPMatEntityCrudPreviewPaneComponent, isStandalone: true, selector: "sp-mat-entity-crud-preview-pane", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, entityCrudComponent: { classPropertyName: "entityCrudComponent", publicName: "entityCrudComponent", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disableUpdate: { classPropertyName: "disableUpdate", publicName: "disableUpdate", isSignal: true, isRequired: false, transformFunction: null }, hideUpdate: { classPropertyName: "hideUpdate", publicName: "hideUpdate", isSignal: true, isRequired: false, transformFunction: null }, disableDelete: { classPropertyName: "disableDelete", publicName: "disableDelete", isSignal: true, isRequired: false, transformFunction: null }, hideDelete: { classPropertyName: "hideDelete", publicName: "hideDelete", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="preview-wrapper">
+      <mat-toolbar>
+        <mat-toolbar-row>
+          @if (title()) {
+          <h2>{{ title() }}</h2>
+          &nbsp; } @if (!hideUpdate()) {
+          <button
+            mat-icon-button
+            aria-label="Edit"
+            (click)="onEdit()"
+            [disabled]="_disableUpdate()"
+          >
+            <mat-icon>edit</mat-icon>
+          </button>
+          } @if (!hideDelete()) {
+          <button
+            mat-icon-button
+            aria-label="Delete"
+            (click)="onDelete()"
+            [disabled]="_disableDelete()"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+          }
+          <ng-content select="[previewToolbarContent]"></ng-content>
+          <span class="spacer"></span>
+          <button mat-icon-button aria-label="Close" (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div
+        [class]="
+          'preview-content ' +
+          entityCrudComponent().getPreviewPaneContentClass()
+        "
+      >
+        <ng-content select="[previewContent]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}mat-toolbar{background-color:var(--mat-sys-surface-variant)}.spacer{flex:1 1 auto}.preview-content{padding:.4em;flex-grow:1;overflow:scroll}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudPreviewPaneComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatToolbarModule, MatButtonModule, MatIconModule], selector: 'sp-mat-entity-crud-preview-pane', template: `
+    <div class="preview-wrapper">
+      <mat-toolbar>
+        <mat-toolbar-row>
+          @if (title()) {
+          <h2>{{ title() }}</h2>
+          &nbsp; } @if (!hideUpdate()) {
+          <button
+            mat-icon-button
+            aria-label="Edit"
+            (click)="onEdit()"
+            [disabled]="_disableUpdate()"
+          >
+            <mat-icon>edit</mat-icon>
+          </button>
+          } @if (!hideDelete()) {
+          <button
+            mat-icon-button
+            aria-label="Delete"
+            (click)="onDelete()"
+            [disabled]="_disableDelete()"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+          }
+          <ng-content select="[previewToolbarContent]"></ng-content>
+          <span class="spacer"></span>
+          <button mat-icon-button aria-label="Close" (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div
+        [class]="
+          'preview-content ' +
+          entityCrudComponent().getPreviewPaneContentClass()
+        "
+      >
+        <ng-content select="[previewContent]"></ng-content>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}mat-toolbar{background-color:var(--mat-sys-surface-variant)}.spacer{flex:1 1 auto}.preview-content{padding:.4em;flex-grow:1;overflow:scroll}\n"] }]
+        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], entityCrudComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityCrudComponent", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disableUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableUpdate", required: false }] }], hideUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUpdate", required: false }] }], disableDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDelete", required: false }] }], hideDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelete", required: false }] }] } });
 
 function defaultCrudResponseParser(entityName, idKey, method, // 'create' | 'retrieve' | 'update' | 'delete',
 resp) {
@@ -561,21 +695,21 @@ function getEntityCrudConfig() {
 }
 
 class FormViewHostComponent {
-    entityCrudComponentBase = input.required();
-    clientViewTemplate = input(null);
+    entityCrudComponentBase = input.required(...(ngDevMode ? [{ debugName: "entityCrudComponentBase" }] : []));
+    clientViewTemplate = input(null, ...(ngDevMode ? [{ debugName: "clientViewTemplate" }] : []));
     _itemLabel = computed(() => {
         const label = this.entityCrudComponentBase().getItemLabel();
         return label instanceof Observable ? label : of(label);
-    });
+    }, ...(ngDevMode ? [{ debugName: "_itemLabel" }] : []));
     _itemLabelPlural = computed(() => {
         const label = this.entityCrudComponentBase().getItemLabelPlural();
         return label instanceof Observable ? label : of(label);
-    });
-    entity = signal(undefined);
-    title = signal(undefined);
-    params = signal(undefined);
+    }, ...(ngDevMode ? [{ debugName: "_itemLabelPlural" }] : []));
+    entity = signal(undefined, ...(ngDevMode ? [{ debugName: "entity" }] : []));
+    title = signal(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    params = signal(undefined, ...(ngDevMode ? [{ debugName: "params" }] : []));
     clientFormView;
-    vc = viewChild('clientFormContainer', { read: ViewContainerRef });
+    vc = viewChild('clientFormContainer', ...(ngDevMode ? [{ debugName: "vc", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
     config;
     sub$ = new Subscription();
     transloco = inject(TranslocoService);
@@ -676,8 +810,8 @@ class FormViewHostComponent {
             this.destroyClientView();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FormViewHostComponent, isStandalone: true, selector: "sp-create-edit-entity-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormViewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormViewHostComponent, isStandalone: true, selector: "sp-create-edit-entity-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div
       [class]="
         'sp-mat-crud-form-wrapper ' +
@@ -716,9 +850,9 @@ class FormViewHostComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".sp-mat-crud-form-wrapper{width:100%!important;height:100%!important}.sp-mat-crud-form-content{height:100%;width:100%;display:flex;flex-direction:column;padding:.4em}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px;padding:.4em}.form-container{padding-top:.4em;flex-grow:1;overflow:auto}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sp-mat-crud-form-wrapper{width:100%!important;height:100%!important}.sp-mat-crud-form-content{height:100%;width:100%;display:flex;flex-direction:column;padding:.4em}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px;padding:.4em}.form-container{padding-top:.4em;flex-grow:1;overflow:auto}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormViewHostComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -766,13 +900,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       </div>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sp-mat-crud-form-wrapper{width:100%!important;height:100%!important}.sp-mat-crud-form-content{height:100%;width:100%;display:flex;flex-direction:column;padding:.4em}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px;padding:.4em}.form-container{padding-top:.4em;flex-grow:1;overflow:auto}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { entityCrudComponentBase: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityCrudComponentBase", required: true }] }], clientViewTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientViewTemplate", required: false }] }], vc: [{ type: i0.ViewChild, args: ['clientFormContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class PreviewHostComponent {
-    vc = viewChild('previewComponent', { read: ViewContainerRef });
-    entityCrudComponentBase = input.required();
-    clientViewTemplate = input(null);
-    entity = signal(undefined);
+    vc = viewChild('previewComponent', ...(ngDevMode ? [{ debugName: "vc", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
+    entityCrudComponentBase = input.required(...(ngDevMode ? [{ debugName: "entityCrudComponentBase" }] : []));
+    clientViewTemplate = input(null, ...(ngDevMode ? [{ debugName: "clientViewTemplate" }] : []));
+    entity = signal(undefined, ...(ngDevMode ? [{ debugName: "entity" }] : []));
     clientView;
     constructor() {
         // effect(() => {
@@ -823,10 +957,10 @@ class PreviewHostComponent {
             this.clientView = null;
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PreviewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.6", type: PreviewHostComponent, isStandalone: true, selector: "sp-entity-crud-preview-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["previewComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: ` <ng-container #previewComponent></ng-container> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: PreviewHostComponent, isStandalone: true, selector: "sp-entity-crud-preview-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["previewComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: ` <ng-container #previewComponent></ng-container> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PreviewHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewHostComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -834,59 +968,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     template: ` <ng-container #previewComponent></ng-container> `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { vc: [{ type: i0.ViewChild, args: ['previewComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], entityCrudComponentBase: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityCrudComponentBase", required: true }] }], clientViewTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientViewTemplate", required: false }] }] } });
 
 class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     snackBar;
     // entityName = input.required<string>();
     // entityNamePlural = input<string>();
-    itemLabel = input();
-    itemLabelPlural = input();
+    itemLabel = input(...(ngDevMode ? [undefined, { debugName: "itemLabel" }] : []));
+    itemLabelPlural = input(...(ngDevMode ? [undefined, { debugName: "itemLabelPlural" }] : []));
     /**
      * Title string displayed above the component. If not specified, will use
      * itemLabelPlural() as the title.
      */
-    title = input();
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
     /**
      *
      */
-    itemActions = input([]);
+    itemActions = input([], ...(ngDevMode ? [{ debugName: "itemActions" }] : []));
     /**
      * Specify the list of router paths that will be set as the value for
      * [routerLink] for the 'New {{ item }}' button. If not specified,
      * if createEditTemplate is specified, it will be shown. If not, `action`
      * out event will be raised with `{ role: '_new_' }`.
      */
-    newItemLink = input();
+    newItemLink = input(...(ngDevMode ? [undefined, { debugName: "newItemLink" }] : []));
     /**
      * If not specified, will default to 'New <itemLabel()>'.
      */
-    newItemLabel = input();
+    newItemLabel = input(...(ngDevMode ? [undefined, { debugName: "newItemLabel" }] : []));
     /**
      * Text for the Edit <item> pane title
      */
-    editItemTitle = input();
+    editItemTitle = input(...(ngDevMode ? [undefined, { debugName: "editItemTitle" }] : []));
     /**
      * If you want "New {{item}}" button to support multiple entity types,
      * you can set this to `NewItemSubType[]`, where each element stands for for
      * a dropdown menu item. Refer to `NewItemSubType` for details on this
      * interface.
      */
-    newItemSubTypes = input();
+    newItemSubTypes = input(...(ngDevMode ? [undefined, { debugName: "newItemSubTypes" }] : []));
     /**
      * If you want to take control of the network operations for the CRUD
      * operations (GET/CREATE/UPDATE/DELETE), provide a value for this property.
      */
-    crudOpFn = input();
+    crudOpFn = input(...(ngDevMode ? [undefined, { debugName: "crudOpFn" }] : []));
     /**
      * Item preview template.
      */
-    previewTemplate = input();
+    previewTemplate = input(...(ngDevMode ? [undefined, { debugName: "previewTemplate" }] : []));
     /**
      * Whether to allow a context menu action or not. Return false to disable
      * the action.
      */
-    allowEntityActionFn = input();
+    allowEntityActionFn = input(...(ngDevMode ? [undefined, { debugName: "allowEntityActionFn" }] : []));
     /**
      * A template that allows the header to be replaced. Usage:-
      *
@@ -897,7 +1031,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      *    <ng-template #myCrudViewHeader>...</ng-template>
      *    ```
      */
-    headerTemplate = input();
+    headerTemplate = input(...(ngDevMode ? [undefined, { debugName: "headerTemplate" }] : []));
     /**
      * Set this to the custom template identifier that will replace the
      * "New {{Item}}" button portion. This template will expand towards the
@@ -910,13 +1044,13 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      *    <ng-template #myCrudActions>...</ng-template>
      *    ```
      */
-    actionsTemplate = input();
+    actionsTemplate = input(...(ngDevMode ? [undefined, { debugName: "actionsTemplate" }] : []));
     /**
      * CRUD action response parser. This will be called with the response
      * from CREATE & UPDATE operations to parse the response JSON and return
      * the created/updated TEntity.
      */
-    crudResponseParser = input();
+    crudResponseParser = input(...(ngDevMode ? [undefined, { debugName: "crudResponseParser" }] : []));
     /**
      * An ng-template name that contains the component which provides the
      * create/edit CRUD action.
@@ -932,16 +1066,16 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * (app-create-edit-entity-demo here is the client code that implements the
      * Create/Edit form)
      */
-    createEditFormTemplate = input(null);
+    createEditFormTemplate = input(null, ...(ngDevMode ? [{ debugName: "createEditFormTemplate" }] : []));
     /**
      * Disables the per item actions column, preventing 'Edit' & 'Delete'
      * (and other user defined) item operations.
      */
-    disableItemActions = input(false);
+    disableItemActions = input(false, ...(ngDevMode ? [{ debugName: "disableItemActions" }] : []));
     /**
      * Disables the Create function.
      */
-    disableCreate = input(false);
+    disableCreate = input(false, ...(ngDevMode ? [{ debugName: "disableCreate" }] : []));
     /**
      * View refresh policy after a CREATE/UPDATE operation. Values
      *  'none'   - Objects are not refreshed after an edit operation. The return
@@ -955,7 +1089,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      *             mimics the behaviour of legacy HTML apps with pure server
      *             defined UI.
      */
-    refreshAfterEdit = input('none');
+    refreshAfterEdit = input('none', ...(ngDevMode ? [{ debugName: "refreshAfterEdit" }] : []));
     /**
      * HttpContext for crud requests - `create`, `retrieve`, `update` & `delete`.
      * Note that HttpContext for `list` operation should be set using the
@@ -968,19 +1102,19 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * `[[HttpContextToken<any>, any]] | [HttpContextToken<any>, any] | HttpContext`,
      * in which case the same context would be used for all HTTP requests.
      */
-    crudHttpReqContext = input();
+    crudHttpReqContext = input(...(ngDevMode ? [undefined, { debugName: "crudHttpReqContext" }] : []));
     /**
      * Width of the edit pane as a percentange of the overall <as-split> width.
      */
-    editPaneWidth = input(100);
+    editPaneWidth = input(100, ...(ngDevMode ? [{ debugName: "editPaneWidth" }] : []));
     /**
      * Width of the preview pane as a percentange of the overall <as-split> width.
      */
-    previewPaneWidth = input(50);
+    previewPaneWidth = input(50, ...(ngDevMode ? [{ debugName: "previewPaneWidth" }] : []));
     /**
      * The class class that will be applied to the list pane wrapper.
      */
-    listPaneWrapperClass = input('sp-mat-crud-list-pane-wrapper-class');
+    listPaneWrapperClass = input('sp-mat-crud-list-pane-wrapper-class', ...(ngDevMode ? [{ debugName: "listPaneWrapperClass" }] : []));
     /**
      * The class class that will be applied to the preview pane wrapper.
      * Inside this wrapper, another div element with class='previewPaneContentClass()'
@@ -999,11 +1133,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * | +------------------------------------+ |
      * +----------------------------------------+
      */
-    previewPaneWrapperClass = input('sp-mat-crud-entity-pane-wrapper-class');
+    previewPaneWrapperClass = input('sp-mat-crud-entity-pane-wrapper-class', ...(ngDevMode ? [{ debugName: "previewPaneWrapperClass" }] : []));
     /**
      * The class class that will be applied to the preview pane content.
      */
-    previewPaneContentClass = input('sp-mat-crud-preview-pane-content-class');
+    previewPaneContentClass = input('sp-mat-crud-preview-pane-content-class', ...(ngDevMode ? [{ debugName: "previewPaneContentClass" }] : []));
     /**
      * The class class that will be applied to the form pane wrapper. Inside this
      * wrapper, another div element with class='formPaneContentClass()' will be
@@ -1021,11 +1155,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * | +------------------------------------+ |
      * +----------------------------------------+
      */
-    formPaneWrapperClass = input('sp-mat-crud-form-pane-wrapper-class');
+    formPaneWrapperClass = input('sp-mat-crud-form-pane-wrapper-class', ...(ngDevMode ? [{ debugName: "formPaneWrapperClass" }] : []));
     /**
      * The CSS class that will be applied to the form pane content.
      */
-    formPaneContentClass = input('sp-mat-crud-form-pane-content-class');
+    formPaneContentClass = input('sp-mat-crud-form-pane-content-class', ...(ngDevMode ? [{ debugName: "formPaneContentClass" }] : []));
     // INTERNAL PROPERTIES //
     // Derive a label from a camelCase source string. If the camelCase string
     // can be translated, it returns the translated string. If not, the function
@@ -1042,23 +1176,23 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         const itemLabel = this.itemLabel();
         const label = itemLabel ? itemLabel : this.getLabel(this.entityName());
         return label instanceof Observable ? label : of(label);
-    });
+    }, ...(ngDevMode ? [{ debugName: "_itemLabel" }] : []));
     _itemLabelPlural = computed(() => {
         const itemLabelPlural = this.itemLabelPlural();
         const label = itemLabelPlural
             ? itemLabelPlural
             : this.getLabel(plural(this.entityName()));
         return label instanceof Observable ? label : of(label);
-    });
+    }, ...(ngDevMode ? [{ debugName: "_itemLabelPlural" }] : []));
     // Computed title
     _title = computed(() => {
         const title = this.title() ? this.title() : this._itemLabelPlural();
         return title instanceof Observable ? title : of(title);
-    });
+    }, ...(ngDevMode ? [{ debugName: "_title" }] : []));
     // endpoint with the QP string removed (if one was provided)
-    _endpointSansParams = computed(() => this.endpoint().split('?')[0]);
-    _endpointParams = computed(() => { });
-    componentColumns = viewChildren(MatColumnDef);
+    _endpointSansParams = computed(() => this.endpoint().split('?')[0], ...(ngDevMode ? [{ debugName: "_endpointSansParams" }] : []));
+    _endpointParams = computed(() => { }, ...(ngDevMode ? [{ debugName: "_endpointParams" }] : []));
+    componentColumns = viewChildren(MatColumnDef, ...(ngDevMode ? [{ debugName: "componentColumns" }] : []));
     _clientColumnDefs;
     /**
      * Event raised for user selecting an item action. It's also raised
@@ -1077,7 +1211,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     entityViewPaneActivated = new EventEmitter();
     busyWheelId = `entityCrudBusyWheel-${Date.now()}`;
     sub$ = new Subscription();
-    spEntitiesList = viewChild('entitiesList');
+    spEntitiesList = viewChild('entitiesList', ...(ngDevMode ? [{ debugName: "spEntitiesList" }] : []));
     // Theoritically, we ought to be able to initialize the mat-entities-list
     // columns from ngAfterViewInit lifecycle hook. But for some strange reason
     // when this hook is called, sp-mat-entities-list has not been initialized.
@@ -1088,33 +1222,33 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         if (this.spEntitiesList()) {
             this._initEntitiesList();
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "spEntitiesListInited" }] : []));
     crudConfig;
     // This is the internal component that will host the createEditFormTemplate
-    createEditHostComponent = viewChild(FormViewHostComponent);
+    createEditHostComponent = viewChild(FormViewHostComponent, ...(ngDevMode ? [{ debugName: "createEditHostComponent" }] : []));
     // A flag to toggle the viewport's contents between the mat-table
     // and the create/edit form template.
-    createEditViewActive = signal(false);
+    createEditViewActive = signal(false, ...(ngDevMode ? [{ debugName: "createEditViewActive" }] : []));
     // Whether it's okay to cancel the edit
     canCancelEditCallback;
     // Preview host component
-    previewHostComponent = viewChild(PreviewHostComponent);
-    previewActive = computed(() => this.previewedEntity() !== undefined);
-    previewedEntity = signal(undefined);
+    previewHostComponent = viewChild(PreviewHostComponent, ...(ngDevMode ? [{ debugName: "previewHostComponent" }] : []));
+    previewActive = computed(() => this.previewedEntity() !== undefined, ...(ngDevMode ? [{ debugName: "previewActive" }] : []));
+    previewedEntity = signal(undefined, ...(ngDevMode ? [{ debugName: "previewedEntity" }] : []));
     // Whether the pane that hosts the preview/edit-entity template is active.
     // We call it entityPane as it's used to either render a selected entity
     // or to edit one.
-    entityPaneActive = computed(() => !!this.previewedEntity() || this.createEditViewActive());
+    entityPaneActive = computed(() => !!this.previewedEntity() || this.createEditViewActive(), ...(ngDevMode ? [{ debugName: "entityPaneActive" }] : []));
     // Effective width of the entity pane.
     entityPaneWidth = computed(() => this.entityPaneActive()
         ? !!this.previewedEntity()
             ? this.previewPaneWidth()
             : this.editPaneWidth()
-        : 0);
+        : 0, ...(ngDevMode ? [{ debugName: "entityPaneWidth" }] : []));
     // Width of the pane showing the list of entities. Calculated as
-    entitiesPaneWidth = computed(() => 100 - this.entityPaneWidth());
-    entitiesPaneHidden = computed(() => this.entityPaneActive() && this.entityPaneWidth() === 100);
-    defaultItemCrudActions = signal([]);
+    entitiesPaneWidth = computed(() => 100 - this.entityPaneWidth(), ...(ngDevMode ? [{ debugName: "entitiesPaneWidth" }] : []));
+    entitiesPaneHidden = computed(() => this.entityPaneActive() && this.entityPaneWidth() === 100, ...(ngDevMode ? [{ debugName: "entitiesPaneHidden" }] : []));
+    defaultItemCrudActions = signal([], ...(ngDevMode ? [{ debugName: "defaultItemCrudActions" }] : []));
     columnsWithAction = computed(() => {
         const cols = clone(this.columns());
         const actionDefined = cols.find((c) => typeof c === 'string' ? c === 'action' : c.name === 'action') !== undefined;
@@ -1122,7 +1256,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             cols.push('action');
         }
         return cols;
-    });
+    }, ...(ngDevMode ? [{ debugName: "columnsWithAction" }] : []));
     // Provide per entity actions as a function so that the actions are
     // enumerated only when the user clicks on the context menu button.
     _itemActions = (entity) => this.getItemActions(entity);
@@ -1136,7 +1270,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         ? this.columnsWithAction()
             .map((col) => (typeof col === 'string' ? col : col.name))
             .filter((name) => name !== 'action')
-        : []);
+        : [], ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
     transloco = inject(TranslocoService);
     constructor(http, snackBar, sanitizer, injector) {
         super(http, sanitizer, injector);
@@ -1709,8 +1843,8 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             spEntitiesList.loadMoreEntities();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, deps: [{ token: i1.HttpClient }, { token: i2$1.MatSnackBar }, { token: i3$1.DomSanitizer }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityCrudComponent, isStandalone: true, selector: "sp-mat-entity-crud", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, newItemLink: { classPropertyName: "newItemLink", publicName: "newItemLink", isSignal: true, isRequired: false, transformFunction: null }, newItemLabel: { classPropertyName: "newItemLabel", publicName: "newItemLabel", isSignal: true, isRequired: false, transformFunction: null }, editItemTitle: { classPropertyName: "editItemTitle", publicName: "editItemTitle", isSignal: true, isRequired: false, transformFunction: null }, newItemSubTypes: { classPropertyName: "newItemSubTypes", publicName: "newItemSubTypes", isSignal: true, isRequired: false, transformFunction: null }, crudOpFn: { classPropertyName: "crudOpFn", publicName: "crudOpFn", isSignal: true, isRequired: false, transformFunction: null }, previewTemplate: { classPropertyName: "previewTemplate", publicName: "previewTemplate", isSignal: true, isRequired: false, transformFunction: null }, allowEntityActionFn: { classPropertyName: "allowEntityActionFn", publicName: "allowEntityActionFn", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, crudResponseParser: { classPropertyName: "crudResponseParser", publicName: "crudResponseParser", isSignal: true, isRequired: false, transformFunction: null }, createEditFormTemplate: { classPropertyName: "createEditFormTemplate", publicName: "createEditFormTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableItemActions: { classPropertyName: "disableItemActions", publicName: "disableItemActions", isSignal: true, isRequired: false, transformFunction: null }, disableCreate: { classPropertyName: "disableCreate", publicName: "disableCreate", isSignal: true, isRequired: false, transformFunction: null }, refreshAfterEdit: { classPropertyName: "refreshAfterEdit", publicName: "refreshAfterEdit", isSignal: true, isRequired: false, transformFunction: null }, crudHttpReqContext: { classPropertyName: "crudHttpReqContext", publicName: "crudHttpReqContext", isSignal: true, isRequired: false, transformFunction: null }, editPaneWidth: { classPropertyName: "editPaneWidth", publicName: "editPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWidth: { classPropertyName: "previewPaneWidth", publicName: "previewPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, listPaneWrapperClass: { classPropertyName: "listPaneWrapperClass", publicName: "listPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWrapperClass: { classPropertyName: "previewPaneWrapperClass", publicName: "previewPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneContentClass: { classPropertyName: "previewPaneContentClass", publicName: "previewPaneContentClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneWrapperClass: { classPropertyName: "formPaneWrapperClass", publicName: "formPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneContentClass: { classPropertyName: "formPaneContentClass", publicName: "formPaneContentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, providers: [provideTranslocoScope('sp-mat-entity-crud')], queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: ["entitiesList"], descendants: true, isSignal: true }, { propertyName: "createEditHostComponent", first: true, predicate: FormViewHostComponent, descendants: true, isSignal: true }, { propertyName: "previewHostComponent", first: true, predicate: PreviewHostComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudComponent, deps: [{ token: i1$1.HttpClient }, { token: i2$1.MatSnackBar }, { token: i3$2.DomSanitizer }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SPMatEntityCrudComponent, isStandalone: true, selector: "sp-mat-entity-crud", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, newItemLink: { classPropertyName: "newItemLink", publicName: "newItemLink", isSignal: true, isRequired: false, transformFunction: null }, newItemLabel: { classPropertyName: "newItemLabel", publicName: "newItemLabel", isSignal: true, isRequired: false, transformFunction: null }, editItemTitle: { classPropertyName: "editItemTitle", publicName: "editItemTitle", isSignal: true, isRequired: false, transformFunction: null }, newItemSubTypes: { classPropertyName: "newItemSubTypes", publicName: "newItemSubTypes", isSignal: true, isRequired: false, transformFunction: null }, crudOpFn: { classPropertyName: "crudOpFn", publicName: "crudOpFn", isSignal: true, isRequired: false, transformFunction: null }, previewTemplate: { classPropertyName: "previewTemplate", publicName: "previewTemplate", isSignal: true, isRequired: false, transformFunction: null }, allowEntityActionFn: { classPropertyName: "allowEntityActionFn", publicName: "allowEntityActionFn", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, crudResponseParser: { classPropertyName: "crudResponseParser", publicName: "crudResponseParser", isSignal: true, isRequired: false, transformFunction: null }, createEditFormTemplate: { classPropertyName: "createEditFormTemplate", publicName: "createEditFormTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableItemActions: { classPropertyName: "disableItemActions", publicName: "disableItemActions", isSignal: true, isRequired: false, transformFunction: null }, disableCreate: { classPropertyName: "disableCreate", publicName: "disableCreate", isSignal: true, isRequired: false, transformFunction: null }, refreshAfterEdit: { classPropertyName: "refreshAfterEdit", publicName: "refreshAfterEdit", isSignal: true, isRequired: false, transformFunction: null }, crudHttpReqContext: { classPropertyName: "crudHttpReqContext", publicName: "crudHttpReqContext", isSignal: true, isRequired: false, transformFunction: null }, editPaneWidth: { classPropertyName: "editPaneWidth", publicName: "editPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWidth: { classPropertyName: "previewPaneWidth", publicName: "previewPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, listPaneWrapperClass: { classPropertyName: "listPaneWrapperClass", publicName: "listPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWrapperClass: { classPropertyName: "previewPaneWrapperClass", publicName: "previewPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneContentClass: { classPropertyName: "previewPaneContentClass", publicName: "previewPaneContentClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneWrapperClass: { classPropertyName: "formPaneWrapperClass", publicName: "formPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneContentClass: { classPropertyName: "formPaneContentClass", publicName: "formPaneContentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, providers: [provideTranslocoScope('sp-mat-entity-crud')], queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: ["entitiesList"], descendants: true, isSignal: true }, { propertyName: "createEditHostComponent", first: true, predicate: FormViewHostComponent, descendants: true, isSignal: true }, { propertyName: "previewHostComponent", first: true, predicate: PreviewHostComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <as-split direction="horizontal" [gutterSize]="6" *transloco="let t">
       <as-split-area
         [size]="entitiesPaneWidth()"
@@ -1721,50 +1855,56 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
 
           <ng-template #defaultActionButtons>
             <div class="action-bar-actions">
-              @if (!disableCreate()) { @if (newItemSubTypes()) {
-              <!-- New {{item}} displays a dropdown menu from which the subtype can be selected -->
-              <button
-                type="button"
-                mat-raised-button
-                color="primary"
-                [matMenuTriggerFor]="newSubTypesMenu"
-              >
-                {{
-                  newItemLabel() ??
-                    t('spMatEntityCrud.newItem', {
-                      item: _itemLabel() | async
-                    })
-                }}
-                <mat-icon>expand_circle_down</mat-icon>
-              </button>
-              <mat-menu #newSubTypesMenu="matMenu">
-                @for (subtype of newItemSubTypes(); track $index) { @if
-                (subtype.role) {
-                <button mat-menu-item (click)="handleNewItemSubType(subtype)">
-                  {{ subtype.label }}
-                </button>
+              @if (!disableCreate()) {
+                @if (newItemSubTypes()) {
+                  <!-- New {{item}} displays a dropdown menu from which the subtype can be selected -->
+                  <button
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    [matMenuTriggerFor]="newSubTypesMenu"
+                  >
+                    {{
+                      newItemLabel() ??
+                        t('spMatEntityCrud.newItem', {
+                          item: _itemLabel() | async,
+                        })
+                    }}
+                    <mat-icon>expand_circle_down</mat-icon>
+                  </button>
+                  <mat-menu #newSubTypesMenu="matMenu">
+                    @for (subtype of newItemSubTypes(); track $index) {
+                      @if (subtype.role) {
+                        <button
+                          mat-menu-item
+                          (click)="handleNewItemSubType(subtype)"
+                        >
+                          {{ subtype.label }}
+                        </button>
+                      } @else {
+                        <div style="padding: .2em 0.5em;">
+                          <strong>{{ subtype.label }}</strong>
+                        </div>
+                      }
+                    }
+                  </mat-menu>
                 } @else {
-                <div style="padding: .2em 0.5em;">
-                  <strong>{{ subtype.label }}</strong>
-                </div>
-                } }
-              </mat-menu>
-              } @else {
-              <button
-                mat-raised-button
-                color="primary"
-                (click)="onCreate($event)"
-                [routerLink]="newItemLink()"
-              >
-                {{
-                  newItemLabel() ??
-                    t('spMatEntityCrud.newItem', {
-                      item: _itemLabel() | async
-                    })
-                }}
-                <mat-icon>add_circle</mat-icon>
-              </button>
-              } }
+                  <button
+                    mat-raised-button
+                    color="primary"
+                    (click)="onCreate($event)"
+                    [routerLink]="newItemLink()"
+                  >
+                    {{
+                      newItemLabel() ??
+                        t('spMatEntityCrud.newItem', {
+                          item: _itemLabel() | async,
+                        })
+                    }}
+                    <mat-icon>add_circle</mat-icon>
+                  </button>
+                }
+              }
             </div>
           </ng-template>
 
@@ -1776,9 +1916,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
               <span class="spacer"></span>
               <!-- Hide the action buttons when Preview/Edit pane is active -->
               @if (!entityPaneActive()) {
-              <ng-container
-                [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
-              ></ng-container>
+                <ng-container
+                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+                ></ng-container>
               }
             </div>
           </ng-template>
@@ -1849,9 +1989,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         </div>
       </as-split-area>
     </as-split>
-  `, isInline: true, styles: [".sp-hidden{display:none}.sp-visible{display:inherit;height:100%!important;width:100%!important}.entity-pane-wrapper{height:100%!important;width:100%!important}.action-bar{display:flex;flex-direction:row;align-items:center;padding-bottom:.5em}.action-bar-title{font-size:1.5em;font-weight:600}.spacer{flex-grow:1}.action-bar-actions{text-align:end}.active-row{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i11.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i11.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: SPMatEntityListComponent, selector: "sp-mat-entity-list", inputs: ["entityName", "entityNamePlural", "endpoint", "entityLoaderFn", "columns", "displayedColumns", "pageSize", "idKey", "pagination", "paginator", "sorter", "disableSort", "infiniteScrollContainer", "infiniteScrollDistance", "infiniteScrollThrottle", "infiniteScrollWindow", "httpReqContext", "deferViewInit"], outputs: ["selectEntity"] }, { kind: "component", type: SPMatContextMenuComponent, selector: "sp-mat-context-menu", inputs: ["menuItems", "label", "menuIconName", "enableHover", "contextData", "hasBackdrop"], outputs: ["selected"] }, { kind: "component", type: FormViewHostComponent, selector: "sp-create-edit-entity-host", inputs: ["entityCrudComponentBase", "clientViewTemplate"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }, { kind: "component", type: PreviewHostComponent, selector: "sp-entity-crud-preview-host", inputs: ["entityCrudComponentBase", "clientViewTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sp-hidden{display:none}.sp-visible{display:inherit;height:100%!important;width:100%!important}.entity-pane-wrapper{height:100%!important;width:100%!important}.action-bar{display:flex;flex-direction:row;align-items:center;padding-bottom:.5em}.action-bar-title{font-size:1.5em;font-weight:600}.spacer{flex-grow:1}.action-bar-actions{text-align:end}.active-row{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: MatTableModule }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i11.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i11.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: SPMatEntityListComponent, selector: "sp-mat-entity-list", inputs: ["entityName", "entityNamePlural", "endpoint", "entityLoaderFn", "columns", "displayedColumns", "pageSize", "idKey", "pagination", "paginator", "sorter", "disableSort", "infiniteScrollContainer", "infiniteScrollDistance", "infiniteScrollThrottle", "infiniteScrollWindow", "httpReqContext", "deferViewInit"], outputs: ["selectEntity"] }, { kind: "component", type: SPMatContextMenuComponent, selector: "sp-mat-context-menu", inputs: ["menuItems", "label", "menuIconName", "enableHover", "contextData", "hasBackdrop"], outputs: ["selected"] }, { kind: "component", type: FormViewHostComponent, selector: "sp-create-edit-entity-host", inputs: ["entityCrudComponentBase", "clientViewTemplate"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }, { kind: "component", type: PreviewHostComponent, selector: "sp-entity-crud-preview-host", inputs: ["entityCrudComponentBase", "clientViewTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityCrudComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -1880,50 +2020,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
           <ng-template #defaultActionButtons>
             <div class="action-bar-actions">
-              @if (!disableCreate()) { @if (newItemSubTypes()) {
-              <!-- New {{item}} displays a dropdown menu from which the subtype can be selected -->
-              <button
-                type="button"
-                mat-raised-button
-                color="primary"
-                [matMenuTriggerFor]="newSubTypesMenu"
-              >
-                {{
-                  newItemLabel() ??
-                    t('spMatEntityCrud.newItem', {
-                      item: _itemLabel() | async
-                    })
-                }}
-                <mat-icon>expand_circle_down</mat-icon>
-              </button>
-              <mat-menu #newSubTypesMenu="matMenu">
-                @for (subtype of newItemSubTypes(); track $index) { @if
-                (subtype.role) {
-                <button mat-menu-item (click)="handleNewItemSubType(subtype)">
-                  {{ subtype.label }}
-                </button>
+              @if (!disableCreate()) {
+                @if (newItemSubTypes()) {
+                  <!-- New {{item}} displays a dropdown menu from which the subtype can be selected -->
+                  <button
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    [matMenuTriggerFor]="newSubTypesMenu"
+                  >
+                    {{
+                      newItemLabel() ??
+                        t('spMatEntityCrud.newItem', {
+                          item: _itemLabel() | async,
+                        })
+                    }}
+                    <mat-icon>expand_circle_down</mat-icon>
+                  </button>
+                  <mat-menu #newSubTypesMenu="matMenu">
+                    @for (subtype of newItemSubTypes(); track $index) {
+                      @if (subtype.role) {
+                        <button
+                          mat-menu-item
+                          (click)="handleNewItemSubType(subtype)"
+                        >
+                          {{ subtype.label }}
+                        </button>
+                      } @else {
+                        <div style="padding: .2em 0.5em;">
+                          <strong>{{ subtype.label }}</strong>
+                        </div>
+                      }
+                    }
+                  </mat-menu>
                 } @else {
-                <div style="padding: .2em 0.5em;">
-                  <strong>{{ subtype.label }}</strong>
-                </div>
-                } }
-              </mat-menu>
-              } @else {
-              <button
-                mat-raised-button
-                color="primary"
-                (click)="onCreate($event)"
-                [routerLink]="newItemLink()"
-              >
-                {{
-                  newItemLabel() ??
-                    t('spMatEntityCrud.newItem', {
-                      item: _itemLabel() | async
-                    })
-                }}
-                <mat-icon>add_circle</mat-icon>
-              </button>
-              } }
+                  <button
+                    mat-raised-button
+                    color="primary"
+                    (click)="onCreate($event)"
+                    [routerLink]="newItemLink()"
+                  >
+                    {{
+                      newItemLabel() ??
+                        t('spMatEntityCrud.newItem', {
+                          item: _itemLabel() | async,
+                        })
+                    }}
+                    <mat-icon>add_circle</mat-icon>
+                  </button>
+                }
+              }
             </div>
           </ng-template>
 
@@ -1935,9 +2081,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
               <span class="spacer"></span>
               <!-- Hide the action buttons when Preview/Edit pane is active -->
               @if (!entityPaneActive()) {
-              <ng-container
-                [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
-              ></ng-container>
+                <ng-container
+                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+                ></ng-container>
               }
             </div>
           </ng-template>
@@ -2009,148 +2155,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       </as-split-area>
     </as-split>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sp-hidden{display:none}.sp-visible{display:inherit;height:100%!important;width:100%!important}.entity-pane-wrapper{height:100%!important;width:100%!important}.action-bar{display:flex;flex-direction:row;align-items:center;padding-bottom:.5em}.action-bar-title{font-size:1.5em;font-weight:600}.spacer{flex-grow:1}.action-bar-actions{text-align:end}.active-row{font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.MatSnackBar }, { type: i3$1.DomSanitizer }, { type: i0.Injector }], propDecorators: { _clientColumnDefs: [{
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.MatSnackBar }, { type: i3$2.DomSanitizer }, { type: i0.Injector }], propDecorators: { itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemLabelPlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabelPlural", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], itemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemActions", required: false }] }], newItemLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "newItemLink", required: false }] }], newItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newItemLabel", required: false }] }], editItemTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "editItemTitle", required: false }] }], newItemSubTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "newItemSubTypes", required: false }] }], crudOpFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "crudOpFn", required: false }] }], previewTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewTemplate", required: false }] }], allowEntityActionFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEntityActionFn", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], crudResponseParser: [{ type: i0.Input, args: [{ isSignal: true, alias: "crudResponseParser", required: false }] }], createEditFormTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createEditFormTemplate", required: false }] }], disableItemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableItemActions", required: false }] }], disableCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCreate", required: false }] }], refreshAfterEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshAfterEdit", required: false }] }], crudHttpReqContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "crudHttpReqContext", required: false }] }], editPaneWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPaneWidth", required: false }] }], previewPaneWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewPaneWidth", required: false }] }], listPaneWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listPaneWrapperClass", required: false }] }], previewPaneWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewPaneWrapperClass", required: false }] }], previewPaneContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewPaneContentClass", required: false }] }], formPaneWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formPaneWrapperClass", required: false }] }], formPaneContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formPaneContentClass", required: false }] }], componentColumns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], _clientColumnDefs: [{
                 type: ContentChildren,
                 args: [MatColumnDef]
             }], action: [{
                 type: Output
             }], entityViewPaneActivated: [{
                 type: Output
-            }] } });
-
-const ITEM_ACTION_UPDATE = '_update_';
-const ITEM_ACTION_DELETE = '_delete_';
-
-/**
- * A preview pane container to provide a consistent UX for all preview panes.
- * It consits of a toolbar on the top and a container div below that takes up
- * the rest of the preview pane area.
- */
-class SPMatEntityCrudPreviewPaneComponent {
-    entity = input.required();
-    entityCrudComponent = input.required();
-    title = input();
-    disableUpdate = input(false);
-    hideUpdate = input(false);
-    disableDelete = input(false);
-    hideDelete = input(false);
-    itemActions;
-    _disableActionFactory = (role, signal) => {
-        return computed(() => {
-            if (signal && signal()) {
-                return true;
-            }
-            const actionFn = this.itemActions.find((a) => a.role === role)?.disable;
-            if (actionFn && actionFn(this.entity())) {
-                return true;
-            }
-            return false;
-        });
-    };
-    _disableUpdate = this._disableActionFactory(ITEM_ACTION_UPDATE, this.disableUpdate);
-    _disableDelete = this._disableActionFactory(ITEM_ACTION_DELETE, this.disableDelete);
-    ngOnInit() {
-        this.itemActions = this.entityCrudComponent().getItemActions();
-    }
-    ngOnDestroy() { }
-    onEdit() {
-        this.entityCrudComponent().triggerEntityUpdate(this.entity());
-    }
-    onDelete() {
-        this.entityCrudComponent().triggerEntityDelete(this.entity());
-    }
-    onClose() {
-        this.entityCrudComponent().closePreview();
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudPreviewPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityCrudPreviewPaneComponent, isStandalone: true, selector: "sp-mat-entity-crud-preview-pane", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, entityCrudComponent: { classPropertyName: "entityCrudComponent", publicName: "entityCrudComponent", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disableUpdate: { classPropertyName: "disableUpdate", publicName: "disableUpdate", isSignal: true, isRequired: false, transformFunction: null }, hideUpdate: { classPropertyName: "hideUpdate", publicName: "hideUpdate", isSignal: true, isRequired: false, transformFunction: null }, disableDelete: { classPropertyName: "disableDelete", publicName: "disableDelete", isSignal: true, isRequired: false, transformFunction: null }, hideDelete: { classPropertyName: "hideDelete", publicName: "hideDelete", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="preview-wrapper">
-      <mat-toolbar>
-        <mat-toolbar-row>
-          @if (title()) {
-          <h2>{{ title() }}</h2>
-          &nbsp; } @if (!hideUpdate()) {
-          <button
-            mat-icon-button
-            aria-label="Edit"
-            (click)="onEdit()"
-            [disabled]="_disableUpdate()"
-          >
-            <mat-icon>edit</mat-icon>
-          </button>
-          } @if (!hideDelete()) {
-          <button
-            mat-icon-button
-            aria-label="Delete"
-            (click)="onDelete()"
-            [disabled]="_disableDelete()"
-          >
-            <mat-icon>delete</mat-icon>
-          </button>
-          }
-          <ng-content select="[previewToolbarContent]"></ng-content>
-          <span class="spacer"></span>
-          <button mat-icon-button aria-label="Close" (click)="onClose()">
-            <mat-icon>close</mat-icon>
-          </button>
-        </mat-toolbar-row>
-      </mat-toolbar>
-      <div
-        [class]="
-          'preview-content ' +
-          entityCrudComponent().getPreviewPaneContentClass()
-        "
-      >
-        <ng-content select="[previewContent]"></ng-content>
-      </div>
-    </div>
-  `, isInline: true, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}mat-toolbar{background-color:var(--mat-sys-surface-variant)}.spacer{flex:1 1 auto}.preview-content{padding:.4em;flex-grow:1;overflow:scroll}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudPreviewPaneComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatToolbarModule, MatButtonModule, MatIconModule], selector: 'sp-mat-entity-crud-preview-pane', template: `
-    <div class="preview-wrapper">
-      <mat-toolbar>
-        <mat-toolbar-row>
-          @if (title()) {
-          <h2>{{ title() }}</h2>
-          &nbsp; } @if (!hideUpdate()) {
-          <button
-            mat-icon-button
-            aria-label="Edit"
-            (click)="onEdit()"
-            [disabled]="_disableUpdate()"
-          >
-            <mat-icon>edit</mat-icon>
-          </button>
-          } @if (!hideDelete()) {
-          <button
-            mat-icon-button
-            aria-label="Delete"
-            (click)="onDelete()"
-            [disabled]="_disableDelete()"
-          >
-            <mat-icon>delete</mat-icon>
-          </button>
-          }
-          <ng-content select="[previewToolbarContent]"></ng-content>
-          <span class="spacer"></span>
-          <button mat-icon-button aria-label="Close" (click)="onClose()">
-            <mat-icon>close</mat-icon>
-          </button>
-        </mat-toolbar-row>
-      </mat-toolbar>
-      <div
-        [class]="
-          'preview-content ' +
-          entityCrudComponent().getPreviewPaneContentClass()
-        "
-      >
-        <ng-content select="[previewContent]"></ng-content>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}mat-toolbar{background-color:var(--mat-sys-surface-variant)}.spacer{flex:1 1 auto}.preview-content{padding:.4em;flex-grow:1;overflow:scroll}\n"] }]
-        }] });
+            }], spEntitiesList: [{ type: i0.ViewChild, args: ['entitiesList', { isSignal: true }] }], createEditHostComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormViewHostComponent), { isSignal: true }] }], previewHostComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PreviewHostComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.