@smallpearl/ngx-helper 0.33.49 → 20.0.2

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

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common/http';
 import { HttpContextToken, HttpContext, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, Directive, computed, signal, viewChild, viewChildren, effect, runInInjectionContext, EventEmitter, Component, ChangeDetectionStrategy, ContentChildren, Output } from '@angular/core';
+import { InjectionToken, inject, input, Directive, computed, signal, viewChild, viewChildren, effect, runInInjectionContext, EventEmitter, Output, ContentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -22,7 +22,7 @@ import { withEntities, selectAllEntities, getEntitiesCount, addEntities, hasEnti
 import { SPEntityField, SP_ENTITY_FIELD_CONFIG } from '@smallpearl/ngx-helper/entity-field';
 import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import { plural } from 'pluralize';
-import { Subscription, Subject, takeUntil, tap, filter, distinctUntilChanged, switchMap, finalize, Observable, of } from 'rxjs';
+import { Subscription, Subject, takeUntil, tap, filter, distinctUntilChanged, switchMap, finalize, of, Observable } from 'rxjs';
 
 const SP_MAT_ENTITY_LIST_HTTP_CONTEXT = new HttpContextToken(() => ({
     entityName: '',
@@ -54,7 +54,7 @@ function getEntityListConfig() {
 
 class HeaderAlignmentDirective {
     el;
-    headerAlignment = input();
+    headerAlignment = input(...(ngDevMode ? [undefined, { debugName: "headerAlignment" }] : []));
     constructor(el) {
         this.el = el;
         // this.el.nativeElement.style.backgroundColor = 'yellow';
@@ -70,16 +70,16 @@ class HeaderAlignmentDirective {
             }
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: HeaderAlignmentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: HeaderAlignmentDirective, isStandalone: true, selector: "[headerAlignment]", inputs: { headerAlignment: { classPropertyName: "headerAlignment", publicName: "headerAlignment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HeaderAlignmentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: HeaderAlignmentDirective, isStandalone: true, selector: "[headerAlignment]", inputs: { headerAlignment: { classPropertyName: "headerAlignment", publicName: "headerAlignment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: HeaderAlignmentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HeaderAlignmentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[headerAlignment]',
-                    standalone: true
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { headerAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlignment", required: false }] }] } });
 /**
  * Represents a request to load entities from the remote. This is used to
  * compare two requests to determine if they are equal. This is useful to
@@ -116,17 +116,17 @@ class SPMatEntityListComponent {
     sanitizer;
     injector;
     /* CLIENT PROVIDED PARAMETERS */
-    entityName = input.required();
-    entityNamePlural = input();
+    entityName = input.required(...(ngDevMode ? [{ debugName: "entityName" }] : []));
+    entityNamePlural = input(...(ngDevMode ? [undefined, { debugName: "entityNamePlural" }] : []));
     /**
      * The endpoint from where the entities are to be retrieved
      */
-    endpoint = input('');
+    endpoint = input('', ...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     /**
      * Custom entities loader function, which if provided will be called
      * instead of HttpClient.get.
      */
-    entityLoaderFn = input(undefined);
+    entityLoaderFn = input(undefined, ...(ngDevMode ? [{ debugName: "entityLoaderFn" }] : []));
     /**
      * The columns of the entity to be displayed. This is an array of
      * SPEntityFieldSpec objects. If there's a one-to-one mapping between the
@@ -134,47 +134,47 @@ class SPMatEntityListComponent {
      * specified instead. That is, the value of this property is a heterogeneous
      * array consisting of SPEntityFieldSpec<> objects and strings.
      */
-    columns = input([]);
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
     /**
      * Names of columns that are displayed. This will default to all the columns
      * listed in columns.
      */
-    displayedColumns = input([]); // ['name', 'cell', 'gender'];
+    displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : [])); // ['name', 'cell', 'gender'];
     /**
      * Number of entities per page. If this is not set and paginator is defined,
      * the number of entities int in the first request, will be taken as the
      * page size.
      */
-    pageSize = input(0);
+    pageSize = input(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     /**
      * Entity idKey, if idKey is different from the default 'id'.
      */
-    idKey = input('id');
+    idKey = input('id', ...(ngDevMode ? [{ debugName: "idKey" }] : []));
     /**
      * Type of pagination -- continuous or discrete. 'infinite' pagination
      * uses an 'infiniteScroll' and 'discrete' pagination uses a mat-paginator
      * at the bottom to navigate between pages.
      */
-    pagination = input('discrete');
+    pagination = input('discrete', ...(ngDevMode ? [{ debugName: "pagination" }] : []));
     /**
      * Component specific paginator. Only used if pagination != 'none'.
      */
-    paginator = input();
+    paginator = input(...(ngDevMode ? [undefined, { debugName: "paginator" }] : []));
     /**
      *
      */
-    sorter = input();
+    sorter = input(...(ngDevMode ? [undefined, { debugName: "sorter" }] : []));
     /**
      * Disable sorting of rows
      */
-    disableSort = input(false);
+    disableSort = input(false, ...(ngDevMode ? [{ debugName: "disableSort" }] : []));
     /**
      * Wrappers for infiniteScroll properties, for customization by the client
      */
-    infiniteScrollContainer = input('');
-    infiniteScrollDistance = input(1);
-    infiniteScrollThrottle = input(400);
-    infiniteScrollWindow = input(false);
+    infiniteScrollContainer = input('', ...(ngDevMode ? [{ debugName: "infiniteScrollContainer" }] : []));
+    infiniteScrollDistance = input(1, ...(ngDevMode ? [{ debugName: "infiniteScrollDistance" }] : []));
+    infiniteScrollThrottle = input(400, ...(ngDevMode ? [{ debugName: "infiniteScrollThrottle" }] : []));
+    infiniteScrollWindow = input(false, ...(ngDevMode ? [{ debugName: "infiniteScrollWindow" }] : []));
     /**
      * Custom context to be set for HttpClient requests. Value for this attribute
      * can be an array of HttpContextToken key, value pairs, or an instance of
@@ -207,12 +207,12 @@ class SPMatEntityListComponent {
      * as an array of array. That is, `[[HttpContextToken<any>, any]]` and
      * initialize it appropriately.
      */
-    httpReqContext = input();
+    httpReqContext = input(...(ngDevMode ? [undefined, { debugName: "httpReqContext" }] : []));
     /* END CLIENT PROVIDED PARAMETERS */
     // *** INTERNAL *** //
     _entityNamePlural = computed(() => this.entityNamePlural()
         ? this.entityNamePlural()
-        : plural(this.entityName()));
+        : plural(this.entityName()), ...(ngDevMode ? [{ debugName: "_entityNamePlural" }] : []));
     _httpReqContext = computed(() => {
         let reqContext = this.httpReqContext();
         let context = new HttpContext();
@@ -242,20 +242,21 @@ class SPMatEntityListComponent {
             });
         }
         return context;
-    });
-    deferViewInit = input(false);
+    }, ...(ngDevMode ? [{ debugName: "_httpReqContext" }] : []));
+    deferViewInit = input(false, ...(ngDevMode ? [{ debugName: "deferViewInit" }] : []));
     firstLoadDone = false;
-    allColumnNames = signal([]);
+    allColumnNames = signal([], ...(ngDevMode ? [{ debugName: "allColumnNames" }] : []));
     _displayedColumns = computed(() => this.displayedColumns().length > 0
-        ? this.displayedColumns().filter((colName) => this.allColumnNames().find((name) => name === colName) !== undefined)
-        : this.allColumnNames());
-    dataSource = signal(new MatTableDataSource());
-    table = viewChild(MatTable);
-    sort = viewChild(MatSort);
+        ? this.displayedColumns().filter((colName) => this.allColumnNames().find((name) => name === colName) !==
+            undefined)
+        : this.allColumnNames(), ...(ngDevMode ? [{ debugName: "_displayedColumns" }] : []));
+    dataSource = signal(new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
     // These are our own <ng-container matColumnDef></ng-container>
     // which we create for each column that we create by the declaration:
     // <ng-container *ngFor="let column of columns()" [matColumnDef]="column.name">
-    viewColumnDefs = viewChildren(MatColumnDef);
+    viewColumnDefs = viewChildren(MatColumnDef, ...(ngDevMode ? [{ debugName: "viewColumnDefs" }] : []));
     // These are the <ng-container matColumnDef></ng-container> placed
     // inside <sp-mat-entity-list></<sp-mat-entity-list> by the client to override
     // the default <ng-container matColumnDef> created by the component.
@@ -264,13 +265,14 @@ class SPMatEntityListComponent {
     subs$ = new Subscription();
     destroy$ = new Subject();
     // Pagination state
-    entityCount = signal(0);
-    pageIndex = signal(0);
+    entityCount = signal(0, ...(ngDevMode ? [{ debugName: "entityCount" }] : []));
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     // Mechanism to default pageSize to last entities length.
-    lastFetchedEntitiesCount = signal(0);
+    lastFetchedEntitiesCount = signal(0, ...(ngDevMode ? [{ debugName: "lastFetchedEntitiesCount" }] : []));
     _pageSize = computed(() => this.pageSize()
         ? this.pageSize()
-        : this.entityListConfig.defaultPageSize ?? this.lastFetchedEntitiesCount());
+        : (this.entityListConfig.defaultPageSize ??
+            this.lastFetchedEntitiesCount()), ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
     // Effective columns, derived from columns(), which can either be an array
     // of objects of array of strings.
     _columns = computed(() => {
@@ -287,8 +289,8 @@ class SPMatEntityListComponent {
             }
         });
         return cols;
-    });
-    __columns = computed(() => this.columns().map((colDef) => new SPEntityField(colDef, this.fieldConfig)));
+    }, ...(ngDevMode ? [{ debugName: "_columns" }] : []));
+    __columns = computed(() => this.columns().map((colDef) => new SPEntityField(colDef, this.fieldConfig)), ...(ngDevMode ? [{ debugName: "__columns" }] : []));
     // We isolate retrieving items from the remote and providing the items
     // to the component into two distinct operations. The retrieval operation
     // retrieves data asynchronously and then stores the data in a local store.
@@ -315,11 +317,13 @@ class SPMatEntityListComponent {
     // config.
     _paginator;
     // We will toggle this during every entity load.
-    loading = signal(false);
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     // We will update this after every load and pagination() == 'infinite'
-    hasMore = signal(true);
-    activeEntity = signal(undefined);
-    activeEntityId = computed(() => this.activeEntity() ? this.activeEntity()[this.idKey()] : undefined);
+    hasMore = signal(true, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    activeEntity = signal(undefined, ...(ngDevMode ? [{ debugName: "activeEntity" }] : []));
+    activeEntityId = computed(() => this.activeEntity()
+        ? this.activeEntity()[this.idKey()]
+        : undefined, ...(ngDevMode ? [{ debugName: "activeEntityId" }] : []));
     _prevActiveEntity;
     _activeEntityChange = effect(() => {
         runInInjectionContext(this.injector, () => {
@@ -342,7 +346,7 @@ class SPMatEntityListComponent {
                 });
             }
         });
-    });
+    }, ...(ngDevMode ? [{ debugName: "_activeEntityChange" }] : []));
     selectEntity = new EventEmitter();
     fieldConfig = inject(SP_ENTITY_FIELD_CONFIG, { optional: true });
     entityListConfig = getEntityListConfig();
@@ -361,7 +365,7 @@ class SPMatEntityListComponent {
                 });
             }
         });
