@coreui/angular-pro 4.2.41 → 4.2.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/smart-table/smart-table/smart-table.component.mjs +9 -4
- package/esm2020/lib/smart-table/smart-table-head/smart-table-column-label.pipe.mjs +25 -0
- package/esm2020/lib/smart-table/smart-table-head/smart-table-head.component.mjs +22 -22
- package/esm2020/lib/smart-table/smart-table.module.mjs +6 -3
- package/esm2020/lib/table/table.type.mjs +1 -1
- package/fesm2015/coreui-angular-pro.mjs +54 -25
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +54 -25
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table/smart-table.component.d.ts +4 -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/lib/smart-table/smart-table.module.d.ts +18 -17
- package/lib/table/table.type.d.ts +8 -5
- package/package.json +1 -1
|
@@ -13894,7 +13894,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
13894
13894
|
type: Input
|
|
13895
13895
|
}] } });
|
|
13896
13896
|
|
|
13897
|
-
|
|
13897
|
+
class SmartTableColumnLabelPipe {
|
|
13898
|
+
transform(column, ...args) {
|
|
13899
|
+
return typeof column === 'object' ? column?.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
|
|
13900
|
+
}
|
|
13901
|
+
prettifyName(name) {
|
|
13902
|
+
return name
|
|
13903
|
+
.replace(/[-_.]/g, ' ')
|
|
13904
|
+
.replace(/ +/g, ' ')
|
|
13905
|
+
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
|
13906
|
+
.split(' ')
|
|
13907
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
13908
|
+
.join(' ');
|
|
13909
|
+
}
|
|
13910
|
+
}
|
|
13911
|
+
SmartTableColumnLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableColumnLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
13912
|
+
SmartTableColumnLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmartTableColumnLabelPipe, name: "columnLabel" });
|
|
13913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableColumnLabelPipe, decorators: [{
|
|
13914
|
+
type: Pipe,
|
|
13915
|
+
args: [{
|
|
13916
|
+
name: 'columnLabel',
|
|
13917
|
+
}]
|
|
13918
|
+
}] });
|
|
13919
|
+
|
|
13920
|
+
var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll, _SmartTableHeadComponent_columnFilterTemplates, _SmartTableHeadComponent_summaryRowTemplate;
|
|
13898
13921
|
class SmartTableHeadComponent {
|
|
13899
13922
|
constructor() {
|
|
13900
13923
|
this.columnFilterState = {};
|
|
@@ -13903,12 +13926,13 @@ class SmartTableHeadComponent {
|
|
|
13903
13926
|
_SmartTableHeadComponent_selectAll.set(this, true);
|
|
13904
13927
|
_SmartTableHeadComponent_selectedAllPreviousValue.set(this, void 0);
|
|
13905
13928
|
_SmartTableHeadComponent_selectedAll.set(this, false);
|
|
13906
|
-
this
|
|
13929
|
+
_SmartTableHeadComponent_columnFilterTemplates.set(this, {});
|
|
13930
|
+
_SmartTableHeadComponent_summaryRowTemplate.set(this, null);
|
|
13907
13931
|
// todo
|
|
13908
13932
|
// @Input() sortingIcon?: string | TemplateRef<any>;
|
|
13909
13933
|
// @Input() sortingIconAscending?: string | TemplateRef<any>;
|
|
13910
13934
|
// @Input() sortingIconDescending?: string | TemplateRef<any>;
|
|
13911
|
-
this.indeterminate = new BehaviorSubject(false);
|
|
13935
|
+
this.indeterminate$ = new BehaviorSubject(false);
|
|
13912
13936
|
this.columnFilterStateChange = new EventEmitter();
|
|
13913
13937
|
this.sorterStateChange = new EventEmitter();
|
|
13914
13938
|
this.selectAllChange = new EventEmitter();
|
|
@@ -13921,7 +13945,7 @@ class SmartTableHeadComponent {
|
|
|
13921
13945
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectAll, "f");
|
|
13922
13946
|
}
|
|
13923
13947
|
set selectedAll(value) {
|
|
13924
|
-
this.indeterminate
|
|
13948
|
+
this.indeterminate$.next(value === 'indeterminate');
|
|
13925
13949
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAll, value === 'indeterminate' ? false : coerceBooleanProperty(value), "f");
|
|
13926
13950
|
if (value !== 'indeterminate') {
|
|
13927
13951
|
__classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAllPreviousValue, __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f"), "f");
|
|
@@ -13932,11 +13956,19 @@ class SmartTableHeadComponent {
|
|
|
13932
13956
|
return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f");
|
|
13933
13957
|
}
|
|
13934
13958
|
set columnFilterTemplates(value) {
|
|
13935
|
-
this
|
|
13959
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_columnFilterTemplates, { ...value }, "f");
|
|
13936
13960
|
}
|
|
13937
13961
|
;
|
|
13938
13962
|
get columnFilterTemplates() {
|
|
13939
|
-
return this
|
|
13963
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_columnFilterTemplates, "f");
|
|
13964
|
+
}
|
|
13965
|
+
;
|
|
13966
|
+
set summaryRowTemplate(value) {
|
|
13967
|
+
__classPrivateFieldSet(this, _SmartTableHeadComponent_summaryRowTemplate, value, "f");
|
|
13968
|
+
}
|
|
13969
|
+
;
|
|
13970
|
+
get summaryRowTemplate() {
|
|
13971
|
+
return __classPrivateFieldGet(this, _SmartTableHeadComponent_summaryRowTemplate, "f");
|
|
13940
13972
|
}
|
|
13941
13973
|
;
|
|
13942
13974
|
get hostClasses() {
|
|
@@ -13977,9 +14009,6 @@ class SmartTableHeadComponent {
|
|
|
13977
14009
|
}
|
|
13978
14010
|
return style;
|
|
13979
14011
|
}
|
|
13980
|
-
columnLabel(column) {
|
|
13981
|
-
return typeof column === 'object' ? column.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
|
|
13982
|
-
}
|
|
13983
14012
|
columnKey(column) {
|
|
13984
14013
|
return typeof column === 'object' ? column.key : column;
|
|
13985
14014
|
}
|
|
@@ -13993,15 +14022,6 @@ class SmartTableHeadComponent {
|
|
|
13993
14022
|
}
|
|
13994
14023
|
return 0;
|
|
13995
14024
|
}
|
|
13996
|
-
prettifyName(name) {
|
|
13997
|
-
return name
|
|
13998
|
-
.replace(/[-_.]/g, ' ')
|
|
13999
|
-
.replace(/ +/g, ' ')
|
|
14000
|
-
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
|
14001
|
-
.split(' ')
|
|
14002
|
-
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
14003
|
-
.join(' ');
|
|
14004
|
-
}
|
|
14005
14025
|
handleSortClick(column, i) {
|
|
14006
14026
|
if (this.columnSorterEnabled(column)) {
|
|
14007
14027
|
const columnKey = this.columnKey(column);
|
|
@@ -14043,12 +14063,12 @@ class SmartTableHeadComponent {
|
|
|
14043
14063
|
}
|
|
14044
14064
|
;
|
|
14045
14065
|
}
|
|
14046
|
-
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap();
|
|
14066
|
+
_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap(), _SmartTableHeadComponent_columnFilterTemplates = new WeakMap(), _SmartTableHeadComponent_summaryRowTemplate = new WeakMap();
|
|
14047
14067
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14048
|
-
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, 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 </ng-container>\n </ng-template>\n <div class=\"d-inline\">{{
|
|
14068
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\">\n </ng-container>\n </ng-template>\n <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 </ng-container>\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 ></c-smart-table-column-filter>\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14049
14069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
14050
14070
|
type: Component,
|
|
14051
|
-
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, 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 </ng-container>\n </ng-template>\n <div class=\"d-inline\">{{
|
|
14071
|
+
args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\n</ng-template>\n<tr>\n <th *ngIf=\"selectable\">\n <input\n cFormCheckInput\n (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectedAll === true\"\n [indeterminate]=\"indeterminate$ | async\"\n type=\"checkbox\"\n [disabled]=\"!selectAll\"\n autocomplete=\"off\"\n >\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\">\n </ng-container>\n </ng-template>\n <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 </ng-container>\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 ></c-smart-table-column-filter>\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
|
|
14052
14072
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
14053
14073
|
type: Input
|
|
14054
14074
|
}], columnFilterState: [{
|
|
@@ -14069,6 +14089,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14069
14089
|
type: Input
|
|
14070
14090
|
}], columnFilterTemplates: [{
|
|
14071
14091
|
type: Input
|
|
14092
|
+
}], summaryRowTemplate: [{
|
|
14093
|
+
type: Input
|
|
14072
14094
|
}], columnFilterStateChange: [{
|
|
14073
14095
|
type: Output
|
|
14074
14096
|
}], sorterStateChange: [{
|
|
@@ -14117,6 +14139,7 @@ class SmartTableComponent {
|
|
|
14117
14139
|
this.tableFilterValueChange = new EventEmitter();
|
|
14118
14140
|
this.templates = { tableDetails: null, tableData: null };
|
|
14119
14141
|
this.columnFilterTemplates = {};
|
|
14142
|
+
this.summaryRowTemplate = null;
|
|
14120
14143
|
this._columnFiltered = [];
|
|
14121
14144
|
this.itemsDiffer = this.iterableDiffers.find(this.items).create();
|
|
14122
14145
|
this.itemsFilteredDiffer = this.iterableDiffers.find(this._columnFiltered).create();
|
|
@@ -14250,6 +14273,10 @@ class SmartTableComponent {
|
|
|
14250
14273
|
this.columnFilterTemplates[child.id] = child.templateRef;
|
|
14251
14274
|
return;
|
|
14252
14275
|
}
|
|
14276
|
+
if (child.id === 'tableSummaryRow') {
|
|
14277
|
+
this.summaryRowTemplate = child.templateRef;
|
|
14278
|
+
return;
|
|
14279
|
+
}
|
|
14253
14280
|
this.templates[child.id] = child.templateRef;
|
|
14254
14281
|
});
|
|
14255
14282
|
this.columnFilterTemplates = { ...this.columnFilterTemplates };
|
|
@@ -14282,7 +14309,7 @@ class SmartTableComponent {
|
|
|
14282
14309
|
// return this.items ?? [];
|
|
14283
14310
|
}
|
|
14284
14311
|
get genCols() {
|
|
14285
|
-
return Object.keys(this._items ? this._items[0] ?? {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14312
|
+
return Object.keys(this._items.length ? this._items[0] ?? {} : {}).filter((el) => el.charAt(0) !== '_');
|
|
14286
14313
|
}
|
|
14287
14314
|
get rawColumnNames() {
|
|
14288
14315
|
return this._columns ? this._columns.map(column => typeof column === 'object' ? column.key : column)
|
|
@@ -14517,10 +14544,10 @@ class SmartTableComponent {
|
|
|
14517
14544
|
}
|
|
14518
14545
|
}
|
|
14519
14546
|
SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
14520
|
-
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\"></ng-content>\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered\"\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-container>\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
14547
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\"></ng-content>\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n ></c-smart-table-head>\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\">\n </c-smart-pagination>\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n >\n </c-smart-table-items-per-page-selector>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\">\n </ng-container>\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
14521
14548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
14522
14549
|
type: Component,
|
|
14523
|
-
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\"></ng-content>\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered\"\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] }\"
|
|
14550
|
+
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n </div>\n <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n <ng-template #tableFilterTemplate>\n <c-smart-table-filter\n (valueChange)=\"handleTableFilterChange($event)\"\n *ngIf=\"tableFilter\"\n [delay]=\"300\"\n [filterLabel]=\"tableFilterLabel\"\n [filterPlaceholder]=\"tableFilterPlaceholder\"\n [onEvent]=\"tableFilterEvent\"\n [value]=\"tableFilterState\"\n cFilterInput\n >\n </c-smart-table-filter>\n </ng-template>\n\n <ng-template #tableCleanerTemplate>\n <button\n (click)=\"clean($event)\"\n *ngIf=\"cleaner\"\n [disabled]=\"!isFiltered\"\n [ngClass]=\"{'ms-1': tableFilter}\"\n [tabindex]=\"0\"\n cButton\n variant=\"ghost\"\n color=\"transparent\"\n >\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #tableCustomHeaderTemplate>\n <div class=\"col-auto p-0 ms-auto\">\n <ng-content select=\"[customHeader]\"></ng-content>\n </div>\n </ng-template>\n</div>\n<div class=\"position-relative\">\n <table [align]=\"tableProps?.align\"\n [borderColor]=\"tableProps?.borderColor\"\n [bordered]=\"tableProps?.bordered ?? undefined\"\n [borderless]=\"tableProps?.borderless ?? undefined\"\n [caption]=\"tableProps?.caption\"\n [color]=\"tableProps?.color\"\n [hover]=\"tableProps?.hover ?? undefined\"\n [responsive]=\"tableProps?.responsive\"\n [small]=\"tableProps?.small ?? undefined\"\n [striped]=\"tableProps?.striped ?? undefined\"\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n [cTableColor]=\"tableProps?.color\"\n cTable\n >\n <c-smart-table-head\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"header\"\n [columnFilterState]=\"columnFilterState\"\n [columnFilter]=\"columnFilter\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n [cTableColor]=\"tableHeadProps?.color\"\n [cAlign]=\"tableHeadProps?.align\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n ></c-smart-table-head>\n\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n <ng-container *ngTemplateOutlet=\"summaryRowTemplate\"></ng-container>\n </tfoot>\n\n <c-smart-table-head\n (selectAllChange)=\"handleSelectAllChange($event)\"\n (sorterStateChange)=\"handleSortChange($event)\"\n *ngIf=\"footer\"\n [columns]=\"columns\"\n [selectAll]=\"selectAll\"\n [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n [selectable]=\"selectable\"\n [columnSorter]=\"columnSorter\"\n [sorterValue]=\"sorterValue\"\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n [cTableColor]=\"tableFootProps?.color\"\n [cAlign]=\"tableFootProps?.align\"\n component=\"tfoot\"\n [columnFilterTemplates]=\"columnFilterTemplates\"\n [summaryRowTemplate]=\"summaryRowTemplate\"\n ></c-smart-table-head>\n\n </table>\n <c-element-cover\n *ngIf=\"loading\"\n [boundaries]=\"[\n { sides: ['top'], query: 'td' },\n { sides: ['bottom'], query: 'tbody' }\n ]\"\n ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n <div class=\"row\">\n <div class=\"col\">\n <c-smart-pagination\n (activePageChange)=\"setActivePage($event)\"\n *ngIf=\"pagination && numberOfPages > 1\"\n [activePage]=\"activePage\"\n [pages]=\"numberOfPages\">\n </c-smart-pagination>\n </div>\n <div class=\"col-auto ms-auto\">\n <c-smart-table-items-per-page-selector\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n *ngIf=\"itemsPerPageSelect\"\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\n [itemsPerPage]=\"itemsPerPage\"\n >\n </c-smart-table-items-per-page-selector>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n [cTableColor]=\"tableBodyProps?.color\"\n [cAlign]=\"tableBodyProps?.align\"\n >\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n (click)=\"handleRowClick({$event, item, i})\"\n [cTableActive]=\"item._props?.active ?? undefined\"\n [cTableColor]=\"item._props?.color\"\n [cAlign]=\"item._props?.align\"\n >\n <td *ngIf=\"selectable\"\n [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\n >\n <input (change)=\"handleRowChecked($event, item)\"\n [checked]=\"item._selected ?? false\"\n cFormCheckInput\n [disabled]=\"(item?._selectable === false) ?? false\"\n autocomplete=\"off\"\n >\n </td>\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n <ng-container\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\">\n </ng-container>\n </ng-template>\n </tr>\n <ng-template [ngIf]=\"templates['tableDetails']\">\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n <tr>\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n </tr>\n <tr class=\"p-0\">\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n <td\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\n [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\n >\n {{tdContent}}\n </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!-- <tr class=\"p-0\">-->\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n <tr *ngIf=\"!currentItems.length\">\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n class=\"icon icon-custom-size\" width=\"18\">\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n class=\"ci-primary\">\n </polygon>\n <polygon\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n class=\"ci-primary\">\n </polygon>\n </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
14524
14551
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
14525
14552
|
type: Input
|
|
14526
14553
|
}], cleaner: [{
|
|
@@ -14853,7 +14880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14853
14880
|
class SmartTableModule {
|
|
14854
14881
|
}
|
|
14855
14882
|
SmartTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
14856
|
-
SmartTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmartTableModule, declarations: [
|
|
14883
|
+
SmartTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmartTableModule, declarations: [SmartTableColumnLabelPipe,
|
|
14884
|
+
SmartTableComponent,
|
|
14857
14885
|
SmartTableFilterComponent,
|
|
14858
14886
|
SmartTableItemsPerPageSelectorComponent,
|
|
14859
14887
|
SmartTableHeadComponent,
|
|
@@ -14884,6 +14912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14884
14912
|
type: NgModule,
|
|
14885
14913
|
args: [{
|
|
14886
14914
|
declarations: [
|
|
14915
|
+
SmartTableColumnLabelPipe,
|
|
14887
14916
|
SmartTableComponent,
|
|
14888
14917
|
SmartTableFilterComponent,
|
|
14889
14918
|
SmartTableItemsPerPageSelectorComponent,
|