@abp/ng.components 9.3.1 → 9.3.3

package/extensible/index.d.ts

@@ -7,92 +7,11 @@ import { ABP, TrackByService, ConfigStateService, TimezoneService, PermissionSer
 import { ValidatorFn, AsyncValidatorFn, UntypedFormGroup, ControlValueAccessor, ControlContainer, FormGroupDirective } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
+import { LinkedList } from '@abp/utils';
 import { SelectionType } from '@swimlane/ngx-datatable';
 import * as i2 from '@abp/ng.theme.shared';
 import * as i3 from '@ngx-validate/core';
 
-/** @description This file is referenced from here npm/packs/utils/projects/utils/src/lib/linked-list.ts */
-declare class ListNode<T = any> {
-    readonly value: T;
-    next: ListNode | undefined;
-    previous: ListNode | undefined;
-    constructor(value: T);
-}
-declare class LinkedList<T = any> {
-    private first;
-    private last;
-    private size;
-    get head(): ListNode<T> | undefined;
-    get tail(): ListNode<T> | undefined;
-    get length(): number;
-    private attach;
-    private attachMany;
-    private detach;
-    add(value: T): {
-        after: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        before: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        byIndex: (position: number) => ListNode<T>;
-        head: () => ListNode<T>;
-        tail: () => ListNode<T>;
-    };
-    addMany(values: T[]): {
-        after: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        before: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        byIndex: (position: number) => ListNode<T>[];
-        head: () => ListNode<T>[];
-        tail: () => ListNode<T>[];
-    };
-    addAfter(value: T, previousValue: T): ListNode<T>;
-    addAfter(value: T, previousValue: any, compareFn: ListComparisonFn<T>): ListNode<T>;
-    addBefore(value: T, nextValue: T): ListNode<T>;
-    addBefore(value: T, nextValue: any, compareFn: ListComparisonFn<T>): ListNode<T>;
-    addByIndex(value: T, position: number): ListNode<T>;
-    addHead(value: T): ListNode<T>;
-    addTail(value: T): ListNode<T>;
-    addManyAfter(values: T[], previousValue: T): ListNode<T>[];
-    addManyAfter(values: T[], previousValue: any, compareFn: ListComparisonFn<T>): ListNode<T>[];
-    addManyBefore(values: T[], nextValue: T): ListNode<T>[];
-    addManyBefore(values: T[], nextValue: any, compareFn: ListComparisonFn<T>): ListNode<T>[];
-    addManyByIndex(values: T[], position: number): ListNode<T>[];
-    addManyHead(values: T[]): ListNode<T>[];
-    addManyTail(values: T[]): ListNode<T>[];
-    drop(): {
-        byIndex: (position: number) => ListNode<T>;
-        byValue: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        byValueAll: (...params: [T] | [any, ListComparisonFn<T>]) => any;
-        head: () => ListNode<T>;
-        tail: () => ListNode<T>;
-    };
-    dropMany(count: number): {
-        byIndex: (position: number) => ListNode<T>[];
-        head: () => ListNode<T>[];
-        tail: () => ListNode<T>[];
-    };
-    dropByIndex(position: number): ListNode<T> | undefined;
-    dropByValue(value: T): ListNode<T> | undefined;
-    dropByValue(value: any, compareFn: ListComparisonFn<T>): ListNode<T> | undefined;
-    dropByValueAll(value: T): ListNode<T>[];
-    dropByValueAll(value: any, compareFn: ListComparisonFn<T>): ListNode<T>[];
-    dropHead(): ListNode<T> | undefined;
-    dropTail(): ListNode<T> | undefined;
-    dropManyByIndex(count: number, position: number): ListNode<T>[];
-    dropManyHead(count: Exclude<number, 0>): ListNode<T>[];
-    dropManyTail(count: Exclude<number, 0>): ListNode<T>[];
-    find(predicate: ListIteratorFn<T>): ListNode<T> | undefined;
-    findIndex(predicate: ListIteratorFn<T>): number;
-    forEach<R = boolean>(iteratorFn: ListIteratorFn<T, R>): void;
-    get(position: number): ListNode<T> | undefined;
-    indexOf(value: T): number;
-    indexOf(value: any, compareFn: ListComparisonFn<T>): number;
-    toArray(): T[];
-    toNodeArray(): ListNode<T>[];
-    toString(mapperFn?: ListMapperFn<T>): string;
-    [Symbol.iterator](): any;
-}
-type ListMapperFn<T = any> = (value: T) => any;
-type ListComparisonFn<T = any> = (value1: T, value2: any) => boolean;
-type ListIteratorFn<T = any, R = boolean> = (node: ListNode<T>, index?: number, list?: LinkedList) => R;
-
 declare const enum ePropType {
     Boolean = "boolean",
     Date = "date",
@@ -432,12 +351,12 @@ declare class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewI
     selected: any[];
     selectionChange: EventEmitter<any[]>;
     hasAtLeastOnePermittedAction: boolean;
-    readonly columnWidths: number[];
     readonly propList: EntityPropList<R>;
     readonly actionList: EntityActionList<R>;
     readonly trackByFn: TrackByFunction<EntityProp<R>>;
+    private readonly _actionsColumnWidth;
+    readonly columnWidths: i0.Signal<number[]>;
     constructor();
-    private setColumnWidths;
     private getIcon;
     private getEnum;
     getContent(prop: EntityProp<R>, data: PropData): Observable<string>;

package/fesm2022/abp-ng.components-extensible.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, Input, Directive, ViewChildren, LOCALE_ID, EventEmitter, Output, Pipe, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, Input, Directive, ViewChildren, LOCALE_ID, EventEmitter, signal, computed, Output, Pipe, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet, AsyncPipe, NgComponentOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -13,7 +13,7 @@ import * as i2$1 from '@abp/ng.core';
 import { RestService, ConfigStateService, AbpValidators, LocalizationPipe, TrackByService, ShowPasswordDirective, PermissionDirective, LocalizationModule, escapeHtmlChars, TimezoneService, PermissionService, UtcToLocalPipe, LocalizationService, createLocalizationPipeKeyGenerator, CoreModule } from '@abp/ng.core';
 import { of, map as map$1, filter, merge, pipe, zip } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged, switchMap, filter as filter$1, take } from 'rxjs/operators';
-import compare from 'just-compare';
+import { LinkedList } from '@abp/utils';
 import * as i1$1 from '@swimlane/ngx-datatable';
 import { SelectionType, NgxDatatableModule } from '@swimlane/ngx-datatable';
 
@@ -141,296 +141,6 @@ const EXTENSIONS_FORM_PROP_DATA = new InjectionToken('EXTENSIONS_FORM_PROP_DATA'
 
 const EXTRA_PROPERTIES_KEY = 'extraProperties';
 
-/** @description This file is referenced from here npm/packs/utils/projects/utils/src/lib/linked-list.ts */
-/* eslint-disable prefer-spread */
-/* tslint:disable:no-non-null-assertion */
-class ListNode {
-    constructor(value) {
-        this.value = value;
-    }
-}
-class LinkedList {
-    constructor() {
-        this.size = 0;
-    }
-    get head() {
-        return this.first;
-    }
-    get tail() {
-        return this.last;
-    }
-    get length() {
-        return this.size;
-    }
-    attach(value, previousNode, nextNode) {
-        if (!previousNode)
-            return this.addHead(value);
-        if (!nextNode)
-            return this.addTail(value);
-        const node = new ListNode(value);
-        node.previous = previousNode;
-        previousNode.next = node;
-        node.next = nextNode;
-        nextNode.previous = node;
-        this.size++;
-        return node;
-    }
-    attachMany(values, previousNode, nextNode) {
-        if (!values.length)
-            return [];
-        if (!previousNode)
-            return this.addManyHead(values);
-        if (!nextNode)
-            return this.addManyTail(values);
-        const list = new LinkedList();
-        list.addManyTail(values);
-        list.first.previous = previousNode;
-        previousNode.next = list.first;
-        list.last.next = nextNode;
-        nextNode.previous = list.last;
-        this.size += values.length;
-        return list.toNodeArray();
-    }
-    detach(node) {
-        if (!node.previous)
-            return this.dropHead();
-        if (!node.next)
-            return this.dropTail();
-        node.previous.next = node.next;
-        node.next.previous = node.previous;
-        this.size--;
-        return node;
-    }
-    add(value) {
-        return {
-            after: (...params) => this.addAfter.call(this, value, ...params),
-            before: (...params) => this.addBefore.call(this, value, ...params),
-            byIndex: (position) => this.addByIndex(value, position),
-            head: () => this.addHead(value),
-            tail: () => this.addTail(value),
-        };
-    }
-    addMany(values) {
-        return {
-            after: (...params) => this.addManyAfter.call(this, values, ...params),
-            before: (...params) => this.addManyBefore.call(this, values, ...params),
-            byIndex: (position) => this.addManyByIndex(values, position),
-            head: () => this.addManyHead(values),
-            tail: () => this.addManyTail(values),
-        };
-    }
-    addAfter(value, previousValue, compareFn = compare) {
-        const previous = this.find(node => compareFn(node.value, previousValue));
-        return previous ? this.attach(value, previous, previous.next) : this.addTail(value);
-    }
-    addBefore(value, nextValue, compareFn = compare) {
-        const next = this.find(node => compareFn(node.value, nextValue));
-        return next ? this.attach(value, next.previous, next) : this.addHead(value);
-    }
-    addByIndex(value, position) {
-        if (position < 0)
-            position += this.size;
-        else if (position >= this.size)
-            return this.addTail(value);
-        if (position <= 0)
-            return this.addHead(value);
-        const next = this.get(position);
-        return this.attach(value, next.previous, next);
-    }
-    addHead(value) {
-        const node = new ListNode(value);
-        node.next = this.first;
-        if (this.first)
-            this.first.previous = node;
-        else
-            this.last = node;
-        this.first = node;
-        this.size++;
-        return node;
-    }
-    addTail(value) {
-        const node = new ListNode(value);
-        if (this.first) {
-            node.previous = this.last;
-            this.last.next = node;
-            this.last = node;
-        }
-        else {
-            this.first = node;
-            this.last = node;
-        }
-        this.size++;
-        return node;
-    }
-    addManyAfter(values, previousValue, compareFn = compare) {
-        const previous = this.find(node => compareFn(node.value, previousValue));
-        return previous ? this.attachMany(values, previous, previous.next) : this.addManyTail(values);
-    }
-    addManyBefore(values, nextValue, compareFn = compare) {
-        const next = this.find(node => compareFn(node.value, nextValue));
-        return next ? this.attachMany(values, next.previous, next) : this.addManyHead(values);
-    }
-    addManyByIndex(values, position) {
-        if (position < 0)
-            position += this.size;
-        if (position <= 0)
-            return this.addManyHead(values);
-        if (position >= this.size)
-            return this.addManyTail(values);
-        const next = this.get(position);
-        return this.attachMany(values, next.previous, next);
-    }
-    addManyHead(values) {
-        return values.reduceRight((nodes, value) => {
-            nodes.unshift(this.addHead(value));
-            return nodes;
-        }, []);
-    }
-    addManyTail(values) {
-        return values.map(value => this.addTail(value));
-    }
-    drop() {
-        return {
-            byIndex: (position) => this.dropByIndex(position),
-            byValue: (...params) => this.dropByValue.apply(this, params),
-            byValueAll: (...params) => this.dropByValueAll.apply(this, params),
-            head: () => this.dropHead(),
-            tail: () => this.dropTail(),
-        };
-    }
-    dropMany(count) {
-        return {
-            byIndex: (position) => this.dropManyByIndex(count, position),
-            head: () => this.dropManyHead(count),
-            tail: () => this.dropManyTail(count),
-        };
-    }
-    dropByIndex(position) {
-        if (position < 0)
-            position += this.size;
-        const current = this.get(position);
-        return current ? this.detach(current) : undefined;
-    }
-    dropByValue(value, compareFn = compare) {
-        const position = this.findIndex(node => compareFn(node.value, value));
-        return position < 0 ? undefined : this.dropByIndex(position);
-    }
-    dropByValueAll(value, compareFn = compare) {
-        const dropped = [];
-        for (let current = this.first, position = 0; current; position++, current = current.next) {
-            if (compareFn(current.value, value)) {
-                dropped.push(this.dropByIndex(position - dropped.length));
-            }
-        }
-        return dropped;
-    }
-    dropHead() {
-        const head = this.first;
-        if (head) {
-            this.first = head.next;
-            if (this.first)
-                this.first.previous = undefined;
-            else
-                this.last = undefined;
-            this.size--;
-            return head;
-        }
-        return undefined;
-    }
-    dropTail() {
-        const tail = this.last;
-        if (tail) {
-            this.last = tail.previous;
-            if (this.last)
-                this.last.next = undefined;
-            else
-                this.first = undefined;
-            this.size--;
-            return tail;
-        }
-        return undefined;
-    }
-    dropManyByIndex(count, position) {
-        if (count <= 0)
-            return [];
-        if (position < 0)
-            position = Math.max(position + this.size, 0);
-        else if (position >= this.size)
-            return [];
-        count = Math.min(count, this.size - position);
-        const dropped = [];
-        while (count--) {
-            const current = this.get(position);
-            dropped.push(this.detach(current));
-        }
-        return dropped;
-    }
-    dropManyHead(count) {
-        if (count <= 0)
-            return [];
-        count = Math.min(count, this.size);
-        const dropped = [];
-        while (count--)
-            dropped.unshift(this.dropHead());
-        return dropped;
-    }
-    dropManyTail(count) {
-        if (count <= 0)
-            return [];
-        count = Math.min(count, this.size);
-        const dropped = [];
-        while (count--)
-            dropped.push(this.dropTail());
-        return dropped;
-    }
-    find(predicate) {
-        for (let current = this.first, position = 0; current; position++, current = current.next) {
-            if (predicate(current, position, this))
-                return current;
-        }
-        return undefined;
-    }
-    findIndex(predicate) {
-        for (let current = this.first, position = 0; current; position++, current = current.next) {
-            if (predicate(current, position, this))
-                return position;
-        }
-        return -1;
-    }
-    forEach(iteratorFn) {
-        for (let node = this.first, position = 0; node; position++, node = node.next) {
-            iteratorFn(node, position, this);
-        }
-    }
-    get(position) {
-        return this.find((_, index) => position === index);
-    }
-    indexOf(value, compareFn = compare) {
-        return this.findIndex(node => compareFn(node.value, value));
-    }
-    toArray() {
-        const array = new Array(this.size);
-        this.forEach((node, index) => (array[index] = node.value));
-        return array;
-    }
-    toNodeArray() {
-        const array = new Array(this.size);
-        this.forEach((node, index) => (array[index] = node));
-        return array;
-    }
-    toString(mapperFn = JSON.stringify) {
-        return this.toArray()
-            .map(value => mapperFn(value))
-            .join(' <-> ');
-    }
-    // Cannot use Generator type because of ng-packagr
-    *[Symbol.iterator]() {
-        for (let node = this.first, position = 0; node; position++, node = node.next) {
-            yield node.value;
-        }
-    }
-}
-
 class PropList extends LinkedList {
 }
 class PropData {
@@ -1270,10 +980,10 @@ class ExtensibleTableComponent {
         this._actionsText = value;
     }
     get actionsText() {
-        return this._actionsText ?? (this.actionList.length > 1 ? 'AbpUi::Actions' : '');
+        return this._actionsText ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
     }
     set actionsColumnWidth(width) {
-        this.setColumnWidths(width ? Number(width) : undefined);
+        this._actionsColumnWidth.set(width ? Number(width) : undefined);
     }
     set selectionType(value) {
         this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
@@ -1293,6 +1003,16 @@ class ExtensibleTableComponent {
         this.selected = [];
         this.selectionChange = new EventEmitter();
         this.trackByFn = (_, item) => item.name;
+        // Signal for actions column width
+        this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH);
+        this.columnWidths = computed(() => {
+            const actionsColumn = this._actionsColumnWidth();
+            const widths = [actionsColumn];
+            this.propList.forEach(({ value: prop }) => {
+                widths.push(prop.columnWidth);
+            });
+            return widths;
+        });
         const extensions = this.#injector.get(ExtensionsService);
         const name = this.#injector.get(EXTENSIONS_IDENTIFIER);
         this.propList = extensions.entityProps.get(name).props;
@@ -1300,14 +1020,6 @@ class ExtensibleTableComponent {
             .actions;
         this.hasAtLeastOnePermittedAction =
             this.permissionService.filterItemsByPolicy(this.actionList.toArray().map(action => ({ requiredPolicy: action.permission }))).length > 0;
-        this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
-    }
-    setColumnWidths(actionsColumn) {
-        const widths = [actionsColumn];
-        this.propList.forEach(({ value: prop }) => {
-            widths.push(prop.columnWidth);
-        });
-        this.columnWidths = widths;
     }
     getIcon(value) {
         return value
@@ -1396,7 +1108,7 @@ class ExtensibleTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"columnWidths[0]\"\r\n      [width]=\"columnWidths[0]\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i + 1] || 200\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"columnWidths[0] ?? undefined\"\r\n      [width]=\"columnWidths[0] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[0]\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i + 1] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i + 1]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
@@ -1413,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AsyncPipe,
                         NgTemplateOutlet,
                         NgComponentOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"columnWidths[0]\"\r\n      [width]=\"columnWidths[0]\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i + 1] || 200\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"columnWidths[0] ?? undefined\"\r\n      [width]=\"columnWidths[0] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[0]\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i + 1] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i + 1]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { actionsText: [{
                 type: Input
             }], data: [{