@smallpearl/ngx-helper 0.29.36 → 0.29.40

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

@@ -16,16 +16,18 @@ 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 i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3 from '@angular/platform-browser';
-import * as i9 from 'angular-split';
+import * as i10 from '@jsverse/transloco';
+import { TranslocoService, provideTranslocoScope, TranslocoModule } from '@jsverse/transloco';
+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 * 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';
@@ -57,18 +59,6 @@ function defaultCrudResponseParser(entityName, idKey, method, resp) {
     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
 };
 /**
@@ -99,6 +89,7 @@ class FormViewHostComponent {
     vc = viewChild('clientFormContainer', { read: ViewContainerRef });
     config;
     sub$ = new Subscription();
+    transloco = inject(TranslocoService);
     constructor() {
         this.config = getEntityCrudConfig();
     }
@@ -112,7 +103,10 @@ class FormViewHostComponent {
             this.title.set(params.title);
         }
         else {
-            this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.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.params.set(params);
         this.createClientView();
@@ -185,7 +179,7 @@ class FormViewHostComponent {
         <div class="spacer"></div>
         <div class="close">
           <button mat-icon-button (click)="onClose()">
-            <mat-icon>close</mat-icon>
+            <mat-icon>cancel</mat-icon>
           </button>
         </div>
       </div>
@@ -204,7 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
         <div class="spacer"></div>
         <div class="close">
           <button mat-icon-button (click)="onClose()">
-            <mat-icon>close</mat-icon>
+            <mat-icon>cancel</mat-icon>
           </button>
         </div>
       </div>
@@ -304,7 +298,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      */
     newItemLink = input();
     /**
-     * If not specified, will use label from SPMatEntityCrudConfig.i18n.newItemLabel.
+     * If not specified, will default to 'New <itemLabel()>'.
      */
     newItemLabel = input();
     /**
@@ -422,12 +416,24 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
      * Width of the preview pane as a percentange of the overall <as-split> width.
      */
     previewPaneWidth = input(50);
+    /**
+     * The class class that will be applied to the list pane wrapper.
+     */
+    listPaneWrapperClass = input('sp-mat-crud-list-pane-wrapper-class');
+    /**
+     * The class class that will be applied to the preview pane wrapper.
+     */
+    previewPaneWrapperClass = input('sp-mat-crud-preview-pane-wrapper-class');
+    /**
+     * The class class that will be applied to the preview pane content.
+     */
+    previewPaneContentClass = input('sp-mat-crud-preview-pane-content-class');
     // 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);
+        const label = this.transloco.translate(source);
         if (label.localeCompare(source) !== 0) {
             // Successful translation, return it
             return label;
@@ -482,7 +488,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     // or to edit one.
     entityPaneActive = computed(() => !!this.previewedEntity() || this.createEditViewActive());
     // Effective width of the entity pane.
-    entityPaneWidth = computed(() => !!this.previewedEntity() ? this.previewPaneWidth() : this.editPaneWidth());
+    entityPaneWidth = computed(() => this.entityPaneActive()
+        ? !!this.previewedEntity()
+            ? this.previewPaneWidth()
+            : this.editPaneWidth()
+        : 0);
     // Width of the pane showing the list of entities. Calculated as
     entitiesPaneWidth = computed(() => 100 - this.entityPaneWidth());
     entitiesPaneHidden = computed(() => this.entityPaneActive() && this.entityPaneWidth() === 100);
@@ -556,8 +566,14 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         }
         else {
             this.defaultItemCrudActions.set([
-                { label: this.crudConfig.i18n.edit, role: '_update_' },
-                { label: this.crudConfig.i18n.delete, role: '_delete_' },
+                {
+                    label: this.transloco.translate('spMatEntityCrud.edit'),
+                    role: '_update_',
+                },
+                {
+                    label: this.transloco.translate('spMatEntityCrud.delete'),
+                    role: '_delete_',
+                },
             ]);
         }
     }
@@ -621,7 +637,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     }
     closeCreateEdit(cancelled) {
         this.createEditViewActive.set(false);
-        this.entityViewPaneActivated.emit({ activated: false, cancelled: !!cancelled, mode: 'edit' });
+        this.entityViewPaneActivated.emit({
+            activated: false,
+            cancelled: !!cancelled,
+            mode: 'edit',
+        });
     }
     canCancelEdit() {
         if (this.canCancelEditCallback) {
@@ -656,7 +676,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             // render the new item in the mat-table.
             if (entity) {
                 this.spEntitiesList()?.addEntity(entity);
-                this.snackBar.open(this.crudConfig.i18n.createdItemNotification(this._itemLabel()));
+                this.snackBar.open(this.transloco.translate('spMatEntityCrud.createSuccess', {
+                    item: this._itemLabel(),
+                }));
             }
         }));
     }
