@smallpearl/ngx-helper 0.29.23

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

@@ -0,0 +1,1486 @@
+import * as i1$1 from '@angular/common/http';
+import { HttpContextToken, HttpContext } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, signal, viewChild, ViewContainerRef, Component, ChangeDetectionStrategy, computed, viewChildren, EventEmitter, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+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 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 i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3 from '@angular/platform-browser';
+import * as i9 from 'angular-split';
+import { AngularSplitModule } from 'angular-split';
+import { startCase } from 'lodash';
+import { plural } from 'pluralize';
+import { Subscription, tap, switchMap, of, map } from 'rxjs';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
+import { tap as tap$1 } from 'rxjs/operators';
+
+const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
+    entityName: '',
+    entityNamePlural: '',
+    endpoint: '',
+    op: undefined,
+}));
+
+const SP_MAT_ENTITY_CRUD_CONFIG = new InjectionToken('SPMatEntityCrudConfig');
+
+function defaultCrudResponseParser(entityName, idKey, method, resp) {
+    // If the response is an object with a property '<idKey>', return it as
+    // TEntity.
+    if (resp.hasOwnProperty(idKey)) {
+        return resp;
+    }
+    // If the response has an object indexed at '<entityName>' and it has
+    // the property '<idKey>', return it as TEntity.
+    if (resp.hasOwnProperty(entityName)) {
+        const obj = resp[entityName];
+        if (obj.hasOwnProperty(idKey)) {
+            return obj;
+        }
+    }
+    // Return undefined, indicating that we could't parse the response.
+    return undefined;
+}
+const DefaultSPMatEntityCrudConfig = {
+    i18n: {
+        newItemLabel: (itemLabel) => `New ${itemLabel}`,
+        editItemLabel: (itemLabel) => `Edit ${itemLabel}`,
+        edit: 'Edit',
+        delete: 'Delete',
+        deleteItemHeader: (itemLabel) => `Confirm Delete ${itemLabel}`,
+        deleteItemMessage: (itemLabel) => `Are you sure you want to delete this ${itemLabel}`,
+        itemDeletedNotification: (itemLabel) => `${itemLabel} deleted`,
+        createdItemNotification: (itemLabel) => `${itemLabel} created.`,
+        updatedItemNotification: (itemLabel) => `${itemLabel} saved.`,
+        loseChangesPrompt: 'OK to lose changes?'
+    },
+    crudOpResponseParser: defaultCrudResponseParser
+};
+/**
+ * To be called from an object constructor as it internally calls Angular's
+ * inject() API.
+ * @param userConfig
+ * @returns
+ */
+function getEntityCrudConfig() {
+    const userCrudConfig = inject(SP_MAT_ENTITY_CRUD_CONFIG, {
+        optional: true,
+    });
+    return {
+        ...DefaultSPMatEntityCrudConfig,
+        ...(userCrudConfig ?? {}),
+    };
+}
+
+class FormViewHostComponent {
+    entityCrudComponentBase = input.required();
+    clientViewTemplate = input(null);
+    itemLabel = input.required();
+    itemLabelPlural = input.required();
+    entity = signal(undefined);
+    title = signal('');
+    params = signal(undefined);
+    clientFormView;
+    vc = viewChild('clientFormContainer', { read: ViewContainerRef });
+    config;
+    sub$ = new Subscription();
+    constructor() {
+        this.config = getEntityCrudConfig();
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.sub$.unsubscribe();
+    }
+    show(entity, params) {
+        this.entity.set(entity);
+        if (params && params?.title) {
+            this.title.set(params.title);
+        }
+        else {
+            this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.itemLabel()));
+        }
+        this.params.set(params);
+        this.createClientView();
+    }
+    close(cancel) {
+        this.entityCrudComponentBase().closeCreateEdit(cancel);
+        // destroy the client's form component
+        this.destroyClientView();
+    }
+    registerCanCancelEditCallback(callback) {
+        this.entityCrudComponentBase().registerCanCancelEditCallback(callback);
+    }
+    create(entityValue) {
+        // console.log(
+        //   `SPCreateEditEntityHostComponent.create - entity: ${JSON.stringify(
+        //     entityValue
+        //   )}`
+        // );
+        const crudComponent = this.entityCrudComponentBase();
+        return crudComponent?.create(entityValue).pipe(tap(() => this.close(false)));
+    }
+    update(id, entityValue) {
+        // console.log(
+        //   `SPCreateEditEntityHostComponent.update - id: ${String(
+        //     id
+        //   )}, entity: ${entityValue}`
+        // );
+        const crudComponent = this.entityCrudComponentBase();
+        return crudComponent?.update(id, entityValue).pipe(tap(() => this.close(false)));
+    }
+    /**
+     * Creates the client view provided via template
+     */
+    createClientView() {
+        /** Render preview component if one was provided */
+        const ft = this.clientViewTemplate();
+        const vc = this.vc();
+        if (ft && vc) {
+            this.clientFormView = vc.createEmbeddedView(ft, {
+                $implicit: {
+                    bridge: this,
+                    entity: this.entity(),
+                    params: this.params()
+                },
+            });
+            this.clientFormView.detectChanges();
+        }
+    }
+    destroyClientView() {
+        if (this.clientFormView) {
+            this.clientFormView.destroy();
+            this.clientFormView = null;
+        }
+    }
+    onClose() {
+        // Can we give the client form component a chance to intercept this
+        // and cancel the closure?
+        if (this.entityCrudComponentBase().canCancelEdit()) {
+            this.entityCrudComponentBase().closeCreateEdit(true);
+            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.2.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 }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: true, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <div spHostBusyWheel="formBusyWheel">
+      <div class="create-edit-topbar">
+        <div class="title">
+          {{ title() }}
+        </div>
+        <div class="spacer"></div>
+        <div class="close">
+          <button mat-icon-button (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+      </div>
+      <ng-container #clientFormContainer></ng-container>
+    </div>
+  `, isInline: true, styles: [".create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.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: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, SPMatHostBusyWheelDirective], selector: 'sp-create-edit-entity-host', template: `
+    <div spHostBusyWheel="formBusyWheel">
+      <div class="create-edit-topbar">
+        <div class="title">
+          {{ title() }}
+        </div>
+        <div class="spacer"></div>
+        <div class="close">
+          <button mat-icon-button (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+      </div>
+      <ng-container #clientFormContainer></ng-container>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PreviewHostComponent {
+    vc = viewChild('previewComponent', { read: ViewContainerRef });
+    entityCrudComponentBase = input.required();
+    clientViewTemplate = input(null);
+    entity = signal(undefined);
+    clientView;
+    constructor() {
+        // effect(() => {
+        //   const tmpl = this.clientViewTemplate();
+        //   this.createClientView(tmpl);
+        // });
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    show(entity, params) {
+        this.entity.set(entity);
+        // if (params && params?.title) {
+        //   this.title.set(params.title);
+        // } else {
+        //   this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.itemLabel()));
+        // }
+        // this.params.set(params);
+        this.createClientView();
+    }
+    close() {
+        // this.entityCrudComponentBase().closeCreateEdit(cancel);
+        // destroy the client's form component
+        this.destroyClientView();
+    }
+    createClientView() {
+        if (this.clientView) {
+            // We have only one view in the ng-container. So we might as well
+            // call clear() to remove all views contained in it.
+            this.vc().clear();
+            this.clientView.destroy();
+        }
+        /** Render preview component if one was provided */
+        const ft = this.clientViewTemplate();
+        const vc = this.vc();
+        if (ft && vc) {
+            this.clientView = this.vc().createEmbeddedView(ft, {
+                $implicit: {
+                    entity: this.entity(),
+                    entityCrudComponent: this.entityCrudComponentBase(),
+                },
+            });
+            this.clientView.detectChanges();
+        }
+    }
+    destroyClientView() {
+        if (this.clientView) {
+            this.clientView.destroy();
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: PreviewHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [],
+                    selector: 'sp-entity-crud-preview-host',
+                    template: ` <ng-container #previewComponent></ng-container> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [] });
+
+class SPMatEntityCrudComponent extends SPMatEntityListComponent {
+    snackBar;
+    // entityName = input.required<string>();
+    // entityNamePlural = input<string>();
+    itemLabel = input();
+    itemLabelPlural = input();
+    /**
+     * Title string displayed above the component. If not specified, will use
+     * itemLabelPlural() as the title.
+     */
+    title = input();
+    /**
+     *
+     */
+    itemActions = input([]);
+    /**
+     * 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();
+    /**
+     * If not specified, will use label from SPMatEntityCrudConfig.i18n.newItemLabel.
+     */
+    newItemLabel = input();
+    /**
+     * Text for the Edit <item> pane title
+     */
+    editItemTitle = input();
+    /**
+     * 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();
+    /**
+     * 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();
+    /**
+     * Item preview template.
+     */
+    previewTemplate = input();
+    /**
+     * Whether to allow a context menu action or not. Return false to disable
+     * the action.
+     */
+    allowEntityActionFn = input();
+    /**
+     * A template that allows the header to be replaced. Usage:-
+     *
+     *    ```
+     *    <sp-map-entity-crud
+     *      [headerTemplate]="myCrudViewHeader"
+     *    ></sp-map-entity-crud>
+     *    <ng-template #myCrudViewHeader>...</ng-template>
+     *    ```
+     */
+    headerTemplate = input();
+    /**
+     * Set this to the custom template identifier that will replace the
+     * "New {{Item}}" button portion. This template will expand towards the
+     * title which will be placed to its left (right in rtl).
+     *
+     *    ```
+     *    <sp-map-entity-crud
+     *      [actionsTemplate]="myCrudActions"
+     *    ></sp-map-entity-crud>
+     *    <ng-template #myCrudActions>...</ng-template>
+     *    ```
+     */
+    actionsTemplate = input();
+    /**
+     * 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();
+    /**
+     * An ng-template name that contains the component which provides the
+     * create/edit CRUD action.
+     *
+     *  ```
+     *  <ng-template #createEdit let-data>
+     *    <app-create-edit-entity-demo [bridge]="data.bridge" [entity]="data.entity"></app-create-edit-entity-demo>
+     *  </ng-template>
+     *  ```
+     * Note how [bridge] & [entity] properties are set deriving them from the
+     * implicit template context. [entity] will be undefined for Create
+     * opreation and will be the valid entity for an Update.
+     * (app-create-edit-entity-demo here is the client code that implements the
+     * Create/Edit form)
+     */
+    createEditFormTemplate = input(null);
+    /**
+     * Disables the per item actions column, preventing 'Edit' & 'Delete'
+     * (and other user defined) item operations.
+     */
+    disableItemActions = input(false);
+    /**
+     * Disables the Create function.
+     */
+    disableCreate = input(false);
+    /**
+     * View refresh policy after a CREATE/UPDATE operation. Values
+     *  'none'   - Objects are not refreshed after an edit operation. The return
+     *             value of the edit operation is used as the object to
+     *             add/update the component's internal store. This is the default.
+     *  'object' - Refresh just the object that was returned from the
+     *             CREATE/UPDATE operation. Use this if the JSON object returned
+     *             after a successful CREATE/UPDATE op differs from the JSON
+     *             object returned for the GET request.
+     *  'all'    - Refresh the entire list after a CREATE/UPDATE operation. This
+     *             mimics the behaviour of legacy HTML apps with pure server
+     *             defined UI.
+     */
+    refreshAfterEdit = input('none');
+    /**
+     * HttpContext for crud requests - list, create, retrieve, update & delete.
+     * The value can be an object where the property names reflect the CRUD
+     * methods with each of these keys taking
+     * `[[HttpContextToken<any>, any]] | [HttpContextToken<any>, any]` as its
+     * value. This object has a special key 'crud', which if given a value for,
+     * would be used for all CRUD requests (CREATE|READ|UPDATE|DELETE).
+     *
+     * Alternatively the property can be set a
+     * `[[HttpContextToken<any>, any]] | [HttpContextToken<any>, any]` as its
+     * value, in which case the same context would be used for all HTTP requests.
+     */
+    crudHttpReqContext = input();
+    /**
+     * Width of the edit pane as a percentange of the overall <as-split> width.
+     */
+    editPaneWidth = input(100);
+    /**
+     * Width of the preview pane as a percentange of the overall <as-split> width.
+     */
+    previewPaneWidth = input(50);
+    // 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
+    // converts the camelCase to 'Title Case' and returns it.
+    getLabel = (source) => {
+        const label = this.ngxHelperConfig.i18nTranslate(source);
+        if (label.localeCompare(source) !== 0) {
+            // Successful translation, return it
+            return label;
+        }
+        return startCase(source);
+    };
+    _itemLabel = computed(() => this.itemLabel()
+        ? this.itemLabel()
+        : this.getLabel(this.entityName()));
+    _itemLabelPlural = computed(() => this.itemLabelPlural()
+        ? this.itemLabelPlural()
+        : this.getLabel(plural(this.entityName())));
+    // Computed title
+    _title = computed(() => this.title() ? this.title() : this._itemLabelPlural());
+    // endpoint with the QP string removed (if one was provided)
+    _endpointSansParams = computed(() => this.endpoint().split('?')[0]);
+    _endpointParams = computed(() => { });
+    componentColumns = viewChildren(MatColumnDef);
+    _clientColumnDefs;
+    /**
+     * Event raised for user selecting an item action. It's also raised
+     * for 'New <Item>' action, if 'newItemLink' property is not set.
+     */
+    action = new EventEmitter();
+    /**
+     * Event raised when create Create/Edit pane is activated & deactivated.
+     * Event contains two flags:-
+     *  activated - whether the createEdit form view was activated or
+     *              deactivated.
+     *  cancelled - whether the form view was cancelled by user. False for this
+     *              indicates that the form view was closed after a successful
+     *              edit operation.
+     */
+    entityViewPaneActivated = new EventEmitter();
+    busyWheelId = `entityCrudBusyWheel-${Date.now()}`;
+    sub$ = new Subscription();
+    spEntitiesList = viewChild((SPMatEntityListComponent));
+    crudConfig;
+    // This is the internal component that will host the createEditFormTemplate
+    createEditHostComponent = viewChild(FormViewHostComponent);
+    // A flag to toggle the viewport's contents between the mat-table
+    // and the create/edit form template.
+    createEditViewActive = signal(false);
+    // Whether it's okay to cancel the edit
+    canCancelEditCallback;
+    // Preview host component
+    previewHostComponent = viewChild(PreviewHostComponent);
+    previewActive = computed(() => this.previewedEntity() !== undefined);
+    previewedEntity = signal(undefined);
+    // 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());
+    // Effective width of the entity pane.
+    entityPaneWidth = computed(() => !!this.previewedEntity() ? this.previewPaneWidth() : this.editPaneWidth());
+    // 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([]);
+    columnsWithAction = computed(() => {
+        const cols = JSON.parse(JSON.stringify(this.columns()));
+        // JSON.parse(JSON.strigify()) does not clone function objects. So
+        // explicitly copy these over. So this is really a shallow clone as
+        // the cloned objects still refers to the function objects in the original
+        // object.
+        this.columns().forEach((col, index, orgColumns) => {
+            const orgCol = orgColumns[index];
+            if (typeof orgCol !== 'string') {
+                const newColumn = cols[index];
+                if (orgCol.valueFn) {
+                    newColumn.valueFn = orgCol.valueFn;
+                }
+                if (orgCol.valueOptions) {
+                    newColumn.valueOptions = orgCol.valueOptions;
+                }
+            }
+        });
+        const actionDefined = cols.find((c) => typeof c === 'string' ? c === 'action' : c.name === 'action') !== undefined;
+        if (!actionDefined && !this.disableItemActions()) {
+            cols.push('action');
+        }
+        return cols;
+    });
+    // Use a custom computed() signal to derive the action items for each
+    // entity so that we can run per item's allow item action function to
+    // selectively disable one or more actions based on the item's state.
+    _itemActions = computed(() => {
+        const actions = this.itemActions() && this.itemActions().length
+            ? this.itemActions()
+            : this.defaultItemCrudActions();
+        let actionsCopy = JSON.parse(JSON.stringify(actions));
+        actionsCopy.forEach((action, index) => {
+            const orgDisable = actions[index]?.disable;
+            action.disable = (entity) => {
+                if (orgDisable) {
+                    return orgDisable(entity);
+                }
+                const allowItemActionFn = this.allowEntityActionFn();
+                if (allowItemActionFn) {
+                    return !allowItemActionFn(entity, action.role ?? action.label);
+                }
+                return false;
+            };
+        });
+        return actionsCopy;
+    });
+    // This uses the previewActive signal to compute the visible columns
+    // when preview is activated. For now we just hide the 'action' column when
+    // preview is active. We can further customize this logic by allowing the
+    // client to specify the columns to display when preview is active thereby
+    // reducing column clutter when the table width becomes narrower owing to
+    // preview pane taking up screen space.
+    visibleColumns = computed(() => this.entityPaneActive()
+        ? this.columnsWithAction()
+            .map((col) => (typeof col === 'string' ? col : col.name))
+            .filter((name) => name !== 'action')
+        : []);
+    constructor(http, snackBar, sanitizer, injector) {
+        super(http, sanitizer, injector);
+        this.snackBar = snackBar;
+        this.crudConfig = getEntityCrudConfig();
+        if (this.crudConfig?.defaultItemActions) {
+            this.defaultItemCrudActions.set(this.crudConfig?.defaultItemActions);
+        }
+        else {
+            this.defaultItemCrudActions.set([
+                { label: this.crudConfig.i18n.edit, role: '_update_' },
+                { label: this.crudConfig.i18n.delete, role: '_delete_' },
+            ]);
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.sub$.unsubscribe();
+    }
+    ngAfterViewInit() {
+        const spEntitiesList = this.spEntitiesList();
+        if (spEntitiesList) {
+            // Build contentColumnDefs using our component's content. Then add our own
+            // 'action' column definition to it. Then set this as the value of
+            // child SPMatEntityListComponent.contentColumnDef. This way we force
+            // SPMatEntityListComponent to use our component's any project MatColumnDef
+            // content in the final mat-table.
+            const clientColumnDefs = this.clientColumnDefs;
+            if (clientColumnDefs && spEntitiesList) {
+                // Note that we process any content projected matColumnDef first and
+                // our own internal content later. And when we process our own internal
+                // columns (for now only 'action'), it's not added if a column with that
+                // name has already been defined via content projection. This allows the
+                // clients to override even internal columns with their column defintion.
+                let contentColumnDefs = new Array();
+                clientColumnDefs.toArray().forEach((c) => contentColumnDefs.push(c));
+                this.componentColumns().forEach((ic) => {
+                    if (!contentColumnDefs.find((c) => c.name === ic.name)) {
+                        contentColumnDefs.push(ic);
+                    }
+                });
+                spEntitiesList.contentColumnDefs = contentColumnDefs;
+            }
+            // This is a replication of SPMatEntityCrudList.ngAfterViewInit. That
+            // code is skipped as we declare set the _deferViewInit=true in
+            // sp-mat-entity-list declaration.
+            spEntitiesList.buildColumns();
+            spEntitiesList.setupSort();
+            spEntitiesList.loadMoreEntities();
+        }
+    }
+    /**
+     * If the create/edit entity form is active, it calls its registered
+     * canCancelEdit callback to determine if it's okay to cancel the edit.
+     * You can use this method from the host component's router guard to
+     * ensure that any changes made to the form are not accidentally lost by
+     * navigating away from the CRUD page.
+     *
+     * If your CRUD page has multiple sp-mat-entity-crud components, you have to
+     * implement the logic to call this method on the appropriate component.
+     *
+     * If the the create/edit form is not active, this method returns true.
+     * @returns
+     */
+    canDeactivate() {
+        if (this.createEditViewActive()) {
+            return this.canCancelEdit();
+        }
+        return true;
+    }
+    refresh() {
+        this.spEntitiesList()?.refresh();
+    }
+    closeCreateEdit(cancelled) {
+        this.createEditViewActive.set(false);
+        this.entityViewPaneActivated.emit({ activated: false, cancelled: !!cancelled, mode: 'edit' });
+    }
+    canCancelEdit() {
+        if (this.canCancelEditCallback) {
+            return this.canCancelEditCallback();
+        }
+        return true;
+    }
+    registerCanCancelEditCallback(callback) {
+        this.canCancelEditCallback = callback;
+    }
+    triggerEntityUpdate(entity) {
+        this.onUpdate(entity);
+    }
+    triggerEntityDelete(entity) {
+        this.onDelete(entity);
+    }
+    create(entityValue) {
+        let obs;
+        const crudOpFn = this.crudOpFn();
+        if (crudOpFn) {
+            obs = crudOpFn('create', undefined, entityValue, this);
+        }
+        else {
+            obs = this.http.post(this.getUrl(this.endpoint()), entityValue, {
+                context: this.getCrudReqHttpContext('create'),
+            });
+        }
+        return obs.pipe(showBusyWheelUntilComplete('formBusyWheel'), switchMap((resp) => resp ? this.doRefreshAfterEdit(resp, 'create') : of(null)), tap((entity) => {
+            // If pagination is infinite or if the pagination if none or if the
+            // count of items in the current page is less than pageSize()
+            // wec an safely add the item to the list, which will cause the view
+            // render the new item in the mat-table.
+            if (entity) {
+                this.spEntitiesList()?.addEntity(entity);
+                this.snackBar.open(this.crudConfig.i18n.createdItemNotification(this._itemLabel()));
+            }
+        }));
+    }
+    update(id, entityValue) {
+        let obs;
+        const crudOpFn = this.crudOpFn();
+        if (crudOpFn) {
+            obs = crudOpFn('update', id, entityValue, this);
+        }
+        else {
+            obs = this.http.patch(this.getEntityUrl(id), entityValue, {
+                context: this.getCrudReqHttpContext('update'),
+            });
+        }
+        return obs.pipe(showBusyWheelUntilComplete('formBusyWheel'), switchMap((resp) => resp ? this.doRefreshAfterEdit(resp, 'update') : of(null)), tap((entity) => {
+            if (entity) {
+                this.spEntitiesList()?.updateEntity(id, entity);
+                this.snackBar.open(this.crudConfig.i18n.updatedItemNotification(this._itemLabel()));
+            }
+        }));
+    }
+    /**
+     * Refresh the entity list, after a CRUD CREATE or UPDATE operation.
+     * @param resp This is the response from the CRUD operation (CREATE/UPDATE).
+     * @param method The CRUD operation post which REFRESH is requested.
+     * @returns Observable<TEntity|null>
+     */
+    doRefreshAfterEdit(resp, method) {
+        const refreshAfterEdit = this.refreshAfterEdit();
+        const entity = this.getCrudOpResponseParser()(this.entityName(), this.idKey(), method, resp);
+        if (refreshAfterEdit === 'object') {
+            let obs;
+            const crudOpFn = this.crudOpFn();
+            if (crudOpFn) {
+                obs = crudOpFn('get', entity[this.idKey()], undefined, this);
+            }
+            else {
+                obs = this.http.get(this.getEntityUrl(entity[this.idKey()]), { context: this.getCrudReqHttpContext('retrieve') });
+            }
+            return obs.pipe(map((entity) => {
+                return this.getCrudOpResponseParser()(this.entityName(), this.idKey(), 'retrieve', entity);
+            }));
+        }
+        else if (refreshAfterEdit === 'all') {
+            this.spEntitiesList()?.refresh();
+            return of(null);
+        }
+        return of(entity);
+    }
+    getCrudOpResponseParser() {
+        if (this.crudResponseParser()) {
+            // Without the `as SPMatEntityCrudResponseParser`, TSC will complain.
+            return this.crudResponseParser();
+        }
+        // crudConfig will have a parser as our default config provides one.
+        return this.crudConfig
+            .crudOpResponseParser;
+    }
+    // SPMatEntityCrudComponentBase interface method. Thunk to the implementation
+    // method closePreviewImpl().
+    closePreview() {
+        this.closePreviewImpl(true);
+    }
+    closePreviewImpl(toggleEntityListActiveEntity) {
+        if (this.previewedEntity()) {
+            if (toggleEntityListActiveEntity) {
+                this.spEntitiesList()?.toggleActiveEntity(this.previewedEntity());
+            }
+            this.previewedEntity.set(undefined);
+            this.entityViewPaneActivated.emit({ activated: false, cancelled: undefined, mode: 'preview' });
+        }
+    }
+    onItemAction(role, entity) {
+        if (role === '_update_') {
+            this.onUpdate(entity);
+        }
+        else if (role === '_delete_') {
+            this.onDelete(entity);
+        }
+        else {
+            this.action.emit({ role, entity });
+        }
+    }
+    onCreate(event) {
+        // If newItemLink() has not been provided, check if createEditFormTemplate
+        // is specified. If it is, load it and make that cover the entire viewport.
+        // If that too is not specified, emit an action event with role='_new_'.
+        if (!this.newItemLink() || this.newItemLink()?.length == 0) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const params = {
+                title: this.newItemLabel() ?? this.crudConfig.i18n.newItemLabel(this._itemLabel()),
+            };
+            this.showCreateEditView(undefined, params);
+            // const tmpl = this.createEditFormTemplate();
+            // if (tmpl) {
+            //   // If preview is active deactivate it
+            //   if (this.previewActive()) {
+            //     this.closePreview();
+            //   }
+            //   const createEditHost = this.createEditHostComponent();
+            //   createEditHost!.show(undefined);
+            //   this.createEditViewActive.set(true);
+            // }
+        }
+        if (!this.createEditViewActive()) {
+            this.action.emit({ role: '_new_' });
+        }
+    }
+    onUpdate(entity) {
+        const params = {
+            title: this.editItemTitle() ?? this.crudConfig.i18n.editItemLabel(this._itemLabel()),
+        };
+        this.showCreateEditView(entity, params);
+        // const tmpl = this.createEditFormTemplate();
+        // if (tmpl) {
+        //   // If preview is active deactivate it
+        //   if (this.previewActive()) {
+        //     this.closePreview();
+        //   }
+        //   const createEditHost = this.createEditHostComponent();
+        //   if (tmpl && createEditHost) {
+        //     createEditHost.show(entity);
+        //     this.createEditViewActive.set(true);
+        //   }
+        // }
+        if (!this.createEditViewActive()) {
+            this.action.emit({ role: '_update_' });
+        }
+    }
+    /**
+     * Show the create/edit component. This is deliberately made public so as to
+     * be callable from the client. This allows the client to dynamically
+     * set the form edit template and then show the edit pane by calling this
+     * method.
+     * @param entity
+     * @param params
+     */
+    showCreateEditView(entity, params) {
+        const tmpl = this.createEditFormTemplate();
+        if (!this.createEditViewActive() && !this.previewActive() && tmpl) {
+            // If preview is active deactivate it
+            if (this.previewActive()) {
+                this.closePreviewImpl(true);
+            }
+            const createEditHost = this.createEditHostComponent();
+            createEditHost.show(entity, params);
+            this.createEditViewActive.set(true);
+            this.entityViewPaneActivated.emit({ activated: true, cancelled: undefined, mode: 'edit' });
+        }
+    }
+    showPreviewView(entity, params) {
+        const tmpl = this.previewTemplate();
+        if (tmpl) {
+            if (!this.createEditViewActive()) {
+                const previewHost = this.previewHostComponent();
+                this.previewedEntity.set(entity);
+                previewHost?.show(entity, params);
+                this.entityViewPaneActivated.emit({ activated: true, cancelled: undefined, mode: 'preview' });
+                // this.previewActivated.emit({ entity, activated: true });
+            }
+        }
+    }
+    hidePreviewView() {
+        if (this.previewActive()) {
+            const previewHost = this.previewHostComponent();
+            previewHost?.close();
+            this.closePreviewImpl(false);
+        }
+    }
+    async onDelete(entity) {
+        // Do the delete prompt asynchronously so that the context menu is
+        // dismissed before the prompt is displayed.
+        setTimeout(() => {
+            const deletedItemPrompt = this.crudConfig.i18n.deleteItemMessage(this._itemLabel());
+            const yes = confirm(deletedItemPrompt);
+            if (yes) {
+                const entityId = entity[this.idKey()];
+                // If preview is active deactivate it
+                if (this.previewActive()) {
+                    this.closePreviewImpl(false);
+                }
+                let obs;
+                const crudOpFn = this.crudOpFn();
+                if (crudOpFn) {
+                    obs = crudOpFn('delete', entityId, undefined, this);
+                }
+                else {
+                    obs = this.http.delete(this.getEntityUrl(entityId), {
+                        context: this.getCrudReqHttpContext('delete'),
+                    });
+                }
+                this.sub$.add(obs
+                    .pipe(
+                // TODO: how to display a busy wheel?
+                // showBusyWheelUntilComplete(this.busyWheelId),
+                tap(() => {
+                    this.spEntitiesList().removeEntity(entityId);
+                    // TODO: customize by providing an interface via SPMatEntityCrudConfig?
+                    const deletedMessage = this.crudConfig.i18n.itemDeletedNotification(this._itemLabel());
+                    this.snackBar.open(deletedMessage);
+                }))
+                    .subscribe());
+            }
+        });
+    }
+    getUrl(endpoint) {
+        return this.entityListConfig?.urlResolver
+            ? this.entityListConfig?.urlResolver(endpoint)
+            : endpoint;
+    }
+    getEntityUrl(entityId) {
+        const endpoint = this.endpoint();
+        const endpointParts = endpoint.split('?');
+        const entityEndpoint = (endpointParts[0].endsWith('/')
+            ? endpointParts[0]
+            : endpointParts[0] + '/') + `${String(entityId)}/`;
+        if (endpointParts.length > 1) {
+            return this.getUrl(entityEndpoint + `?${endpointParts[1]}`);
+        }
+        return this.getUrl(entityEndpoint);
+    }
+    handleSelectEntity(entity) {
+        if (!this.createEditViewActive()) {
+            if (this.previewTemplate()) {
+                entity ? this.showPreviewView(entity) : this.hidePreviewView();
+                // this.previewedEntity.set(entity);
+            }
+            else {
+                // If 'previewTemplate' is not set, propagate the event to client.
+                this.selectEntity.emit(entity);
+            }
+        }
+    }
+    handleNewItemSubType(subtype) {
+        // console.log(`handleNewItemSubType: ${subtype}`);
+        if (subtype.role === '_new_') {
+            this.showCreateEditView(undefined, subtype?.params);
+        }
+        else {
+            this.action.emit({ role: subtype.role });
+        }
+    }
+    getCrudReqHttpContext(op) {
+        const contextParamToHttpContext = (context, reqContext) => {
+            if (reqContext.length == 2 && !Array.isArray(reqContext[0])) {
+                // one dimensional array of a key, value pair.
+                context.set(reqContext[0], reqContext[1]);
+            }
+            else {
+                reqContext.forEach(([k, v]) => context.set(k, v));
+            }
+        };
+        let context = new HttpContext();
+        const crudHttpReqContext = this.crudHttpReqContext();
+        if (crudHttpReqContext) {
+            if (Array.isArray(crudHttpReqContext)) {
+                // Same HttpContext for all crud requests
+                contextParamToHttpContext(context, crudHttpReqContext);
+            }
+            else if (typeof crudHttpReqContext === 'object' &&
+                op &&
+                crudHttpReqContext[op]) {
+                contextParamToHttpContext(context, crudHttpReqContext[op]);
+                // if (crudHttpReqContext[op]) {
+                //   context = contextParamToHttpContext(crudHttpReqContext[op] as any);
+                // } else if (crudHttpReqContext['crud']) {
+                //   context = contextParamToHttpContext(crudHttpReqContext['crud'] as any);
+                // }
+            }
+            // } else if (this.httpReqContext()) {
+            //   context = contextParamToHttpContext(this.httpReqContext()!);
+        }
+        context.set(SP_MAT_ENTITY_CRUD_HTTP_CONTEXT, {
+            entityName: this.entityName(),
+            entityNamePlural: this._entityNamePlural(),
+            endpoint: this.endpoint(),
+            op,
+        });
+        return context;
+        // const httpReqContext = this.httpReqContext();
+        // return httpReqContext
+        //   ? contextParamToHttpContext(httpReqContext)
+        //   : undefined;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, deps: [{ token: i1$1.HttpClient }, { token: i2$1.MatSnackBar }, { token: i3.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 } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: (SPMatEntityListComponent), 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">
+      <as-split-area [size]="entitiesPaneWidth()" [visible]="!entitiesPaneHidden()">
+        <div
+          [class]="crudConfig.listPaneWrapperClass"
+        >
+          <ng-content select="[breadCrumbs]"></ng-content>
+
+          <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() ??
+                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                }}&nbsp;&#9660;
+                <!-- down arrow-head -->
+              </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 {
+              <button
+                mat-raised-button
+                color="primary"
+                (click)="onCreate($event)"
+                [routerLink]="newItemLink()"
+              >
+                {{
+                  newItemLabel() ??
+                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                }}
+              </button>
+              } }
+            </div>
+          </ng-template>
+
+          <ng-template #defaultHeaderTemplate>
+            <div class="action-bar">
+              <div class="action-bar-title">
+                {{ _title() }}
+              </div>
+              <span class="spacer"></span>
+            <!-- Hide the action buttons when Preview/Edit pane is active -->
+              @if (!entityPaneActive()) {
+                <ng-container
+                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+                ></ng-container>
+              }
+            </div>
+          </ng-template>
+          <ng-container
+            [ngTemplateOutlet]="headerTemplate() || defaultHeaderTemplate"
+          ></ng-container>
+          <sp-mat-entity-list
+            [entityName]="entityName()"
+            [entityNamePlural]="entityNamePlural()"
+            [_deferViewInit]="true"
+            [endpoint]="endpoint()"
+            [entityLoaderFn]="entityLoaderFn()"
+            [columns]="columnsWithAction()"
+            [displayedColumns]="visibleColumns()"
+            [idKey]="idKey()"
+            [pagination]="pagination()"
+            [paginator]="paginator()"
+            [pageSize]="pageSize()"
+            [sorter]="sorter()"
+            [disableSort]="disableSort()"
+            (selectEntity)="handleSelectEntity($event)"
+            [httpReqContext]="httpReqContext()"
+          >
+          </sp-mat-entity-list>
+        </div>
+
+        <!--
+        We'll be initializing the contentColumnDefs separately and not
+        relying on <sp-mat-entity-list>'s internal @ContentChildre() querylist
+        for building this. So we define this independenly and not as
+        <sp-mat-entity-list> content.
+        -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef></th>
+          <td
+            mat-cell
+            *matCellDef="let element"
+            (click)="$event.stopImmediatePropagation()"
+          >
+            @if (_itemActions().length) {
+            <sp-mat-context-menu
+              [menuItems]="_itemActions()"
+              (selected)="onItemAction($event, element)"
+              [contextData]="element"
+              [hasBackdrop]="true"
+            ></sp-mat-context-menu>
+            }
+          </td>
+        </ng-container>
+
+        <!--
+        <div
+          [class]="crudConfig.listPaneWrapperClass"
+          [ngStyle]="{ display: createEditViewActive() ? 'inherit' : 'none' }"
+          spHostBusyWheel="formBusyWheel"
+        >
+          <ng-content select="[breadCrumbs]"></ng-content>
+          <sp-create-edit-entity-host
+            [itemLabel]="_itemLabel()"
+            [itemLabelPlural]="_itemLabelPlural()"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="createEditFormTemplate()"
+          ></sp-create-edit-entity-host>
+        </div>
+        -->
+      </as-split-area>
+      <as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
+        <div [class]="crudConfig.previewPaneWrapperClass" spHostBusyWheel="formBusyWheel">
+          <sp-entity-crud-preview-host
+            [ngClass]="createEditViewActive() ? 'd-none' : 'd-inherit'"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="previewTemplate()!"
+          ></sp-entity-crud-preview-host>
+          <!-- Create/Edit Entity -->
+          <sp-create-edit-entity-host
+            [ngClass]="createEditViewActive() ? 'd-inherit' : 'd-none'"
+            [itemLabel]="_itemLabel()"
+            [itemLabelPlural]="_itemLabelPlural()"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="createEditFormTemplate()"
+          ></sp-create-edit-entity-host>
+        </div>
+      </as-split-area>
+    </as-split>
+  `, isInline: true, styles: [".d-none{display:none}.d-inherit{display:inherit}.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: i1.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: AngularSplitModule }, { kind: "component", type: i9.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: i9.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", "itemLabel", "itemLabelPlural"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatMenuModule,
+                        MatSnackBarModule,
+                        AngularSplitModule,
+                        SPMatEntityListComponent,
+                        SPMatContextMenuComponent,
+                        FormViewHostComponent,
+                        SPMatHostBusyWheelDirective,
+                        PreviewHostComponent,
+                    ], selector: 'sp-mat-entity-crud', template: `
+    <as-split direction="horizontal" [gutterSize]="6">
+      <as-split-area [size]="entitiesPaneWidth()" [visible]="!entitiesPaneHidden()">
+        <div
+          [class]="crudConfig.listPaneWrapperClass"
+        >
+          <ng-content select="[breadCrumbs]"></ng-content>
+
+          <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() ??
+                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                }}&nbsp;&#9660;
+                <!-- down arrow-head -->
+              </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 {
+              <button
+                mat-raised-button
+                color="primary"
+                (click)="onCreate($event)"
+                [routerLink]="newItemLink()"
+              >
+                {{
+                  newItemLabel() ??
+                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                }}
+              </button>
+              } }
+            </div>
+          </ng-template>
+
+          <ng-template #defaultHeaderTemplate>
+            <div class="action-bar">
+              <div class="action-bar-title">
+                {{ _title() }}
+              </div>
+              <span class="spacer"></span>
+            <!-- Hide the action buttons when Preview/Edit pane is active -->
+              @if (!entityPaneActive()) {
+                <ng-container
+                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+                ></ng-container>
+              }
+            </div>
+          </ng-template>
+          <ng-container
+            [ngTemplateOutlet]="headerTemplate() || defaultHeaderTemplate"
+          ></ng-container>
+          <sp-mat-entity-list
+            [entityName]="entityName()"
+            [entityNamePlural]="entityNamePlural()"
+            [_deferViewInit]="true"
+            [endpoint]="endpoint()"
+            [entityLoaderFn]="entityLoaderFn()"
+            [columns]="columnsWithAction()"
+            [displayedColumns]="visibleColumns()"
+            [idKey]="idKey()"
+            [pagination]="pagination()"
+            [paginator]="paginator()"
+            [pageSize]="pageSize()"
+            [sorter]="sorter()"
+            [disableSort]="disableSort()"
+            (selectEntity)="handleSelectEntity($event)"
+            [httpReqContext]="httpReqContext()"
+          >
+          </sp-mat-entity-list>
+        </div>
+
+        <!--
+        We'll be initializing the contentColumnDefs separately and not
+        relying on <sp-mat-entity-list>'s internal @ContentChildre() querylist
+        for building this. So we define this independenly and not as
+        <sp-mat-entity-list> content.
+        -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef></th>
+          <td
+            mat-cell
+            *matCellDef="let element"
+            (click)="$event.stopImmediatePropagation()"
+          >
+            @if (_itemActions().length) {
+            <sp-mat-context-menu
+              [menuItems]="_itemActions()"
+              (selected)="onItemAction($event, element)"
+              [contextData]="element"
+              [hasBackdrop]="true"
+            ></sp-mat-context-menu>
+            }
+          </td>
+        </ng-container>
+
+        <!--
+        <div
+          [class]="crudConfig.listPaneWrapperClass"
+          [ngStyle]="{ display: createEditViewActive() ? 'inherit' : 'none' }"
+          spHostBusyWheel="formBusyWheel"
+        >
+          <ng-content select="[breadCrumbs]"></ng-content>
+          <sp-create-edit-entity-host
+            [itemLabel]="_itemLabel()"
+            [itemLabelPlural]="_itemLabelPlural()"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="createEditFormTemplate()"
+          ></sp-create-edit-entity-host>
+        </div>
+        -->
+      </as-split-area>
+      <as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
+        <div [class]="crudConfig.previewPaneWrapperClass" spHostBusyWheel="formBusyWheel">
+          <sp-entity-crud-preview-host
+            [ngClass]="createEditViewActive() ? 'd-none' : 'd-inherit'"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="previewTemplate()!"
+          ></sp-entity-crud-preview-host>
+          <!-- Create/Edit Entity -->
+          <sp-create-edit-entity-host
+            [ngClass]="createEditViewActive() ? 'd-inherit' : 'd-none'"
+            [itemLabel]="_itemLabel()"
+            [itemLabelPlural]="_itemLabelPlural()"
+            [entityCrudComponentBase]="this"
+            [clientViewTemplate]="createEditFormTemplate()"
+          ></sp-create-edit-entity-host>
+        </div>
+      </as-split-area>
+    </as-split>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".d-none{display:none}.d-inherit{display:inherit}.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$1.HttpClient }, { type: i2$1.MatSnackBar }, { type: i3.DomSanitizer }, { type: i0.Injector }], propDecorators: { _clientColumnDefs: [{
+                type: ContentChildren,
+                args: [MatColumnDef]
+            }], action: [{
+                type: Output
+            }], entityViewPaneActivated: [{
+                type: Output
+            }] } });
+
+/**
+ * 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);
+    config;
+    constructor() {
+        this.config = getEntityCrudConfig();
+    }
+    ngOnInit() {
+    }
+    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 ' + (config.previewPaneContentClass ?? '')">
+      <ng-content select="[previewContent]"></ng-content>
+    </div>
+  </div>
+  `, isInline: true, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%}.spacer{flex:1 1 auto}.preview-content{flex-grow:1;overflow:scroll}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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 ' + (config.previewPaneContentClass ?? '')">
+      <ng-content select="[previewContent]"></ng-content>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%}.spacer{flex:1 1 auto}.preview-content{flex-grow:1;overflow:scroll}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * This is a convenience base class that clients can derive from to implement
+ * their CRUD form component. Particularly this class registers the change
+ * detection hook which will be called when the user attempts to close the
+ * form's parent container pane via the Close button on the top right.
+ *
+ * This button behaves like a Cancel button in a desktop app and therefore if
+ * the user has entered any data in the form's controls, (determined by
+ * checking form.touched), then a 'Lose Changes' prompt is displayed allowing
+ * the user to cancel the closure.
+ *
+ * The @Component is fake just to keep the VSCode angular linter quiet.
+ *
+ * To use this class:-
+ *
+ * 1. Declare a FormGroup<> type as
+ *
+ *      ```
+ *      type MyForm = FormGroup<{
+ *        name: FormControl<string>;
+ *        type: FormControl<string>;
+ *        notes: FormControl<string>;
+ *      }>;
+ *      ```
+ *
+ * 2. Derive your form's component class from this and implement the
+ *    createForm() method returing the FormGroup<> instance that matches
+ *    the FormGroup concrete type above.
+ *
+ *    ```
+ *    class MyFormComponent extends SPMatEntityCrudFormBase<MyForm, MyEntity> {
+ *      constructor() {
+ *        super()
+ *      }
+ *
+ *      createForm() {
+ *        return new FormGroup([...])
+ *      }
+ *    }
+ *    ```
+ *
+ * 3. If you form's value requires manipulation before being sent to the
+ *    server, override getFormValue() method and do it there before returning
+ *    the modified values.
+ *
+ * 4. Wire up the form in the template as:
+ *
+ *    ```
+ *    <form [formGroup]='form'.. (ngSubmit)="onSubmit()">
+ *      <button type="submit">Submit</button>
+ *    </form>
+ *    ```
+ */
+class SPMatEntityCrudFormBase {
+    _form = signal(undefined);
+    entity = input.required();
+    bridge = input.required();
+    params = input();
+    sub$ = new Subscription();
+    form = computed(() => this._form());
+    crudConfig = getEntityCrudConfig();
+    cdr = inject(ChangeDetectorRef);
+    canCancelEdit = () => {
+        return this._canCancelEdit();
+    };
+    _canCancelEdit() {
+        const form = this._form();
+        if (form && form.touched) {
+            return window.confirm(this.crudConfig.i18n.loseChangesPrompt);
+        }
+        return true;
+    }
+    ngOnInit() {
+        this._form.set(this.createForm(this.entity()));
+        this.bridge()?.registerCanCancelEditCallback(this.canCancelEdit);
+    }
+    ngOnDestroy() {
+        this.sub$.unsubscribe();
+    }
+    /**
+     * Override to customize the id key name if it's not 'id'
+     * @returns The name of the unique identifier key that will be used to
+     * extract the entity's id for UPDATE operation.
+     */
+    getIdKey() {
+        return 'id';
+    }
+    /**
+     * Return the form's value to be sent to server as Create/Update CRUD
+     * operation data.
+     * @returns
+     */
+    getFormValue() {
+        const form = this.form();
+        return form ? form.value : undefined;
+    }
+    onSubmit() {
+        const value = this.getFormValue();
+        const obs = !this.entity()
+            ? this.bridge()?.create(value)
+            : this.bridge()?.update(this.entity()[this.getIdKey()], value);
+        this.sub$.add(obs
+            ?.pipe(setServerErrorsAsFormErrors(this._form, this.cdr), tap$1((res) => {
+            if (res) {
+                // this.bridge()?.close();
+            }
+        }))
+            .subscribe());
+    }
+    /** @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: true, transformFunction: null }, bridge: { classPropertyName: "bridge", publicName: "bridge", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", 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: [{
+            type: Component,
+            args: [{
+                    selector: '_#_sp-mat-entity-crud-form-base_#_', template: ``,
+                    standalone: false
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SPMatEntityCrudComponent, SPMatEntityCrudFormBase, SPMatEntityCrudPreviewPaneComponent, SP_MAT_ENTITY_CRUD_CONFIG, SP_MAT_ENTITY_CRUD_HTTP_CONTEXT };
+//# sourceMappingURL=smallpearl-ngx-helper-mat-entity-crud.mjs.map