@coreui/angular-pro 4.2.42 → 4.2.43
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 +9 -3
- package/esm2020/lib/smart-table/smart-table-head/smart-table-head.component.mjs +22 -5
- package/esm2020/lib/smart-table/smart-table.type.mjs +1 -1
- package/esm2020/lib/table/table-active.directive.mjs +2 -2
- package/fesm2015/coreui-angular-pro.mjs +31 -7
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +30 -7
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table/smart-table.component.d.ts +3 -0
- package/lib/smart-table/smart-table-head/smart-table-head.component.d.ts +6 -2
- package/lib/smart-table/smart-table.type.d.ts +2 -0
- package/lib/table/table-active.directive.d.ts +0 -1
- package/package.json +1 -1
|
@@ -13923,7 +13923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
13923
13923
|
args: [{
|
|
13924
13924
|
selector: '[cTableActive]'
|
|
13925
13925
|
}]
|
|
13926
|
-
}],
|
|
13926
|
+
}], propDecorators: { active: [{
|
|
13927
13927
|
type: Input,
|
|
13928
13928
|
args: ['cTableActive']
|
|
13929
13929
|
}], hostClasses: [{
|
|
@@ -14042,7 +14042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14042
14042
|
}]
|
|
14043
14043
|
}] });
|
|
14044
14044
|
|
|
14045
|
-
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
14045
|
+
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_columnLabelTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
14046
14046
|
class SmartTableHeadComponent {
|
|
14047
14047
|
constructor() {
|
|
14048
14048
|
this.columnFilterState = {};
|
|
@@ -14052,6 +14052,7 @@ class SmartTableHeadComponent {
|
|
|
14052
14052
|
_SmartTableHeadComponent_selectedAllPreviousValue.set(this, void 0);
|
|
14053
14053
|
_SmartTableHeadComponent_selectedAll.set(this, false);
|
|
14054
14054
|
_SmartTableHeadComponent_columnFilterTemplates.set(this, {});
|
|
14055
|
+
_SmartTableHeadComponent_columnLabelTemplates.set(this, {});
|
|
14055
14056
|
_SmartTableHeadComponent_summaryRowTemplate.set(this, null);
|
|
14056
14057
|
// todo
|
|
14057
14058
|
// @Input() sortingIcon?: string | TemplateRef<any>;
|
|
@@ -14088,6 +14089,14 @@ class SmartTableHeadComponent {
|
|
|
14088
14089
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnFilterTemplates, "f");
|
|
14089
14090
|
}
|
|
14090
14091
|
;
|
|
14092
|
+
set columnLabelTemplates(value) {
|
|
14093
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnLabelTemplates, Object.assign({}, value), "f");
|
|
14094
|
+
}
|
|
14095
|
+
;
|
|
14096
|
+
get columnLabelTemplates() {
|
|
14097
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnLabelTemplates, "f");
|
|
14098
|
+
}
|
|
14099
|
+
;
|
|
14091
14100
|
set summaryRowTemplate(value) {
|
|
14092
14101
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_summaryRowTemplate, value, "f");
|
|
14093
14102
|
}
|
|
@@ -14187,17 +14196,24 @@ class SmartTableHeadComponent {
|
|
|
14187
14196
|
var _a;
|
|
14188
14197
|
return `columnFilter_${(_a = this.columnKey(column)) !== null && _a !== void 0 ? _a : '_undefined'}`;
|
|
14189
14198
|
}
|
|
14199
|
+
getColumnLabel(column) {
|
|
14200
|
+
var _a, _b;
|
|
14201
|
+
if (typeof column === 'object' && column._labelTemplateId) {
|
|
14202
|
+
return `columnLabel_${(_a = column._labelTemplateId) !== null && _a !== void 0 ? _a : '_undefined'}`;
|
|
14203
|
+
}
|
|
14204
|
+
return `columnLabel_${(_b = this.columnKey(column)) !== null && _b !== void 0 ? _b : '_undefined'}`;
|
|
14205
|
+
}
|
|
14190
14206
|
get columnFilterEvent() {
|
|
14191
14207
|
return (typeof this.columnFilter === 'object' && this.columnFilter.lazy) ? 'change' : 'input';
|
|
14192
14208
|
}
|
|
14193
14209
|
;
|
|
14194
14210
|
}
|
|
14195
|
-
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14211
|
+
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_columnLabelTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14196
14212
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14197
|
-
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableHeadComponent, 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", 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\"></ng-container>\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 </ng-container>\n </ng-template>\n <
|
|
14213
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableHeadComponent, 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\"></ng-container>\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 </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\">\n </ng-container>\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 </ng-container>\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 ></c-smart-table-column-filter>\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\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14198
14214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
14199
14215
|
type: Component,
|
|
14200
|
-
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 </ng-container>\n </ng-template>\n <
|
|
14216
|
+
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\">\n </ng-container>\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 </ng-container>\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 ></c-smart-table-column-filter>\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\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\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"] }]
|
|
14201
14217
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
14202
14218
|
type: Input
|
|
14203
14219
|
}], columnFilterState: [{
|
|
@@ -14218,6 +14234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14218
14234
|
type: Input
|
|
14219
14235
|
}], columnFilterTemplates: [{
|
|
14220
14236
|
type: Input
|
|
14237
|
+
}], columnLabelTemplates: [{
|
|
14238
|
+
type: Input
|
|
14221
14239
|
}], summaryRowTemplate: [{
|
|
14222
14240
|
type: Input
|
|
14223
14241
|
}], columnFilterStateChange: [{
|
|
@@ -14268,6 +14286,7 @@ class SmartTableComponent {
|
|
|
14268
14286
|
this.tableFilterValueChange = new EventEmitter();
|
|
14269
14287
|
this.templates = { tableDetails: null, tableData: null };
|
|
14270
14288
|
this.columnFilterTemplates = {};
|
|
14289
|
+
this.columnLabelTemplates = {};
|
|
14271
14290
|
this.summaryRowTemplate = null;
|
|
14272
14291
|
this._columnFiltered = [];
|
|
14273
14292
|
this.itemsDiffer = this.iterableDiffers.find(this.items).create();
|
|
@@ -14402,6 +14421,10 @@ class SmartTableComponent {
|
|
|
14402
14421
|
this.columnFilterTemplates[child.id] = child.templateRef;
|
|
14403
14422
|
return;
|
|
14404
14423
|
}
|
|
14424
|
+
if (child.id.startsWith('columnLabel_')) {
|
|
14425
|
+
this.columnLabelTemplates[child.id] = child.templateRef;
|
|
14426
|
+
return;
|
|
14427
|
+
}
|
|
14405
14428
|
if (child.id === 'tableSummaryRow') {
|
|
14406
14429
|
this.summaryRowTemplate = child.templateRef;
|
|
14407
14430
|
return;
|
|
@@ -14409,6 +14432,7 @@ class SmartTableComponent {
|
|
|
14409
14432
|
this.templates[child.id] = child.templateRef;
|
|
14410
14433
|
});
|
|
14411
14434
|
this.columnFilterTemplates = Object.assign({}, this.columnFilterTemplates);
|
|
14435
|
+
this.columnLabelTemplates = Object.assign({}, this.columnLabelTemplates);
|
|
14412
14436
|
}
|
|
14413
14437
|
get selectedAll() {
|
|
14414
14438
|
const selected = this.items.some((item) => item._selected === true);
|
|
@@ -14673,10 +14697,10 @@ class SmartTableComponent {
|
|
|
14673
14697
|
}
|
|
14674
14698
|
}
|
|
14675
14699
|
SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
14676
|
-
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableComponent, 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 ?? 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 ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 [summaryRowTemplate]=\"summaryRowTemplate\"\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 ?? 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-container>\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 [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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { 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: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
14700
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableComponent, 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 ?? 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 ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 ></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 ?? 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-container>\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 [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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { 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: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { 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: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
14677
14701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
14678
14702
|
type: Component,
|
|
14679
|
-
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', 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 ?? 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 ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 [summaryRowTemplate]=\"summaryRowTemplate\"\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 ?? 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-container>\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 [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"] }]
|
|
14703
|
+
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', 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 ?? 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 ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\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 ></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 ?? 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-container>\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 [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"] }]
|
|
14680
14704
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
14681
14705
|
type: Input
|
|
14682
14706
|
}], cleaner: [{
|