@smallpearl/ngx-helper 0.31.1 → 0.31.6

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

@@ -1,7 +1,7 @@
 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, effect, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, inject, input, computed, signal, viewChild, ViewContainerRef, Component, ChangeDetectionStrategy, viewChildren, EventEmitter, effect, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/button';
@@ -27,7 +27,7 @@ import * as i11 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 { Observable, of, Subscription, firstValueFrom, tap, switchMap, map } from 'rxjs';
 import * as i1$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
@@ -82,6 +82,14 @@ class FormViewHostComponent {
     clientViewTemplate = input(null);
     itemLabel = input.required();
     itemLabelPlural = input.required();
+    _itemLabel = computed(() => {
+        const label = this.itemLabel();
+        return label instanceof Observable ? label : of(label);
+    });
+    _itemLabelPlural = computed(() => {
+        const label = this.itemLabelPlural();
+        return label instanceof Observable ? label : of(label);
+    });
     entity = signal(undefined);
     title = signal('');
     params = signal(undefined);
@@ -103,10 +111,17 @@ class FormViewHostComponent {
             this.title.set(params.title);
         }
         else {
+            firstValueFrom(this._itemLabel()).then((itemLabel) => {
+                this.title.set(this.transloco.translate(entity ? 'editItem' : 'newItem', {
+                    item: itemLabel,
+                }));
+            });
             // this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.itemLabel()));
-            this.title.set(this.transloco.translate(entity ? 'editItem' : 'newItem', {
-                item: this.itemLabel(),
-            }));
+            // this.title.set(
+            //   this.transloco.translate(entity ? 'editItem' : 'newItem', {
+            //     item: this.itemLabel(),
+            //   })
+            // );
         }
         this.params.set(params);
         this.createClientView();
@@ -126,7 +141,9 @@ class FormViewHostComponent {
         //   )}`
         // );
         const crudComponent = this.entityCrudComponentBase();
-        return crudComponent?.create(entityValue).pipe(tap(() => this.close(false)));
+        return crudComponent
+            ?.create(entityValue)
+            .pipe(tap(() => this.close(false)));
     }
     update(id, entityValue) {
         // console.log(
@@ -135,7 +152,9 @@ class FormViewHostComponent {
         //   )}, entity: ${entityValue}`
         // );
         const crudComponent = this.entityCrudComponentBase();
-        return crudComponent?.update(id, entityValue).pipe(tap(() => this.close(false)));
+        return crudComponent
+            ?.update(id, entityValue)
+            .pipe(tap(() => this.close(false)));
     }
     /**
      * Creates the client view provided via template
@@ -149,7 +168,7 @@ class FormViewHostComponent {
                 $implicit: {
                     bridge: this,
                     entity: this.entity(),
-                    params: this.params()
+                    params: this.params(),
                 },
             });
             this.clientFormView.detectChanges();
@@ -189,7 +208,12 @@ class FormViewHostComponent {
 }
 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: `
+            args: [{ imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        SPMatHostBusyWheelDirective,
+                    ], selector: 'sp-create-edit-entity-host', template: `
     <div spHostBusyWheel="formBusyWheel">
       <div class="create-edit-topbar">
         <div class="title">
@@ -440,14 +464,23 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         }
         return startCase(source);
     };
-    _itemLabel = computed(() => this.itemLabel()
-        ? this.itemLabel()
-        : this.getLabel(this.entityName()));
-    _itemLabelPlural = computed(() => this.itemLabelPlural()
-        ? this.itemLabelPlural()
-        : this.getLabel(plural(this.entityName())));
+    _itemLabel = computed(() => {
+        const itemLabel = this.itemLabel();
+        const label = itemLabel ? itemLabel : this.getLabel(this.entityName());
+        return label instanceof Observable ? label : of(label);
+    });
+    _itemLabelPlural = computed(() => {
+        const itemLabelPlural = this.itemLabelPlural();
+        const label = itemLabelPlural
+            ? itemLabelPlural
+            : this.getLabel(plural(this.entityName()));
+        return label instanceof Observable ? label : of(label);
+    });
     // Computed title
-    _title = computed(() => this.title() ? this.title() : this._itemLabelPlural());
+    _title = computed(() => {
+        const title = this.title() ? this.title() : this._itemLabelPlural();
+        return title instanceof Observable ? title : of(title);
+    });
     // endpoint with the QP string removed (if one was provided)
     _endpointSansParams = computed(() => this.endpoint().split('?')[0]);
     _endpointParams = computed(() => { });
@@ -532,31 +565,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         }
         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(() => {
-        return this.getItemActions();
-        // const actions =
-        //   this.itemActions() && this.itemActions().length
-        //     ? this.itemActions()
-        //     : this.defaultItemCrudActions();
-        // let actionsCopy: SPContextMenuItem[] = JSON.parse(JSON.stringify(actions));
-        // actionsCopy.forEach((action, index: number) => {
-        //   const orgDisable = actions[index]?.disable;
-        //   action.disable = (entity: TEntity) => {
-        //     if (orgDisable) {
-        //       return orgDisable(entity);
-        //     }
-        //     const allowItemActionFn = this.allowEntityActionFn();
-        //     if (allowItemActionFn) {
-        //       return !allowItemActionFn(entity, action.role ?? action.label);
-        //     }
-        //     return false;
-        //   };
-        // });
-        // return actionsCopy;
-    });
+    // 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);
     // 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
@@ -589,16 +600,14 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             ]);
         }
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     ngOnDestroy() {
         this.sub$.unsubscribe();
     }
     /**
      * Override so that we can suppress default action in SPMatEntityListComponent
      */
-    ngAfterViewInit() {
-    }
+    ngAfterViewInit() { }
     /**
      * If the create/edit entity form is active, it calls its registered
      * canCancelEdit callback to determine if it's okay to cancel the edit.
@@ -761,36 +770,49 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         if (!this.newItemLink() || this.newItemLink()?.length == 0) {
             event.preventDefault();
             event.stopImmediatePropagation();
-            const params = {
-                title: this.newItemLabel() ??
-                    this.transloco.translate('spMatEntityCrud.newItem', {
-                        item: 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_' });
+            firstValueFrom(this._itemLabel()).then((itemLabel) => {
+                const params = {
+                    title: this.newItemLabel() ??
+                        this.transloco.translate('spMatEntityCrud.newItem', {
+                            item: itemLabel
+                        }),
+                };
+                this.showCreateEditView(undefined, params);
+                if (!this.createEditViewActive()) {
+                    this.action.emit({ role: '_new_' });
+                }
+            });
+            // const params = {
+            //   title:
+            //     this.newItemLabel() ??
+            //     this.transloco.translate('spMatEntityCrud.newItem', {
+            //       item: this._itemLabel(),
+            //     }),
+            // };
+            // this.showCreateEditView(undefined, params);
         }
     }
     onUpdate(entity) {
-        const params = {
-            title: this.editItemTitle() ??
-                this.transloco.translate('spMatEntityCrud.editItem', {
-                    item: this._itemLabel(),
-                }),
-        };
-        this.showCreateEditView(entity, params);
+        firstValueFrom(this._itemLabel()).then((itemLabel) => {
+            const params = {
+                title: this.editItemTitle() ??
+                    this.transloco.translate('spMatEntityCrud.editItem', {
+                        item: itemLabel
+                    }),
+            };
+            this.showCreateEditView(entity, params);
+            if (!this.createEditViewActive()) {
+                this.action.emit({ role: '_update_' });
+            }
+        });
+        // const params = {
+        //   title:
+        //     this.editItemTitle() ??
+        //     this.transloco.translate('spMatEntityCrud.editItem', {
+        //       item: this._itemLabel(),
+        //     }),
+        // };
+        // this.showCreateEditView(entity, params);
         // const tmpl = this.createEditFormTemplate();
         // if (tmpl) {
         //   // If preview is active deactivate it
@@ -803,9 +825,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         //     this.createEditViewActive.set(true);
         //   }
         // }
-        if (!this.createEditViewActive()) {
-            this.action.emit({ role: '_update_' });
-        }
+        // if (!this.createEditViewActive()) {
+        //   this.action.emit({ role: '_update_' });
+        // }
     }
     /**
      * Show the create/edit component. This is deliberately made public so as to
@@ -859,36 +881,41 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         // Do the delete prompt asynchronously so that the context menu is
         // dismissed before the prompt is displayed.
         setTimeout(() => {
-            const deletedItemPrompt = this.transloco.translate('spMatEntityCrud.deleteItemConfirm', { item: this._itemLabel().toLocaleLowerCase() });
-            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'),
-                    });
+            // We use firstValueFrom() to get the value of the observable
+            // synchronously. firstValueFrom() also gracefully cleans up the
+            // observable after a value is emitted.
+            firstValueFrom(this._itemLabel()).then((itemLabel) => {
+                const deletedItemPrompt = this.transloco.translate('spMatEntityCrud.deleteItemConfirm', { item: itemLabel.toLocaleLowerCase() });
+                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.transloco.translate('spMatEntityCrud.deleteItemSuccess', { item: this._itemLabel() });
+                        this.snackBar.open(deletedMessage);
+                    }))
+                        .subscribe());
                 }
-                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.transloco.translate('spMatEntityCrud.deleteItemSuccess', { item: this._itemLabel() });
-                    this.snackBar.open(deletedMessage);
-                }))
-                    .subscribe());
-            }
+            });
         });
     }
     getUrl(endpoint) {
@@ -978,12 +1005,19 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * to determine if the action is allowed for the given entity.
      * @returns
      */
-    getItemActions() {
+    getItemActions(entity) {
+        // console.log(`SPMatEntityCrudComponent.getItemActions - entity: ${JSON.stringify(entity, null, 2)}`);
         const actions = this.itemActions() && this.itemActions().length
             ? this.itemActions()
             : this.defaultItemCrudActions();
         let actionsCopy = JSON.parse(JSON.stringify(actions));
         actionsCopy.forEach((action, index) => {
+            // localize default action item labels (Update & Delete)
+            // Client specified action labels are to be localized by the client
+            // before supplying them to the component.
+            if (action.label.startsWith('spMatEntityCrud.')) {
+                action.label = this.transloco.translate(action.label);
+            }
             const orgDisable = actions[index]?.disable;
             action.disable = (entity) => {
                 if (orgDisable) {
@@ -1015,21 +1049,21 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             // SPMatEntityListComponent to use our component's any project MatColumnDef
             // content in the final mat-table.
             const clientColumnDefs = this.clientColumnDefs;
-            if (clientColumnDefs.length && spEntitiesList) {
+            let contentColumnDefs = new Array();
+            if (clientColumnDefs.length) {
                 // 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.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 <sp-mat-entity-list> with
             // deferViewInit=true.
@@ -1060,7 +1094,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
               >
                 {{
                   newItemLabel() ??
-                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                    t('spMatEntityCrud.newItem', {
+                      item: _itemLabel() | async
+                    })
                 }}
                 <mat-icon>expand_circle_down</mat-icon>
               </button>
@@ -1085,8 +1121,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
               >
                 {{
                   newItemLabel() ??
-                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                    t('spMatEntityCrud.newItem', {
+                      item: _itemLabel() | async
+                    })
                 }}
+                <mat-icon>add_circle</mat-icon>
               </button>
               } }
             </div>
@@ -1095,7 +1134,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
           <ng-template #defaultHeaderTemplate>
             <div class="action-bar">
               <div class="action-bar-title">
-                {{ _title() }}
+                {{ _title() | async }}
               </div>
               <span class="spacer"></span>
               <!-- Hide the action buttons when Preview/Edit pane is active -->
@@ -1138,19 +1177,19 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         -->
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef></th>
-          <td
-            mat-cell
-            *matCellDef="let element"
-            (click)="$event.stopImmediatePropagation()"
-          >
-            @if (_itemActions().length) {
+          <td mat-cell *matCellDef="let element">
+            <!-- <button
+              mat-icon-button
+              hoverDropDown
+            >
+              <mat-icon>more_vert</mat-icon>
+            </button> -->
             <sp-mat-context-menu
-              [menuItems]="_itemActions()"
+              [menuItems]="_itemActions"
               (selected)="onItemAction($event, element)"
               [contextData]="element"
               [hasBackdrop]="true"
             ></sp-mat-context-menu>
-            }
           </td>
         </ng-container>
       </as-split-area>
@@ -1167,15 +1206,15 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
           <!-- Create/Edit Entity -->
           <sp-create-edit-entity-host
             [ngClass]="createEditViewActive() ? 'd-inherit' : 'd-none'"
-            [itemLabel]="_itemLabel()"
-            [itemLabelPlural]="_itemLabelPlural()"
+            itemLabel="{{ _itemLabel() | async }}"
+            itemLabelPlural="{{ _itemLabelPlural() | async }}"
             [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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i10.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", "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 });
+  `, 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: "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: 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i10.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", "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,
@@ -1216,7 +1255,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
               >
                 {{
                   newItemLabel() ??
-                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                    t('spMatEntityCrud.newItem', {
+                      item: _itemLabel() | async
+                    })
                 }}
                 <mat-icon>expand_circle_down</mat-icon>
               </button>
@@ -1241,8 +1282,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
               >
                 {{
                   newItemLabel() ??
-                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                    t('spMatEntityCrud.newItem', {
+                      item: _itemLabel() | async
+                    })
                 }}
+                <mat-icon>add_circle</mat-icon>
               </button>
               } }
             </div>
@@ -1251,7 +1295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
           <ng-template #defaultHeaderTemplate>
             <div class="action-bar">
               <div class="action-bar-title">
-                {{ _title() }}
+                {{ _title() | async }}
               </div>
               <span class="spacer"></span>
               <!-- Hide the action buttons when Preview/Edit pane is active -->
@@ -1294,19 +1338,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
         -->
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef></th>
-          <td
-            mat-cell
-            *matCellDef="let element"
-            (click)="$event.stopImmediatePropagation()"
-          >
-            @if (_itemActions().length) {
+          <td mat-cell *matCellDef="let element">
+            <!-- <button
+              mat-icon-button
+              hoverDropDown
+            >
+              <mat-icon>more_vert</mat-icon>
+            </button> -->
             <sp-mat-context-menu
-              [menuItems]="_itemActions()"
+              [menuItems]="_itemActions"
               (selected)="onItemAction($event, element)"
               [contextData]="element"
               [hasBackdrop]="true"
             ></sp-mat-context-menu>
-            }
           </td>
         </ng-container>
       </as-split-area>
@@ -1323,8 +1367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
           <!-- Create/Edit Entity -->
           <sp-create-edit-entity-host
             [ngClass]="createEditViewActive() ? 'd-inherit' : 'd-none'"
-            [itemLabel]="_itemLabel()"
-            [itemLabelPlural]="_itemLabelPlural()"
+            itemLabel="{{ _itemLabel() | async }}"
+            itemLabelPlural="{{ _itemLabelPlural() | async }}"
             [entityCrudComponentBase]="this"
             [clientViewTemplate]="createEditFormTemplate()"
           ></sp-create-edit-entity-host>