@coreui/angular-pro 4.4.16 → 4.4.18
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.
- package/esm2020/lib/smart-table/smart-table/smart-table.component.mjs +15 -4
- package/esm2020/lib/smart-table/smart-table-head/smart-table-column-label.pipe.mjs +26 -0
- package/esm2020/lib/smart-table/smart-table-head/smart-table-head.component.mjs +41 -23
- package/esm2020/lib/smart-table/smart-table.type.mjs +1 -1
- package/esm2020/lib/table/table-active.directive.mjs +5 -5
- package/esm2020/lib/table/table.type.mjs +1 -1
- package/fesm2015/coreui-angular-pro.mjs +82 -29
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +81 -29
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table/smart-table.component.d.ts +7 -0
- package/lib/smart-table/smart-table-head/smart-table-column-label.pipe.d.ts +9 -0
- package/lib/smart-table/smart-table-head/smart-table-head.component.d.ts +8 -6
- package/lib/smart-table/smart-table.type.d.ts +2 -0
- package/lib/table/table-active.directive.d.ts +0 -1
- package/lib/table/table.type.d.ts +3 -0
- package/package.json +1 -1
|
@@ -13725,6 +13725,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
13725
13725
|
}] } });
|
|
13726
13726
|
|
|
13727
13727
|
class TableActiveDirective {
|
|
13728
|
+
constructor() {
|
|
13729
|
+
this._active = false;
|
|
13730
|
+
}
|
|
13728
13731
|
/**
|
|
13729
13732
|
* Highlight a table row or cell
|
|
13730
13733
|
* @type boolean
|
|
@@ -13742,9 +13745,6 @@ class TableActiveDirective {
|
|
|
13742
13745
|
'table-active': this.active,
|
|
13743
13746
|
};
|
|
13744
13747
|
}
|
|
13745
|
-
constructor() {
|
|
13746
|
-
this._active = false;
|
|
13747
|
-
}
|
|
13748
13748
|
}
|
|
13749
13749
|
TableActiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13750
13750
|
TableActiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TableActiveDirective, isStandalone: true, selector: "[cTableActive]", inputs: { active: ["cTableActive", "active"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
|
|
@@ -13754,7 +13754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
13754
13754
|
selector: '[cTableActive]',
|
|
13755
13755
|
standalone: true
|
|
13756
13756
|
}]
|
|
13757
|
-
}],
|
|
13757
|
+
}], propDecorators: { active: [{
|
|
13758
13758
|
type: Input,
|
|
13759
13759
|
args: ['cTableActive']
|
|
13760
13760
|
}], hostClasses: [{
|
|
@@ -14204,7 +14204,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14204
14204
|
type: Input
|
|
14205
14205
|
}] } });
|
|
14206
14206
|
|
|
14207
|
-
|
|
14207
|
+
class SmartTableColumnLabelPipe {
|
|
14208
|
+
transform(column, ...args) {
|
|
14209
|
+
return typeof column === 'object' ? column?.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
|
|
14210
|
+
}
|
|
14211
|
+
prettifyName(name) {
|
|
14212
|
+
return name
|
|
14213
|
+
.replace(/[-_.]/g, ' ')
|
|
14214
|
+
.replace(/ +/g, ' ')
|
|
14215
|
+
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
|
14216
|
+
.split(' ')
|
|
14217
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
14218
|
+
.join(' ');
|
|
14219
|
+
}
|
|
14220
|
+
}
|
|
14221
|
+
SmartTableColumnLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableColumnLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
14222
|
+
SmartTableColumnLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SmartTableColumnLabelPipe, isStandalone: true, name: "columnLabel" });
|
|
14223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableColumnLabelPipe, decorators: [{
|
|
14224
|
+
type: Pipe,
|
|
14225
|
+
args: [{
|
|
14226
|
+
name: 'columnLabel',
|
|
14227
|
+
standalone: true
|
|
14228
|
+
}]
|
|
14229
|
+
}] });
|
|
14230
|
+
|
|
14231
|
+
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_columnLabelTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
14208
14232
|
class SmartTableHeadComponent {
|
|
14209
14233
|
constructor() {
|
|
14210
14234
|
this.columnFilterState = {};
|
|
@@ -14213,12 +14237,14 @@ class SmartTableHeadComponent {
|
|
|
14213
14237
|
_SmartTableHeadComponent_selectAll.set(this, true);
|
|
14214
14238
|
_SmartTableHeadComponent_selectedAllPreviousValue.set(this, void 0);
|
|
14215
14239
|
_SmartTableHeadComponent_selectedAll.set(this, false);
|
|
14216
|
-
this
|
|
14240
|
+
_SmartTableHeadComponent_columnFilterTemplates.set(this, {});
|
|
14241
|
+
_SmartTableHeadComponent_columnLabelTemplates.set(this, {});
|
|
14242
|
+
_SmartTableHeadComponent_summaryRowTemplate.set(this, null);
|
|
14217
14243
|
// todo
|
|
14218
14244
|
// @Input() sortingIcon?: string | TemplateRef<any>;
|
|
14219
14245
|
// @Input() sortingIconAscending?: string | TemplateRef<any>;
|
|
14220
14246
|
// @Input() sortingIconDescending?: string | TemplateRef<any>;
|
|
14221
|
-
this.indeterminate = new BehaviorSubject(false);
|
|
14247
|
+
this.indeterminate$ = new BehaviorSubject(false);
|
|
14222
14248
|
this.columnFilterStateChange = new EventEmitter();
|
|
14223
14249
|
this.sorterStateChange = new EventEmitter();
|
|
14224
14250
|
this.selectAllChange = new EventEmitter();
|
|
@@ -14231,7 +14257,7 @@ class SmartTableHeadComponent {
|
|
|
14231
14257
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectAll, "f");
|
|
14232
14258
|
}
|
|
14233
14259
|
set selectedAll(value) {
|
|
14234
|
-
this.indeterminate
|
|
14260
|
+
this.indeterminate$.next(value === 'indeterminate');
|
|
14235
14261
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAll, value === 'indeterminate' ? false : coerceBooleanProperty(value), "f");
|
|
14236
14262
|
if (value !== 'indeterminate') {
|
|
14237
14263
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAllPreviousValue, __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f"), "f");
|
|
@@ -14242,11 +14268,27 @@ class SmartTableHeadComponent {
|
|
|
14242
14268
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f");
|
|
14243
14269
|
}
|
|
14244
14270
|
set columnFilterTemplates(value) {
|
|
14245
|
-
this
|
|
14271
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnFilterTemplates, { ...value }, "f");
|
|
14246
14272
|
}
|
|
14247
14273
|
;
|
|
14248
14274
|
get columnFilterTemplates() {
|
|
14249
|
-
return this
|
|
14275
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnFilterTemplates, "f");
|
|
14276
|
+
}
|
|
14277
|
+
;
|
|
14278
|
+
set columnLabelTemplates(value) {
|
|
14279
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnLabelTemplates, { ...value }, "f");
|
|
14280
|
+
}
|
|
14281
|
+
;
|
|
14282
|
+
get columnLabelTemplates() {
|
|
14283
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnLabelTemplates, "f");
|
|
14284
|
+
}
|
|
14285
|
+
;
|
|
14286
|
+
set summaryRowTemplate(value) {
|
|
14287
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_summaryRowTemplate, value, "f");
|
|
14288
|
+
}
|
|
14289
|
+
;
|
|
14290
|
+
get summaryRowTemplate() {
|
|
14291
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_summaryRowTemplate, "f");
|
|
14250
14292
|
}
|
|
14251
14293
|
;
|
|
14252
14294
|
get hostClasses() {
|
|
@@ -14287,9 +14329,6 @@ class SmartTableHeadComponent {
|
|
|
14287
14329
|
}
|
|
14288
14330
|
return style;
|
|
14289
14331
|
}
|
|
14290
|
-
columnLabel(column) {
|
|
14291
|
-
return typeof column === 'object' ? column.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
|
|
14292
|
-
}
|
|
14293
14332
|
columnKey(column) {
|
|
14294
14333
|
return typeof column === 'object' ? column.key : column;
|
|
14295
14334
|
}
|
|
@@ -14303,15 +14342,6 @@ class SmartTableHeadComponent {
|
|
|
14303
14342
|
}
|
|
14304
14343
|
return 0;
|
|
14305
14344
|
}
|
|
14306
|
-
prettifyName(name) {
|
|
14307
|
-
return name
|
|
14308
|
-
.replace(/[-_.]/g, ' ')
|
|
14309
|
-
.replace(/ +/g, ' ')
|
|
14310
|
-
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
|
14311
|
-
.split(' ')
|
|
14312
|
-
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
14313
|
-
.join(' ');
|
|
14314
|
-
}
|
|
14315
14345
|
handleSortClick(column, i) {
|
|
14316
14346
|
if (this.columnSorterEnabled(column)) {
|
|
14317
14347
|
const columnKey = this.columnKey(column);
|
|
@@ -14348,14 +14378,20 @@ class SmartTableHeadComponent {
|
|
|
14348
14378
|
getColumnFilter(column) {
|
|
14349
14379
|
return `columnFilter_${this.columnKey(column) ?? '_undefined'}`;
|
|
14350
14380
|
}
|
|
14381
|
+
getColumnLabel(column) {
|
|
14382
|
+
if (typeof column === 'object' && column._labelTemplateId) {
|
|
14383
|
+
return `columnLabel_${column._labelTemplateId ?? '_undefined'}`;
|
|
14384
|
+
}
|
|
14385
|
+
return `columnLabel_${this.columnKey(column) ?? '_undefined'}`;
|
|
14386
|
+
}
|
|
14351
14387
|
get columnFilterEvent() {
|
|
14352
14388
|
return (typeof this.columnFilter === 'object' && this.columnFilter.lazy) ? 'change' : 'input';
|
|
14353
14389
|
}
|
|
14354
14390
|
;
|
|
14355
14391
|
}
|
|
14356
|
-
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap();
|
|
14392
|
+
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_columnLabelTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14357
14393
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14358
|
-
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n />\n </ng-template>\n <
|
|
14394
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", columnLabelTemplates: "columnLabelTemplates", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n />\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n <c-smart-table-column-filter\n (valueChange)=\"handleColumnFilterValueChange($event)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [column]=\"column\"\n [delay]=\"300\"\n [onEvent]=\"columnFilterEvent\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFilterInput\n sizing=\"sm\"\n />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14359
14395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
14360
14396
|
type: Component,
|
|
14361
14397
|
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
@@ -14371,8 +14407,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14371
14407
|
NgSwitch,
|
|
14372
14408
|
NgSwitchCase,
|
|
14373
14409
|
NgSwitchDefault,
|
|
14374
|
-
NgTemplateOutlet
|
|
14375
|
-
|
|
14410
|
+
NgTemplateOutlet,
|
|
14411
|
+
SmartTableColumnLabelPipe
|
|
14412
|
+
], template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n />\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n <c-smart-table-column-filter\n (valueChange)=\"handleColumnFilterValueChange($event)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [column]=\"column\"\n [delay]=\"300\"\n [onEvent]=\"columnFilterEvent\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFilterInput\n sizing=\"sm\"\n />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
|
|
14376
14413
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
14377
14414
|
type: Input
|
|
14378
14415
|
}], columnFilterState: [{
|
|
@@ -14393,6 +14430,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14393
14430
|
type: Input
|
|
14394
14431
|
}], columnFilterTemplates: [{
|
|
14395
14432
|
type: Input
|
|
14433
|
+
}], columnLabelTemplates: [{
|
|
14434
|
+
type: Input
|
|
14435
|
+
}], summaryRowTemplate: [{
|
|
14436
|
+
type: Input
|
|
14396
14437
|
}], columnFilterStateChange: [{
|
|
14397
14438
|
type: Output
|
|
14398
14439
|
}], sorterStateChange: [{
|
|
@@ -14488,6 +14529,8 @@ class SmartTableComponent {
|
|
|
14488
14529
|
this.tableFilterValueChange = new EventEmitter();
|
|
14489
14530
|
this.templates = { tableDetails: null, tableData: null };
|
|
14490
14531
|
this.columnFilterTemplates = {};
|
|
14532
|
+
this.columnLabelTemplates = {};
|
|
14533
|
+
this.summaryRowTemplate = null;
|
|
14491
14534
|
this._columnFiltered = [];
|
|
14492
14535
|
this.itemsDiffer = this.iterableDiffers.find(this.items).create();
|
|
14493
14536
|
this.itemsFilteredDiffer = this.iterableDiffers.find(this._columnFiltered).create();
|
|
@@ -14621,9 +14664,18 @@ class SmartTableComponent {
|
|
|
14621
14664
|
this.columnFilterTemplates[child.id] = child.templateRef;
|
|
14622
14665
|
return;
|
|
14623
14666
|
}
|
|
14667
|
+
if (child.id.startsWith('columnLabel_')) {
|
|
14668
|
+
this.columnLabelTemplates[child.id] = child.templateRef;
|
|
14669
|
+
return;
|
|
14670
|
+
}
|
|
14671
|
+
if (child.id === 'tableSummaryRow') {
|
|
14672
|
+
this.summaryRowTemplate = child.templateRef;
|
|
14673
|
+
return;
|
|
14674
|
+
}
|
|
14624
14675
|
this.templates[child.id] = child.templateRef;
|
|
14625
14676
|
});
|
|
14626
14677
|
this.columnFilterTemplates = { ...this.columnFilterTemplates };
|
|
14678
|
+
this.columnLabelTemplates = { ...this.columnLabelTemplates };
|
|
14627
14679
|
}
|
|
14628
14680
|
get selectedAll() {
|
|
14629
14681
|
const selected = this.items.some((item) => item._selected === true);
|
|
@@ -14653,7 +14705,7 @@ class SmartTableComponent {
|
|
|
14653
14705
|
// return this.items ?? [];
|
|
14654
14706
|
}
|
|
14655
14707
|
get genCols() {
|
|
14656
|
-
return Object.keys(this._items ? this._items[0] ?? {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14708
|
+
return Object.keys(this._items.length ? this._items[0] ?? {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14657
14709
|
}
|
|
14658
14710
|
get rawColumnNames() {
|
|
14659
14711
|
return this._columns ? this._columns.map(column => typeof column === 'object' ? column.key : column)
|
|
@@ -14888,7 +14940,7 @@ class SmartTableComponent {
|
|
|
14888
14940
|
}
|
|
14889
14941
|
}
|
|
14890
14942
|
SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
14891
|
-
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\"></ng-content>\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered\"\n [borderless]=\"tableProps?.borderless\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small\"\n [striped]=\"tableProps?.striped\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n ></c-smart-table-head>\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\">\n </c-smart-pagination>\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n >\n </c-smart-table-items-per-page-selector>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] });
|
|
14943
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\" />\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n />\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n />\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\"\n />\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n />\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] });
|
|
14892
14944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
14893
14945
|
type: Component,
|
|
14894
14946
|
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', standalone: true, imports: [
|
|
@@ -14911,7 +14963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14911
14963
|
TableActiveDirective,
|
|
14912
14964
|
TableColorDirective,
|
|
14913
14965
|
TableDirective
|
|
14914
|
-
], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"
|
|
14966
|
+
], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\" />\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n />\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n />\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\"\n />\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n />\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
14915
14967
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
14916
14968
|
type: Input
|
|
14917
14969
|
}], cleaner: [{
|