@smallpearl/ngx-helper 0.29.40 → 0.31.1

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, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, inject, input, signal, viewChild, ViewContainerRef, Component, ChangeDetectionStrategy, computed, 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';
@@ -470,7 +470,18 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     entityViewPaneActivated = new EventEmitter();
     busyWheelId = `entityCrudBusyWheel-${Date.now()}`;
     sub$ = new Subscription();
-    spEntitiesList = viewChild((SPMatEntityListComponent));
+    spEntitiesList = viewChild('entitiesList');
+    // Theoritically, we ought to be able to initialize the mat-entities-list
+    // columns from ngAfterViewInit lifecycle hook. But for some strange reason
+    // when this hook is called, sp-mat-entities-list has not been initialized.
+    // Therefore `spEntitiesList()` is null. So we have to use a computed signal,
+    // which will be triggered when spEntitiesList() is initialized and use that
+    // to initialize the columns.
+    spEntitiesListInited = effect(() => {
+        if (this.spEntitiesList()) {
+            this._initEntitiesList();
+        }
+    });
     crudConfig;
     // This is the internal component that will host the createEditFormTemplate
     createEditHostComponent = viewChild(FormViewHostComponent);
@@ -500,9 +511,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     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.
+        // we've to 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') {
@@ -557,6 +568,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             .map((col) => (typeof col === 'string' ? col : col.name))
             .filter((name) => name !== 'action')
         : []);
+    transloco = inject(TranslocoService);
     constructor(http, snackBar, sanitizer, injector) {
         super(http, sanitizer, injector);
         this.snackBar = snackBar;
@@ -577,41 +589,15 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             ]);
         }
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     ngOnDestroy() {
         this.sub$.unsubscribe();
     }
+    /**
+     * Override so that we can suppress default action in SPMatEntityListComponent
+     */
     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
@@ -1015,8 +1001,45 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     getPreviewPaneContentClass() {
         return this.previewPaneContentClass();
     }
+    /**
+     * Initialize the columns for the mat-entities-list component. This is
+     * called when the <sp-mat-entities-list> component has been properly
+     * initialized.
+     */
+    _initEntitiesList() {
+        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.length && 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 <sp-mat-entity-list> with
+            // deferViewInit=true.
+            spEntitiesList.buildColumns();
+            spEntitiesList.setupSort();
+            spEntitiesList.loadMoreEntities();
+        }
+    }
     /** @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 }, 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: `
+    /** @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: ["entitiesList"], descendants: true, isSignal: true }, { propertyName: "createEditHostComponent", first: true, predicate: FormViewHostComponent, descendants: true, isSignal: true }, { propertyName: "previewHostComponent", first: true, predicate: PreviewHostComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <as-split direction="horizontal" [gutterSize]="6" *transloco="let t">
       <as-split-area
         [size]="entitiesPaneWidth()"
@@ -1087,9 +1110,10 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             [ngTemplateOutlet]="headerTemplate() || defaultHeaderTemplate"
           ></ng-container>
           <sp-mat-entity-list
+            #entitiesList
             [entityName]="entityName()"
             [entityNamePlural]="entityNamePlural()"
-            [_deferViewInit]="true"
+            [deferViewInit]="true"
             [endpoint]="endpoint()"
             [entityLoaderFn]="entityLoaderFn()"
             [columns]="columnsWithAction()"
@@ -1151,7 +1175,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: 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: "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,
@@ -1242,9 +1266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             [ngTemplateOutlet]="headerTemplate() || defaultHeaderTemplate"
           ></ng-container>
           <sp-mat-entity-list
+            #entitiesList
             [entityName]="entityName()"
             [entityNamePlural]="entityNamePlural()"
-            [_deferViewInit]="true"
+            [deferViewInit]="true"
             [endpoint]="endpoint()"
             [entityLoaderFn]="entityLoaderFn()"
             [columns]="columnsWithAction()"