@abp/ng.components 9.3.2 → 9.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -351,12 +351,12 @@ declare class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewI
351
351
  selected: any[];
352
352
  selectionChange: EventEmitter<any[]>;
353
353
  hasAtLeastOnePermittedAction: boolean;
354
- readonly columnWidths: number[];
355
354
  readonly propList: EntityPropList<R>;
356
355
  readonly actionList: EntityActionList<R>;
357
356
  readonly trackByFn: TrackByFunction<EntityProp<R>>;
357
+ private readonly _actionsColumnWidth;
358
+ readonly columnWidths: i0.Signal<number[]>;
358
359
  constructor();
359
- private setColumnWidths;
360
360
  private getIcon;
361
361
  private getEnum;
362
362
  getContent(prop: EntityProp<R>, data: PropData): Observable<string>;
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i5 from '@angular/common';
4
4
  import { CommonModule, NgClass, NgTemplateOutlet, AsyncPipe, NgComponentOutlet } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -983,7 +983,7 @@ class ExtensibleTableComponent {
983
983
  return this._actionsText ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
984
984
  }
985
985
  set actionsColumnWidth(width) {
986
- this.setColumnWidths(width ? Number(width) : undefined);
986
+ this._actionsColumnWidth.set(width ? Number(width) : undefined);
987
987
  }
988
988
  set selectionType(value) {
989
989
  this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
@@ -1003,6 +1003,16 @@ class ExtensibleTableComponent {
1003
1003
  this.selected = [];
1004
1004
  this.selectionChange = new EventEmitter();
1005
1005
  this.trackByFn = (_, item) => item.name;
1006
+ // Signal for actions column width
1007
+ this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH);
1008
+ this.columnWidths = computed(() => {
1009
+ const actionsColumn = this._actionsColumnWidth();
1010
+ const widths = [actionsColumn];
1011
+ this.propList.forEach(({ value: prop }) => {
1012
+ widths.push(prop.columnWidth);
1013
+ });
1014
+ return widths;
1015
+ });
1006
1016
  const extensions = this.#injector.get(ExtensionsService);
1007
1017
  const name = this.#injector.get(EXTENSIONS_IDENTIFIER);
1008
1018
  this.propList = extensions.entityProps.get(name).props;
@@ -1010,14 +1020,6 @@ class ExtensibleTableComponent {
1010
1020
  .actions;
1011
1021
  this.hasAtLeastOnePermittedAction =
1012
1022
  this.permissionService.filterItemsByPolicy(this.actionList.toArray().map(action => ({ requiredPolicy: action.permission }))).length > 0;
1013
- this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
1014
- }
1015
- setColumnWidths(actionsColumn) {
1016
- const widths = [actionsColumn];
1017
- this.propList.forEach(({ value: prop }) => {
1018
- widths.push(prop.columnWidth);
1019
- });
1020
- this.columnWidths = widths;
1021
1023
  }
1022
1024
  getIcon(value) {
1023
1025
  return value
@@ -1106,7 +1108,7 @@ class ExtensibleTableComponent {
1106
1108
  });
1107
1109
  }
1108
1110
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1109
- 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 }); }
1111
+ 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 }); }
1110
1112
  }
1111
1113
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
1112
1114
  type: Component,
@@ -1123,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
1123
1125
  AsyncPipe,
1124
1126
  NgTemplateOutlet,
1125
1127
  NgComponentOutlet,
1126
- ], 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" }]
1128
+ ], 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" }]
1127
1129
  }], ctorParameters: () => [], propDecorators: { actionsText: [{
1128
1130
  type: Input
1129
1131
  }], data: [{