-    });
+    }, ...(ngDevMode ? [{ debugName: "endpointChanged" }] : []));
     constructor(http, sanitizer, injector) {
         this.http = http;
         this.sanitizer = sanitizer;
@@ -671,8 +675,8 @@ class SPMatEntityListComponent {
     isAsync(val) {
         return val instanceof Observable;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityListComponent, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityListComponent, isStandalone: true, selector: "sp-mat-entity-list", inputs: { entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: true, transformFunction: null }, entityNamePlural: { classPropertyName: "entityNamePlural", publicName: "entityNamePlural", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, entityLoaderFn: { classPropertyName: "entityLoaderFn", publicName: "entityLoaderFn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: true, isRequired: false, transformFunction: null }, disableSort: { classPropertyName: "disableSort", publicName: "disableSort", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollContainer: { classPropertyName: "infiniteScrollContainer", publicName: "infiniteScrollContainer", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "infiniteScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThrottle: { classPropertyName: "infiniteScrollThrottle", publicName: "infiniteScrollThrottle", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollWindow: { classPropertyName: "infiniteScrollWindow", publicName: "infiniteScrollWindow", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, deferViewInit: { classPropertyName: "deferViewInit", publicName: "deferViewInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEntity: "selectEntity" }, queries: [{ propertyName: "clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "viewColumnDefs", predicate: MatColumnDef, descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityListComponent, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SPMatEntityListComponent, isStandalone: true, selector: "sp-mat-entity-list", inputs: { entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: true, transformFunction: null }, entityNamePlural: { classPropertyName: "entityNamePlural", publicName: "entityNamePlural", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, entityLoaderFn: { classPropertyName: "entityLoaderFn", publicName: "entityLoaderFn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: true, isRequired: false, transformFunction: null }, disableSort: { classPropertyName: "disableSort", publicName: "disableSort", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollContainer: { classPropertyName: "infiniteScrollContainer", publicName: "infiniteScrollContainer", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "infiniteScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThrottle: { classPropertyName: "infiniteScrollThrottle", publicName: "infiniteScrollThrottle", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollWindow: { classPropertyName: "infiniteScrollWindow", publicName: "infiniteScrollWindow", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, deferViewInit: { classPropertyName: "deferViewInit", publicName: "deferViewInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEntity: "selectEntity" }, queries: [{ propertyName: "clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "viewColumnDefs", predicate: MatColumnDef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="entities-list-wrapper"
       infiniteScroll
@@ -701,17 +705,17 @@ class SPMatEntityListComponent {
         ></tr>
       </table>
       @if (pagination() == 'discrete' && _paginator) {
-      <mat-paginator
-        showFirstLastButtons
-        [length]="entityCount()"
-        [pageSize]="_pageSize()"
-        [pageIndex]="pageIndex()"
-        [pageSizeOptions]="[]"
-        [hidePageSize]="true"
-        (page)="handlePageEvent($event)"
-        [disabled]="loading()"
-        aria-label="Select page"
-      ></mat-paginator>
+        <mat-paginator
+          showFirstLastButtons
+          [length]="entityCount()"
+          [pageSize]="_pageSize()"
+          [pageIndex]="pageIndex()"
+          [pageSizeOptions]="[]"
+          [hidePageSize]="true"
+          (page)="handlePageEvent($event)"
+          [disabled]="loading()"
+          aria-label="Select page"
+        ></mat-paginator>
       }
       <div
         class="infinite-scroll-loading"
@@ -724,43 +728,44 @@ class SPMatEntityListComponent {
     be dynamically added to the MatTable. -->
     <span matSort="sorter()">
       @for (column of __columns(); track $index) {
-      <ng-container [matColumnDef]="column.spec.name">
-        @if (disableSort()) {
-        <th
-          [class]="column.class"
-          [headerAlignment]="column.options.alignment"
-          mat-header-cell
-          *matHeaderCellDef
-        >
-          {{ getColumnLabel(column) | async }}
-        </th>
-        } @else {
-        <th
-          [class]="column.class"
-          [headerAlignment]="column.options.alignment"
-          mat-header-cell
-          mat-sort-header
-          *matHeaderCellDef
-        >
-          {{ getColumnLabel(column) | async }}
-        </th>
-        }
-        <td
-          [class]="column.class"
-          [style.text-align]="column.options.alignment"
-          mat-cell
-          *matCellDef="let element"
-          [routerLink]="column.getRouterLink(element)"
-        >
-          @if (column.hasRouterLink(element)) {
-          <a [routerLink]="column.getRouterLink(element)">
-            <span [innerHTML]="column.value(element)"></span>
-          </a>
-          } @else { @let val = column.value(element);
-          <span [innerHTML]="isAsync(val) ? (val | async) : val"></span>
+        <ng-container [matColumnDef]="column.spec.name">
+          @if (disableSort()) {
+            <th
+              [class]="column.class"
+              [headerAlignment]="column.options.alignment"
+              mat-header-cell
+              *matHeaderCellDef
+            >
+              {{ getColumnLabel(column) | async }}
+            </th>
+          } @else {
+            <th
+              [class]="column.class"
+              [headerAlignment]="column.options.alignment"
+              mat-header-cell
+              mat-sort-header
+              *matHeaderCellDef
+            >
+              {{ getColumnLabel(column) | async }}
+            </th>
           }
-        </td>
-      </ng-container>
+          <td
+            [class]="column.class"
+            [style.text-align]="column.options.alignment"
+            mat-cell
+            *matCellDef="let element"
+            [routerLink]="column.getRouterLink(element)"
+          >
+            @if (column.hasRouterLink(element)) {
+              <a [routerLink]="column.getRouterLink(element)">
+                <span [innerHTML]="column.value(element)"></span>
+              </a>
+            } @else {
+              @let val = column.value(element);
+              <span [innerHTML]="isAsync(val) ? (val | async) : val"></span>
+            }
+          </td>
+        </ng-container>
       }
     </span>
     <ng-template #busySpinner>
@@ -768,9 +773,9 @@ class SPMatEntityListComponent {
         <mat-spinner mode="indeterminate" diameter="28"></mat-spinner>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".entities-list-wrapper{position:relative}.busy-overlay{display:none;height:100%;width:100%;position:absolute;top:0;left:0;z-index:1000;opacity:.6;background-color:transparent}.show{display:block}.busy-spinner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.infinite-scroll-loading{display:none;width:100%;padding:8px}.active-row{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: HeaderAlignmentDirective, selector: "[headerAlignment]", inputs: ["headerAlignment"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".entities-list-wrapper{position:relative}.busy-overlay{display:none;height:100%;width:100%;position:absolute;top:0;left:0;z-index:1000;opacity:.6;background-color:transparent}.show{display:block}.busy-spinner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.infinite-scroll-loading{display:none;width:100%;padding:8px}.active-row{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: HeaderAlignmentDirective, selector: "[headerAlignment]", inputs: ["headerAlignment"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatEntityListComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -812,17 +817,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
         ></tr>
       </table>
       @if (pagination() == 'discrete' && _paginator) {
-      <mat-paginator
-        showFirstLastButtons
-        [length]="entityCount()"
-        [pageSize]="_pageSize()"
-        [pageIndex]="pageIndex()"
-        [pageSizeOptions]="[]"
-        [hidePageSize]="true"
-        (page)="handlePageEvent($event)"
-        [disabled]="loading()"
-        aria-label="Select page"
-      ></mat-paginator>
+        <mat-paginator
+          showFirstLastButtons
+          [length]="entityCount()"
+          [pageSize]="_pageSize()"
+          [pageIndex]="pageIndex()"
+          [pageSizeOptions]="[]"
+          [hidePageSize]="true"
+          (page)="handlePageEvent($event)"
+          [disabled]="loading()"
+          aria-label="Select page"
+        ></mat-paginator>
       }
       <div
         class="infinite-scroll-loading"
@@ -835,43 +840,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
     be dynamically added to the MatTable. -->
     <span matSort="sorter()">
       @for (column of __columns(); track $index) {
-      <ng-container [matColumnDef]="column.spec.name">
-        @if (disableSort()) {
-        <th
-          [class]="column.class"
-          [headerAlignment]="column.options.alignment"
-          mat-header-cell
-          *matHeaderCellDef
-        >
-          {{ getColumnLabel(column) | async }}
-        </th>
-        } @else {
-        <th
-          [class]="column.class"
-          [headerAlignment]="column.options.alignment"
-          mat-header-cell
-          mat-sort-header
-          *matHeaderCellDef
-        >
-          {{ getColumnLabel(column) | async }}
-        </th>
-        }
-        <td
-          [class]="column.class"
-          [style.text-align]="column.options.alignment"
-          mat-cell
-          *matCellDef="let element"
-          [routerLink]="column.getRouterLink(element)"
-        >
-          @if (column.hasRouterLink(element)) {
-          <a [routerLink]="column.getRouterLink(element)">
-            <span [innerHTML]="column.value(element)"></span>
-          </a>
-          } @else { @let val = column.value(element);
-          <span [innerHTML]="isAsync(val) ? (val | async) : val"></span>
+        <ng-container [matColumnDef]="column.spec.name">
+          @if (disableSort()) {
+            <th
+              [class]="column.class"
+              [headerAlignment]="column.options.alignment"
+              mat-header-cell
+              *matHeaderCellDef
+            >
+              {{ getColumnLabel(column) | async }}
+            </th>
+          } @else {
+            <th
+              [class]="column.class"
+              [headerAlignment]="column.options.alignment"
+              mat-header-cell
+              mat-sort-header
+              *matHeaderCellDef
+            >
+              {{ getColumnLabel(column) | async }}
+            </th>
           }
-        </td>
-      </ng-container>
+          <td
+            [class]="column.class"
+            [style.text-align]="column.options.alignment"
+            mat-cell
+            *matCellDef="let element"
+            [routerLink]="column.getRouterLink(element)"
+          >
+            @if (column.hasRouterLink(element)) {
+              <a [routerLink]="column.getRouterLink(element)">
+                <span [innerHTML]="column.value(element)"></span>
+              </a>
+            } @else {
+              @let val = column.value(element);
+              <span [innerHTML]="isAsync(val) ? (val | async) : val"></span>
+            }
+          </td>
+        </ng-container>
       }
     </span>
     <ng-template #busySpinner>
@@ -880,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       </div>
     </ng-template>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".entities-list-wrapper{position:relative}.busy-overlay{display:none;height:100%;width:100%;position:absolute;top:0;left:0;z-index:1000;opacity:.6;background-color:transparent}.show{display:block}.busy-spinner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.infinite-scroll-loading{display:none;width:100%;padding:8px}.active-row{font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.DomSanitizer }, { type: i0.Injector }], propDecorators: { clientColumnDefs: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.DomSanitizer }, { type: i0.Injector }], propDecorators: { entityName: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityName", required: true }] }], entityNamePlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityNamePlural", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: false }] }], entityLoaderFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityLoaderFn", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], sorter: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorter", required: false }] }], disableSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSort", required: false }] }], infiniteScrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollContainer", required: false }] }], infiniteScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollDistance", required: false }] }], infiniteScrollThrottle: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThrottle", required: false }] }], infiniteScrollWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollWindow", required: false }] }], httpReqContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpReqContext", required: false }] }], deferViewInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferViewInit", required: false }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], viewColumnDefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], clientColumnDefs: [{
                 type: ContentChildren,
                 args: [MatColumnDef]
             }], selectEntity: [{