@coreui/angular-pro 4.4.16 → 4.4.17
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 +8 -3
- 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 +24 -23
- package/fesm2015/coreui-angular-pro.mjs +53 -24
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +53 -24
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table/smart-table.component.d.ts +1 -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 +5 -6
- package/package.json +1 -1
|
@@ -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_summaryRowTemplate;
|
|
14208
14232
|
class SmartTableHeadComponent {
|
|
14209
14233
|
constructor() {
|
|
14210
14234
|
this.columnFilterState = {};
|
|
@@ -14213,12 +14237,13 @@ 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_summaryRowTemplate.set(this, null);
|
|
14217
14242
|
// todo
|
|
14218
14243
|
// @Input() sortingIcon?: string | TemplateRef<any>;
|
|
14219
14244
|
// @Input() sortingIconAscending?: string | TemplateRef<any>;
|
|
14220
14245
|
// @Input() sortingIconDescending?: string | TemplateRef<any>;
|
|
14221
|
-
this.indeterminate = new BehaviorSubject(false);
|
|
14246
|
+
this.indeterminate$ = new BehaviorSubject(false);
|
|
14222
14247
|
this.columnFilterStateChange = new EventEmitter();
|
|
14223
14248
|
this.sorterStateChange = new EventEmitter();
|
|
14224
14249
|
this.selectAllChange = new EventEmitter();
|
|
@@ -14231,7 +14256,7 @@ class SmartTableHeadComponent {
|
|
|
14231
14256
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectAll, "f");
|
|
14232
14257
|
}
|
|
14233
14258
|
set selectedAll(value) {
|
|
14234
|
-
this.indeterminate
|
|
14259
|
+
this.indeterminate$.next(value === 'indeterminate');
|
|
14235
14260
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAll, value === 'indeterminate' ? false : coerceBooleanProperty(value), "f");
|
|
14236
14261
|
if (value !== 'indeterminate') {
|
|
14237
14262
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAllPreviousValue, __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f"), "f");
|
|
@@ -14242,11 +14267,19 @@ class SmartTableHeadComponent {
|
|
|
14242
14267
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f");
|
|
14243
14268
|
}
|
|
14244
14269
|
set columnFilterTemplates(value) {
|
|
14245
|
-
this
|
|
14270
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnFilterTemplates, { ...value }, "f");
|
|
14246
14271
|
}
|
|
14247
14272
|
;
|
|
14248
14273
|
get columnFilterTemplates() {
|
|
14249
|
-
return this
|
|
14274
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnFilterTemplates, "f");
|
|
14275
|
+
}
|
|
14276
|
+
;
|
|
14277
|
+
set summaryRowTemplate(value) {
|
|
14278
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_summaryRowTemplate, value, "f");
|
|
14279
|
+
}
|
|
14280
|
+
;
|
|
14281
|
+
get summaryRowTemplate() {
|
|
14282
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_summaryRowTemplate, "f");
|
|
14250
14283
|
}
|
|
14251
14284
|
;
|
|
14252
14285
|
get hostClasses() {
|
|
@@ -14287,9 +14320,6 @@ class SmartTableHeadComponent {
|
|
|
14287
14320
|
}
|
|
14288
14321
|
return style;
|
|
14289
14322
|
}
|
|
14290
|
-
columnLabel(column) {
|
|
14291
|
-
return typeof column === 'object' ? column.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
|
|
14292
|
-
}
|
|
14293
14323
|
columnKey(column) {
|
|
14294
14324
|
return typeof column === 'object' ? column.key : column;
|
|
14295
14325
|
}
|
|
@@ -14303,15 +14333,6 @@ class SmartTableHeadComponent {
|
|
|
14303
14333
|
}
|
|
14304
14334
|
return 0;
|
|
14305
14335
|
}
|
|
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
14336
|
handleSortClick(column, i) {
|
|
14316
14337
|
if (this.columnSorterEnabled(column)) {
|
|
14317
14338
|
const columnKey = this.columnKey(column);
|
|
@@ -14353,9 +14374,9 @@ class SmartTableHeadComponent {
|
|
|
14353
14374
|
}
|
|
14354
14375
|
;
|
|
14355
14376
|
}
|
|
14356
|
-
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap();
|
|
14377
|
+
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14357
14378
|
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 <div class=\"d-inline\">{{
|
|
14379
|
+
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", 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 <div class=\"d-inline\">{{ column | columnLabel }}</div>\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 #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
14380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
14360
14381
|
type: Component,
|
|
14361
14382
|
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
@@ -14371,8 +14392,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14371
14392
|
NgSwitch,
|
|
14372
14393
|
NgSwitchCase,
|
|
14373
14394
|
NgSwitchDefault,
|
|
14374
|
-
NgTemplateOutlet
|
|
14375
|
-
|
|
14395
|
+
NgTemplateOutlet,
|
|
14396
|
+
SmartTableColumnLabelPipe
|
|
14397
|
+
], 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 <div class=\"d-inline\">{{ column | columnLabel }}</div>\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 #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
14398
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
14377
14399
|
type: Input
|
|
14378
14400
|
}], columnFilterState: [{
|
|
@@ -14393,6 +14415,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14393
14415
|
type: Input
|
|
14394
14416
|
}], columnFilterTemplates: [{
|
|
14395
14417
|
type: Input
|
|
14418
|
+
}], summaryRowTemplate: [{
|
|
14419
|
+
type: Input
|
|
14396
14420
|
}], columnFilterStateChange: [{
|
|
14397
14421
|
type: Output
|
|
14398
14422
|
}], sorterStateChange: [{
|
|
@@ -14488,6 +14512,7 @@ class SmartTableComponent {
|
|
|
14488
14512
|
this.tableFilterValueChange = new EventEmitter();
|
|
14489
14513
|
this.templates = { tableDetails: null, tableData: null };
|
|
14490
14514
|
this.columnFilterTemplates = {};
|
|
14515
|
+
this.summaryRowTemplate = null;
|
|
14491
14516
|
this._columnFiltered = [];
|
|
14492
14517
|
this.itemsDiffer = this.iterableDiffers.find(this.items).create();
|
|
14493
14518
|
this.itemsFilteredDiffer = this.iterableDiffers.find(this._columnFiltered).create();
|
|
@@ -14621,6 +14646,10 @@ class SmartTableComponent {
|
|
|
14621
14646
|
this.columnFilterTemplates[child.id] = child.templateRef;
|
|
14622
14647
|
return;
|
|
14623
14648
|
}
|
|
14649
|
+
if (child.id === 'tableSummaryRow') {
|
|
14650
|
+
this.summaryRowTemplate = child.templateRef;
|
|
14651
|
+
return;
|
|
14652
|
+
}
|
|
14624
14653
|
this.templates[child.id] = child.templateRef;
|
|
14625
14654
|
});
|
|
14626
14655
|
this.columnFilterTemplates = { ...this.columnFilterTemplates };
|
|
@@ -14888,7 +14917,7 @@ class SmartTableComponent {
|
|
|
14888
14917
|
}
|
|
14889
14918
|
}
|
|
14890
14919
|
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"] }] });
|
|
14920
|
+
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 ?? 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\" />\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-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", "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
14921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
14893
14922
|
type: Component,
|
|
14894
14923
|
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', standalone: true, imports: [
|
|
@@ -14911,7 +14940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14911
14940
|
TableActiveDirective,
|
|
14912
14941
|
TableColorDirective,
|
|
14913
14942
|
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\"></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"] }]
|
|
14943
|
+
], 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\" />\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-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"] }]
|
|
14915
14944
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
14916
14945
|
type: Input
|
|
14917
14946
|
}], cleaner: [{
|