@@ -674,7 +696,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         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()));
+                this.snackBar.open(this.transloco.translate('spMatEntityCrud.updateSuccess', {
+                    item: this._itemLabel(),
+                }));
             }
         }));
     }
@@ -726,7 +750,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 this.spEntitiesList()?.toggleActiveEntity(this.previewedEntity());
             }
             this.previewedEntity.set(undefined);
-            this.entityViewPaneActivated.emit({ activated: false, cancelled: undefined, mode: 'preview' });
+            this.entityViewPaneActivated.emit({
+                activated: false,
+                cancelled: undefined,
+                mode: 'preview',
+            });
         }
     }
     onItemAction(role, entity) {
@@ -748,7 +776,10 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             event.preventDefault();
             event.stopImmediatePropagation();
             const params = {
-                title: this.newItemLabel() ?? this.crudConfig.i18n.newItemLabel(this._itemLabel()),
+                title: this.newItemLabel() ??
+                    this.transloco.translate('spMatEntityCrud.newItem', {
+                        item: this._itemLabel(),
+                    }),
             };
             this.showCreateEditView(undefined, params);
             // const tmpl = this.createEditFormTemplate();
@@ -768,7 +799,10 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     }
     onUpdate(entity) {
         const params = {
-            title: this.editItemTitle() ?? this.crudConfig.i18n.editItemLabel(this._itemLabel()),
+            title: this.editItemTitle() ??
+                this.transloco.translate('spMatEntityCrud.editItem', {
+                    item: this._itemLabel(),
+                }),
         };
         this.showCreateEditView(entity, params);
         // const tmpl = this.createEditFormTemplate();
@@ -805,7 +839,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             const createEditHost = this.createEditHostComponent();
             createEditHost.show(entity, params);
             this.createEditViewActive.set(true);
-            this.entityViewPaneActivated.emit({ activated: true, cancelled: undefined, mode: 'edit' });
+            this.entityViewPaneActivated.emit({
+                activated: true,
+                cancelled: undefined,
+                mode: 'edit',
+            });
         }
     }
     showPreviewView(entity, params) {
@@ -815,7 +853,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 const previewHost = this.previewHostComponent();
                 this.previewedEntity.set(entity);
                 previewHost?.show(entity, params);
-                this.entityViewPaneActivated.emit({ activated: true, cancelled: undefined, mode: 'preview' });
+                this.entityViewPaneActivated.emit({
+                    activated: true,
+                    cancelled: undefined,
+                    mode: 'preview',
+                });
                 // this.previewActivated.emit({ entity, activated: true });
             }
         }
@@ -831,7 +873,7 @@ 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.crudConfig.i18n.deleteItemMessage(this._itemLabel());
+            const deletedItemPrompt = this.transloco.translate('spMatEntityCrud.deleteItemConfirm', { item: this._itemLabel().toLocaleLowerCase() });
             const yes = confirm(deletedItemPrompt);
             if (yes) {
                 const entityId = entity[this.idKey()];
@@ -856,7 +898,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 tap(() => {
                     this.spEntitiesList().removeEntity(entityId);
                     // TODO: customize by providing an interface via SPMatEntityCrudConfig?
-                    const deletedMessage = this.crudConfig.i18n.itemDeletedNotification(this._itemLabel());
+                    const deletedMessage = this.transloco.translate('spMatEntityCrud.deleteItemSuccess', { item: this._itemLabel() });
                     this.snackBar.open(deletedMessage);
                 }))
                     .subscribe());
@@ -970,13 +1012,17 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         });
         return actionsCopy;
     }
