@coreui/angular-pro 4.4.17 → 4.4.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/smart-table/smart-table/smart-table.component.mjs +10 -4
- 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 +5 -5
- package/esm2020/lib/table/table.type.mjs +1 -1
- package/fesm2015/coreui-angular-pro.mjs +35 -11
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +34 -11
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table/smart-table.component.d.ts +6 -0
- package/lib/smart-table/smart-table-head/smart-table-head.component.d.ts +4 -1
- package/lib/smart-table/smart-table.type.d.ts +2 -0
- package/lib/table/table-active.directive.d.ts +0 -1
- package/lib/table/table.type.d.ts +3 -0
- package/package.json +1 -1
|
@@ -13861,6 +13861,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
13861
13861
|
}] } });
|
|
13862
13862
|
|
|
13863
13863
|
class TableActiveDirective {
|
|
13864
|
+
constructor() {
|
|
13865
|
+
this._active = false;
|
|
13866
|
+
}
|
|
13864
13867
|
/**
|
|
13865
13868
|
* Highlight a table row or cell
|
|
13866
13869
|
* @type boolean
|
|
@@ -13878,9 +13881,6 @@ class TableActiveDirective {
|
|
|
13878
13881
|
'table-active': this.active,
|
|
13879
13882
|
};
|
|
13880
13883
|
}
|
|
13881
|
-
constructor() {
|
|
13882
|
-
this._active = false;
|
|
13883
|
-
}
|
|
13884
13884
|
}
|
|
13885
13885
|
TableActiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13886
13886
|
TableActiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TableActiveDirective, isStandalone: true, selector: "[cTableActive]", inputs: { active: ["cTableActive", "active"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
|
|
@@ -13890,7 +13890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
13890
13890
|
selector: '[cTableActive]',
|
|
13891
13891
|
standalone: true
|
|
13892
13892
|
}]
|
|
13893
|
-
}],
|
|
13893
|
+
}], propDecorators: { active: [{
|
|
13894
13894
|
type: Input,
|
|
13895
13895
|
args: ['cTableActive']
|
|
13896
13896
|
}], hostClasses: [{
|
|
@@ -14355,7 +14355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14355
14355
|
}]
|
|
14356
14356
|
}] });
|
|
14357
14357
|
|
|
14358
|
-
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
14358
|
+
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_columnLabelTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
14359
14359
|
class SmartTableHeadComponent {
|
|
14360
14360
|
constructor() {
|
|
14361
14361
|
this.columnFilterState = {};
|
|
@@ -14365,6 +14365,7 @@ class SmartTableHeadComponent {
|
|
|
14365
14365
|
_SmartTableHeadComponent_selectedAllPreviousValue.set(this, void 0);
|
|
14366
14366
|
_SmartTableHeadComponent_selectedAll.set(this, false);
|
|
14367
14367
|
_SmartTableHeadComponent_columnFilterTemplates.set(this, {});
|
|
14368
|
+
_SmartTableHeadComponent_columnLabelTemplates.set(this, {});
|
|
14368
14369
|
_SmartTableHeadComponent_summaryRowTemplate.set(this, null);
|
|
14369
14370
|
// todo
|
|
14370
14371
|
// @Input() sortingIcon?: string | TemplateRef<any>;
|
|
@@ -14401,6 +14402,14 @@ class SmartTableHeadComponent {
|
|
|
14401
14402
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnFilterTemplates, "f");
|
|
14402
14403
|
}
|
|
14403
14404
|
;
|
|
14405
|
+
set columnLabelTemplates(value) {
|
|
14406
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnLabelTemplates, Object.assign({}, value), "f");
|
|
14407
|
+
}
|
|
14408
|
+
;
|
|
14409
|
+
get columnLabelTemplates() {
|
|
14410
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnLabelTemplates, "f");
|
|
14411
|
+
}
|
|
14412
|
+
;
|
|
14404
14413
|
set summaryRowTemplate(value) {
|
|
14405
14414
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_summaryRowTemplate, value, "f");
|
|
14406
14415
|
}
|
|
@@ -14500,14 +14509,21 @@ class SmartTableHeadComponent {
|
|
|
14500
14509
|
var _a;
|
|
14501
14510
|
return `columnFilter_${(_a = this.columnKey(column)) !== null && _a !== void 0 ? _a : '_undefined'}`;
|
|
14502
14511
|
}
|
|
14512
|
+
getColumnLabel(column) {
|
|
14513
|
+
var _a, _b;
|
|
14514
|
+
if (typeof column === 'object' && column._labelTemplateId) {
|
|
14515
|
+
return `columnLabel_${(_a = column._labelTemplateId) !== null && _a !== void 0 ? _a : '_undefined'}`;
|
|
14516
|
+
}
|
|
14517
|
+
return `columnLabel_${(_b = this.columnKey(column)) !== null && _b !== void 0 ? _b : '_undefined'}`;
|
|
14518
|
+
}
|
|
14503
14519
|
get columnFilterEvent() {
|
|
14504
14520
|
return (typeof this.columnFilter === 'object' && this.columnFilter.lazy) ? 'change' : 'input';
|
|
14505
14521
|
}
|
|
14506
14522
|
;
|
|
14507
14523
|
}
|
|
14508
|
-
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14524
|
+
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_columnLabelTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14509
14525
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14510
|
-
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 <
|
|
14526
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", columnLabelTemplates: "columnLabelTemplates", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n />\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n <c-smart-table-column-filter\n (valueChange)=\"handleColumnFilterValueChange($event)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [column]=\"column\"\n [delay]=\"300\"\n [onEvent]=\"columnFilterEvent\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFilterInput\n sizing=\"sm\"\n />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14511
14527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
14512
14528
|
type: Component,
|
|
14513
14529
|
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
@@ -14525,7 +14541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14525
14541
|
NgSwitchDefault,
|
|
14526
14542
|
NgTemplateOutlet,
|
|
14527
14543
|
SmartTableColumnLabelPipe
|
|
14528
|
-
], 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 <
|
|
14544
|
+
], template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n />\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n />\n </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n <c-smart-table-column-filter\n (valueChange)=\"handleColumnFilterValueChange($event)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [column]=\"column\"\n [delay]=\"300\"\n [onEvent]=\"columnFilterEvent\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFilterInput\n sizing=\"sm\"\n />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
|
|
14529
14545
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
14530
14546
|
type: Input
|
|
14531
14547
|
}], columnFilterState: [{
|
|
@@ -14546,6 +14562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14546
14562
|
type: Input
|
|
14547
14563
|
}], columnFilterTemplates: [{
|
|
14548
14564
|
type: Input
|
|
14565
|
+
}], columnLabelTemplates: [{
|
|
14566
|
+
type: Input
|
|
14549
14567
|
}], summaryRowTemplate: [{
|
|
14550
14568
|
type: Input
|
|
14551
14569
|
}], columnFilterStateChange: [{
|
|
@@ -14643,6 +14661,7 @@ class SmartTableComponent {
|
|
|
14643
14661
|
this.tableFilterValueChange = new EventEmitter();
|
|
14644
14662
|
this.templates = { tableDetails: null, tableData: null };
|
|
14645
14663
|
this.columnFilterTemplates = {};
|
|
14664
|
+
this.columnLabelTemplates = {};
|
|
14646
14665
|
this.summaryRowTemplate = null;
|
|
14647
14666
|
this._columnFiltered = [];
|
|
14648
14667
|
this.itemsDiffer = this.iterableDiffers.find(this.items).create();
|
|
@@ -14777,6 +14796,10 @@ class SmartTableComponent {
|
|
|
14777
14796
|
this.columnFilterTemplates[child.id] = child.templateRef;
|
|
14778
14797
|
return;
|
|
14779
14798
|
}
|
|
14799
|
+
if (child.id.startsWith('columnLabel_')) {
|
|
14800
|
+
this.columnLabelTemplates[child.id] = child.templateRef;
|
|
14801
|
+
return;
|
|
14802
|
+
}
|
|
14780
14803
|
if (child.id === 'tableSummaryRow') {
|
|
14781
14804
|
this.summaryRowTemplate = child.templateRef;
|
|
14782
14805
|
return;
|
|
@@ -14784,6 +14807,7 @@ class SmartTableComponent {
|
|
|
14784
14807
|
this.templates[child.id] = child.templateRef;
|
|
14785
14808
|
});
|
|
14786
14809
|
this.columnFilterTemplates = Object.assign({}, this.columnFilterTemplates);
|
|
14810
|
+
this.columnLabelTemplates = Object.assign({}, this.columnLabelTemplates);
|
|
14787
14811
|
}
|
|
14788
14812
|
get selectedAll() {
|
|
14789
14813
|
const selected = this.items.some((item) => item._selected === true);
|
|
@@ -14815,7 +14839,7 @@ class SmartTableComponent {
|
|
|
14815
14839
|
}
|
|
14816
14840
|
get genCols() {
|
|
14817
14841
|
var _a;
|
|
14818
|
-
return Object.keys(this._items ? (_a = this._items[0]) !== null && _a !== void 0 ? _a : {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14842
|
+
return Object.keys(this._items.length ? (_a = this._items[0]) !== null && _a !== void 0 ? _a : {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14819
14843
|
}
|
|
14820
14844
|
get rawColumnNames() {
|
|
14821
14845
|
return this._columns ? this._columns.map(column => typeof column === 'object' ? column.key : column)
|
|
@@ -15048,7 +15072,7 @@ class SmartTableComponent {
|
|
|
15048
15072
|
}
|
|
15049
15073
|
}
|
|
15050
15074
|
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 });
|
|
15051
|
-
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"] }] });
|
|
15075
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\" />\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n />\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n />\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\"\n />\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n />\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] });
|
|
15052
15076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
15053
15077
|
type: Component,
|
|
15054
15078
|
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', standalone: true, imports: [
|
|
@@ -15071,7 +15095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
15071
15095
|
TableActiveDirective,
|
|
15072
15096
|
TableColorDirective,
|
|
15073
15097
|
TableDirective
|
|
15074
|
-
], 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\"
|
|
15098
|
+
], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\" />\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n />\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [columnLabelTemplates]=\"columnLabelTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n />\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\"\n />\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n />\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
15075
15099
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
15076
15100
|
type: Input
|
|
15077
15101
|
}], cleaner: [{
|