+    getPreviewPaneContentClass() {
+        return this.previewPaneContentClass();
+    }
     /** @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"
-        >
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityCrudComponent, isStandalone: true, selector: "sp-mat-entity-crud", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, newItemLink: { classPropertyName: "newItemLink", publicName: "newItemLink", isSignal: true, isRequired: false, transformFunction: null }, newItemLabel: { classPropertyName: "newItemLabel", publicName: "newItemLabel", isSignal: true, isRequired: false, transformFunction: null }, editItemTitle: { classPropertyName: "editItemTitle", publicName: "editItemTitle", isSignal: true, isRequired: false, transformFunction: null }, newItemSubTypes: { classPropertyName: "newItemSubTypes", publicName: "newItemSubTypes", isSignal: true, isRequired: false, transformFunction: null }, crudOpFn: { classPropertyName: "crudOpFn", publicName: "crudOpFn", isSignal: true, isRequired: false, transformFunction: null }, previewTemplate: { classPropertyName: "previewTemplate", publicName: "previewTemplate", isSignal: true, isRequired: false, transformFunction: null }, allowEntityActionFn: { classPropertyName: "allowEntityActionFn", publicName: "allowEntityActionFn", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, crudResponseParser: { classPropertyName: "crudResponseParser", publicName: "crudResponseParser", isSignal: true, isRequired: false, transformFunction: null }, createEditFormTemplate: { classPropertyName: "createEditFormTemplate", publicName: "createEditFormTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableItemActions: { classPropertyName: "disableItemActions", publicName: "disableItemActions", isSignal: true, isRequired: false, transformFunction: null }, disableCreate: { classPropertyName: "disableCreate", publicName: "disableCreate", isSignal: true, isRequired: false, transformFunction: null }, refreshAfterEdit: { classPropertyName: "refreshAfterEdit", publicName: "refreshAfterEdit", isSignal: true, isRequired: false, transformFunction: null }, crudHttpReqContext: { classPropertyName: "crudHttpReqContext", publicName: "crudHttpReqContext", isSignal: true, isRequired: false, transformFunction: null }, editPaneWidth: { classPropertyName: "editPaneWidth", publicName: "editPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWidth: { classPropertyName: "previewPaneWidth", publicName: "previewPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, listPaneWrapperClass: { classPropertyName: "listPaneWrapperClass", publicName: "listPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWrapperClass: { classPropertyName: "previewPaneWrapperClass", publicName: "previewPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneContentClass: { classPropertyName: "previewPaneContentClass", publicName: "previewPaneContentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, providers: [provideTranslocoScope('sp-mat-entity-crud')], queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: (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" *transloco="let t">
+      <as-split-area
+        [size]="entitiesPaneWidth()"
+        [visible]="!entitiesPaneHidden()"
+      >
+        <div [class]="listPaneWrapperClass()">
           <ng-content select="[breadCrumbs]"></ng-content>
 
           <ng-template #defaultActionButtons>
@@ -991,9 +1037,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
               >
                 {{
                   newItemLabel() ??
-                    crudConfig.i18n.newItemLabel(this._itemLabel())
-                }}&nbsp;&#9660;
-                <!-- down arrow-head -->
+                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                }}
+                <mat-icon>expand_circle_down</mat-icon>
               </button>
               <mat-menu #newSubTypesMenu="matMenu">
                 @for (subtype of newItemSubTypes(); track $index) { @if
@@ -1016,7 +1062,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
               >
                 {{
                   newItemLabel() ??
-                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
                 }}
               </button>
               } }
@@ -1029,11 +1075,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 {{ _title() }}
               </div>
               <span class="spacer"></span>
-            <!-- Hide the action buttons when Preview/Edit pane is active -->
+              <!-- Hide the action buttons when Preview/Edit pane is active -->
               @if (!entityPaneActive()) {
-                <ng-container
-                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
-                ></ng-container>
+              <ng-container
+                [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+              ></ng-container>
               }
             </div>
           </ng-template>
@@ -1083,25 +1129,12 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             }
           </td>
         </ng-container>
-
-        <!--
+      </as-split-area>
+      <as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
         <div
-          [class]="crudConfig.listPaneWrapperClass"
-          [ngStyle]="{ display: createEditViewActive() ? 'inherit' : 'none' }"
+          [class]="previewPaneWrapperClass()"
           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"
@@ -1118,7 +1151,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
         </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 });
+  `, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, decorators: [{
             type: Component,
@@ -1130,18 +1163,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         MatSortModule,
                         MatMenuModule,
                         MatSnackBarModule,
+                        MatIconModule,
+                        TranslocoModule,
                         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"
-        >
+                    ], providers: [provideTranslocoScope('sp-mat-entity-crud')], selector: 'sp-mat-entity-crud', template: `
+    <as-split direction="horizontal" [gutterSize]="6" *transloco="let t">
+      <as-split-area
+        [size]="entitiesPaneWidth()"
+        [visible]="!entitiesPaneHidden()"
+      >
+        <div [class]="listPaneWrapperClass()">
           <ng-content select="[breadCrumbs]"></ng-content>
 
           <ng-template #defaultActionButtons>
@@ -1156,9 +1192,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
               >
                 {{
                   newItemLabel() ??
-                    crudConfig.i18n.newItemLabel(this._itemLabel())
-                }}&nbsp;&#9660;
-                <!-- down arrow-head -->
+                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
+                }}
+                <mat-icon>expand_circle_down</mat-icon>
               </button>
               <mat-menu #newSubTypesMenu="matMenu">
                 @for (subtype of newItemSubTypes(); track $index) { @if
@@ -1181,7 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
               >
                 {{
                   newItemLabel() ??
-                    crudConfig.i18n.newItemLabel(this._itemLabel())
+                    t('spMatEntityCrud.newItem', { item: _itemLabel() })
                 }}
               </button>
               } }
@@ -1194,11 +1230,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 {{ _title() }}
               </div>
               <span class="spacer"></span>
-            <!-- Hide the action buttons when Preview/Edit pane is active -->
+              <!-- Hide the action buttons when Preview/Edit pane is active -->
               @if (!entityPaneActive()) {
-                <ng-container
-                  [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
-                ></ng-container>
+              <ng-container
+                [ngTemplateOutlet]="actionsTemplate() || defaultActionButtons"
+              ></ng-container>
               }
             </div>
           </ng-template>
@@ -1248,25 +1284,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }
           </td>
         </ng-container>
-
-        <!--
+      </as-split-area>
+      <as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
         <div
-          [class]="crudConfig.listPaneWrapperClass"
-          [ngStyle]="{ display: createEditViewActive() ? 'inherit' : 'none' }"
+          [class]="previewPaneWrapperClass()"
           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"
@@ -1309,7 +1332,6 @@ class SPMatEntityCrudPreviewPaneComponent {
     hideUpdate = input(false);
     disableDelete = input(false);
     hideDelete = input(false);
-    config;
     itemActions;
     _disableActionFactory = (role, signal) => {
         return computed(() => {
@@ -1325,14 +1347,10 @@ class SPMatEntityCrudPreviewPaneComponent {
     };
     _disableUpdate = this._disableActionFactory(ITEM_ACTION_UPDATE, this.disableUpdate);
     _disableDelete = this._disableActionFactory(ITEM_ACTION_DELETE, this.disableDelete);
-    constructor() {
-        this.config = getEntityCrudConfig();
-    }
     ngOnInit() {
         this.itemActions = this.entityCrudComponent().getItemActions();
     }
-    ngOnDestroy() {
-    }
+    ngOnDestroy() { }
     onEdit() {
         this.entityCrudComponent().triggerEntityUpdate(this.entity());
     }
@@ -1344,67 +1362,93 @@ class SPMatEntityCrudPreviewPaneComponent {
     }
     /** @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()">
+    <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()">
+          } @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>
+          }
+          <ng-content select="[previewToolbarContent]"></ng-content>
+          <span class="spacer"></span>
+          <button mat-icon-button aria-label="Close" (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div
+        [class]="
+          'preview-content ' +
+          entityCrudComponent().getPreviewPaneContentClass()
+        "
+      >
+        <ng-content select="[previewContent]"></ng-content>
+      </div>
     </div>
-  </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()">
+    <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()">
+          } @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>
+          }
+          <ng-content select="[previewToolbarContent]"></ng-content>
+          <span class="spacer"></span>
+          <button mat-icon-button aria-label="Close" (click)="onClose()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div
+        [class]="
+          'preview-content ' +
+          entityCrudComponent().getPreviewPaneContentClass()
+        "
+      >
+        <ng-content select="[previewContent]"></ng-content>
+      </div>
     </div>
-  </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
@@ -1467,6 +1511,7 @@ class SPMatEntityCrudFormBase {
     sub$ = new Subscription();
     form = computed(() => this._form());
     crudConfig = getEntityCrudConfig();
+    transloco = inject(TranslocoService);
     cdr = inject(ChangeDetectorRef);
     canCancelEdit = () => {
         return this._canCancelEdit();
@@ -1474,7 +1519,7 @@ class SPMatEntityCrudFormBase {
     _canCancelEdit() {
         const form = this._form();
         if (form && form.touched) {
-            return window.confirm(this.crudConfig.i18n.loseChangesPrompt);
+            return window.confirm(this.transloco.translate('spMatEntityCrud.loseChangesConfirm'));
         }
         return true;
     }