@tots/table 15.0.44 → 16.0.1

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.
Files changed (74) hide show
  1. package/esm2022/lib/column-factories/tots-balance-column.mjs +12 -0
  2. package/esm2022/lib/column-factories/tots-balance-icon-column.mjs +15 -0
  3. package/esm2022/lib/column-factories/tots-boolean-column.mjs +8 -0
  4. package/esm2022/lib/column-factories/tots-checkbox-column.mjs +13 -0
  5. package/esm2022/lib/column-factories/tots-currency-column.mjs +8 -0
  6. package/esm2022/lib/column-factories/tots-icon-button-column.mjs +15 -0
  7. package/esm2022/lib/column-factories/tots-more-menu-column.mjs +12 -0
  8. package/esm2022/lib/column-factories/tots-option-column.mjs +13 -0
  9. package/esm2022/lib/column-factories/tots-status-column.mjs +13 -0
  10. package/esm2022/lib/column-factories/tots-status-icon-column.mjs +13 -0
  11. package/esm2022/lib/column-factories/tots-string-column.mjs +8 -0
  12. package/esm2022/lib/column-factories/tots-two-string-column.mjs +11 -0
  13. package/esm2022/lib/column-factories/tots-user-column.mjs +16 -0
  14. package/{esm2020 → esm2022}/lib/columns/balance-currency-column/balance-currency-column.component.mjs +4 -4
  15. package/esm2022/lib/columns/balance-currency-icon-column/balance-currency-icon-column.component.mjs +23 -0
  16. package/{esm2020 → esm2022}/lib/columns/base-print-column/base-print-column.component.mjs +4 -4
  17. package/{esm2020 → esm2022}/lib/columns/boolean-column/boolean-column.component.mjs +4 -4
  18. package/{esm2020 → esm2022}/lib/columns/checkbox-column/checkbox-column.component.mjs +5 -5
  19. package/{esm2020 → esm2022}/lib/columns/currency-column/currency-column.component.mjs +4 -4
  20. package/{esm2020 → esm2022}/lib/columns/icon-button-column/icon-button-column.component.mjs +5 -5
  21. package/{esm2020 → esm2022}/lib/columns/more-menu-column/more-menu-column.component.mjs +4 -4
  22. package/{esm2020 → esm2022}/lib/columns/option-column/option-column.component.mjs +4 -4
  23. package/{esm2020 → esm2022}/lib/columns/status-column/status-column.component.mjs +4 -4
  24. package/{esm2020 → esm2022}/lib/columns/status-icon-column/status-icon-column.component.mjs +4 -4
  25. package/{esm2020 → esm2022}/lib/columns/string-column/string-column.component.mjs +4 -4
  26. package/{esm2020 → esm2022}/lib/columns/tots-base-column.component.mjs +4 -4
  27. package/{esm2020 → esm2022}/lib/columns/two-string-column/two-string-column.component.mjs +4 -4
  28. package/{esm2020 → esm2022}/lib/columns/user-column/user-column.component.mjs +4 -4
  29. package/{esm2020 → esm2022}/lib/components/tots-table/tots-table.component.mjs +4 -4
  30. package/{esm2020 → esm2022}/lib/components/tots-table-api/tots-table-api.component.mjs +4 -4
  31. package/esm2022/lib/entities/tots-column-option.mjs +7 -0
  32. package/esm2022/lib/entities/tots-column.mjs +10 -0
  33. package/esm2022/lib/entities/tots-more-menu-item.mjs +9 -0
  34. package/esm2022/lib/entities/tots-status-column-option.mjs +9 -0
  35. package/esm2022/lib/entities/tots-status-icon-column-option.mjs +8 -0
  36. package/{esm2020 → esm2022}/lib/table.module.mjs +37 -37
  37. package/esm2022/public-api.mjs +61 -0
  38. package/{fesm2020 → fesm2022}/tots-table.mjs +260 -94
  39. package/fesm2022/tots-table.mjs.map +1 -0
  40. package/lib/column-factories/tots-balance-column.d.ts +4 -0
  41. package/lib/column-factories/tots-balance-icon-column.d.ts +4 -0
  42. package/lib/column-factories/tots-boolean-column.d.ts +4 -0
  43. package/lib/column-factories/tots-checkbox-column.d.ts +5 -0
  44. package/lib/column-factories/tots-currency-column.d.ts +4 -0
  45. package/lib/column-factories/tots-icon-button-column.d.ts +5 -0
  46. package/lib/column-factories/tots-more-menu-column.d.ts +5 -0
  47. package/lib/column-factories/tots-option-column.d.ts +5 -0
  48. package/lib/column-factories/tots-status-column.d.ts +5 -0
  49. package/lib/column-factories/tots-status-icon-column.d.ts +5 -0
  50. package/lib/column-factories/tots-string-column.d.ts +4 -0
  51. package/lib/column-factories/tots-two-string-column.d.ts +4 -0
  52. package/lib/column-factories/tots-user-column.d.ts +4 -0
  53. package/lib/columns/base-print-column/base-print-column.component.d.ts +1 -1
  54. package/lib/columns/tots-base-column.component.d.ts +1 -1
  55. package/lib/components/tots-table/tots-table.component.d.ts +1 -1
  56. package/lib/components/tots-table-api/tots-table-api.component.d.ts +1 -1
  57. package/lib/entities/tots-column-option.d.ts +5 -0
  58. package/lib/entities/tots-column.d.ts +4 -2
  59. package/lib/entities/tots-more-menu-item.d.ts +7 -0
  60. package/lib/entities/tots-status-column-option.d.ts +6 -0
  61. package/lib/entities/tots-status-icon-column-option.d.ts +5 -0
  62. package/package.json +8 -14
  63. package/public-api.d.ts +20 -0
  64. package/esm2020/lib/columns/balance-currency-icon-column/balance-currency-icon-column.component.mjs +0 -23
  65. package/esm2020/lib/entities/tots-column.mjs +0 -9
  66. package/esm2020/public-api.mjs +0 -41
  67. package/fesm2015/tots-table.mjs +0 -597
  68. package/fesm2015/tots-table.mjs.map +0 -1
  69. package/fesm2020/tots-table.mjs.map +0 -1
  70. /package/{esm2020 → esm2022}/lib/entities/tots-action-table.mjs +0 -0
  71. /package/{esm2020 → esm2022}/lib/entities/tots-table-api-config.mjs +0 -0
  72. /package/{esm2020 → esm2022}/lib/entities/tots-table-config.mjs +0 -0
  73. /package/{esm2020 → esm2022}/lib/helpers/tots-table-helper.mjs +0 -0
  74. /package/{esm2020 → esm2022}/tots-table.mjs +0 -0
@@ -1,597 +0,0 @@
1
- import { TotsQuery } from '@tots/core';
2
- import * as i0 from '@angular/core';
3
- import { Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
4
- import * as i1 from '@angular/common';
5
- import { CommonModule } from '@angular/common';
6
- import * as i2 from '@angular/material/icon';
7
- import { MatIconModule } from '@angular/material/icon';
8
- import * as i3 from '@angular/material/button';
9
- import { MatButtonModule } from '@angular/material/button';
10
- import * as i4 from '@angular/material/menu';
11
- import { MatMenuModule } from '@angular/material/menu';
12
- import * as i1$1 from '@angular/material/checkbox';
13
- import { MatCheckboxModule } from '@angular/material/checkbox';
14
- import { Subject, tap } from 'rxjs';
15
- import * as i3$1 from '@angular/material/table';
16
- import { MatTableModule } from '@angular/material/table';
17
- import * as i4$1 from '@angular/material/paginator';
18
- import { MatPaginatorModule } from '@angular/material/paginator';
19
- import * as i5 from '@angular/material/progress-spinner';
20
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
21
-
22
- class TotsColumn {
23
- constructor() {
24
- this.key = '';
25
- this.title = '';
26
- this.is_show = true;
27
- this.hasOrder = false;
28
- }
29
- }
30
-
31
- class TotsTableConfig {
32
- constructor() {
33
- this.id = '';
34
- this.columns = [];
35
- this.classes = '';
36
- }
37
- }
38
-
39
- class TotsActionTable {
40
- constructor() {
41
- this.key = '';
42
- }
43
- }
44
-
45
- class TotsTableApiConfig {
46
- constructor() {
47
- this.id = '';
48
- this.columns = [];
49
- this.query = new TotsQuery();
50
- this.classes = '';
51
- }
52
- }
53
-
54
- class TotsTableHelper {
55
- /**
56
- * Obtiene el valor de un objeto a traves de la KEY
57
- * @param item
58
- * @param key
59
- * @returns
60
- */
61
- static getItemValueByKey(item, key) {
62
- if (key == undefined || item == undefined) {
63
- return '';
64
- }
65
- if (typeof key == 'string' && item[key] != undefined) {
66
- return item[key];
67
- }
68
- let valueFinal = item;
69
- for (const keyObj of key) {
70
- if (valueFinal[keyObj] == undefined) {
71
- return '';
72
- }
73
- valueFinal = valueFinal[keyObj];
74
- }
75
- return valueFinal;
76
- }
77
- }
78
-
79
- class TotsBaseColumnComponent {
80
- getItemValue() {
81
- return TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
82
- }
83
- }
84
- TotsBaseColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
85
- TotsBaseColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsBaseColumnComponent, selector: "tots-base-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: '', isInline: true });
86
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
87
- type: Component,
88
- args: [{
89
- selector: 'tots-base-column',
90
- template: ''
91
- }]
92
- }], propDecorators: { column: [{
93
- type: Input
94
- }], item: [{
95
- type: Input
96
- }], onAction: [{
97
- type: Input
98
- }], index: [{
99
- type: Input
100
- }] } });
101
-
102
- class StringColumnComponent extends TotsBaseColumnComponent {
103
- getItemValue() {
104
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
105
- if (this.column.extra && this.column.extra.cutSeparator) {
106
- return value.split(this.column.extra.cutSeparator)[0];
107
- }
108
- return value;
109
- }
110
- }
111
- StringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
112
- StringColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringColumnComponent, selector: "tots-string-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] });
113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, decorators: [{
114
- type: Component,
115
- args: [{ selector: 'tots-string-column', template: "{{getItemValue()}}" }]
116
- }] });
117
-
118
- class MoreMenuColumnComponent extends TotsBaseColumnComponent {
119
- clickButton(itemAction, $event) {
120
- this.onAction.next({ key: itemAction.key, item: this.item });
121
- $event.preventDefault();
122
- return false;
123
- }
124
- }
125
- MoreMenuColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
126
- MoreMenuColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: MoreMenuColumnComponent, selector: "tots-more-menu-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n </button>\n</mat-menu>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
127
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
128
- type: Component,
129
- args: [{ selector: 'tots-more-menu-column', template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n </button>\n</mat-menu>" }]
130
- }] });
131
-
132
- class BooleanColumnComponent extends TotsBaseColumnComponent {
133
- }
134
- BooleanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
135
- BooleanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BooleanColumnComponent, selector: "tots-boolean-column", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, decorators: [{
137
- type: Component,
138
- args: [{ selector: 'tots-boolean-column', template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>" }]
139
- }] });
140
-
141
- class TwoStringColumnComponent extends TotsBaseColumnComponent {
142
- getSubtitleValue() {
143
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
144
- }
145
- }
146
- TwoStringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
147
- TwoStringColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TwoStringColumnComponent, selector: "tots-two-string-column", usesInheritance: true, ngImport: i0, template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>", styles: [""] });
148
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
149
- type: Component,
150
- args: [{ selector: 'tots-two-string-column', template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>" }]
151
- }] });
152
-
153
- class IconButtonColumnComponent extends TotsBaseColumnComponent {
154
- clickButton($event) {
155
- this.onAction.next({ key: this.column.extra.action, item: this.item });
156
- $event.stopPropagation();
157
- return false;
158
- }
159
- getIconName() {
160
- return this.column.extra.icon;
161
- }
162
- getButtonColor() {
163
- return this.column.extra.matColor;
164
- }
165
- getClasses() {
166
- return this.column.extra.classes;
167
- }
168
- }
169
- IconButtonColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
170
- IconButtonColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: IconButtonColumnComponent, selector: "tots-icon-button-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n <mat-icon>{{getIconName()}}</mat-icon>\n</button>", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
171
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
172
- type: Component,
173
- args: [{ selector: 'tots-icon-button-column', template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n <mat-icon>{{getIconName()}}</mat-icon>\n</button>" }]
174
- }] });
175
-
176
- class CheckboxColumnComponent extends TotsBaseColumnComponent {
177
- onChange(event) {
178
- let key = 'select-item';
179
- if (!event.checked) {
180
- key = 'unselect-item';
181
- }
182
- this.onAction.next({ key: key, item: this.item });
183
- }
184
- }
185
- CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
186
- CheckboxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: CheckboxColumnComponent, selector: "tots-checkbox-column", usesInheritance: true, ngImport: i0, template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
187
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
188
- type: Component,
189
- args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
190
- }] });
191
-
192
- class OptionColumnComponent extends TotsBaseColumnComponent {
193
- getItemValue() {
194
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
195
- for (const item of this.column.extra.options) {
196
- if (item[this.column.extra.field_rel_key] == value) {
197
- return item[this.column.extra.field_print_key];
198
- }
199
- }
200
- return '';
201
- }
202
- }
203
- OptionColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
204
- OptionColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: OptionColumnComponent, selector: "tots-option-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] });
205
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, decorators: [{
206
- type: Component,
207
- args: [{ selector: 'tots-option-column', template: "{{getItemValue()}}" }]
208
- }] });
209
-
210
- class UserColumnComponent extends TotsBaseColumnComponent {
211
- getFirstname() {
212
- var _a;
213
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_firstname_key) {
214
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_firstname_key);
215
- }
216
- return '';
217
- }
218
- getLastname() {
219
- var _a;
220
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_lastname_key) {
221
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_lastname_key);
222
- }
223
- return '';
224
- }
225
- getFullname() {
226
- return this.getFirstname() + ' ' + this.getLastname();
227
- }
228
- getPhoto() {
229
- var _a;
230
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_photo_key) {
231
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_photo_key);
232
- }
233
- return '';
234
- }
235
- getSubtitle() {
236
- var _a;
237
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_subtitle_key) {
238
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
239
- }
240
- return '';
241
- }
242
- isOnline() {
243
- var _a;
244
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_online_key) {
245
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_online_key);
246
- }
247
- return false;
248
- }
249
- }
250
- UserColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
251
- UserColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: UserColumnComponent, selector: "tots-user-column", usesInheritance: true, ngImport: i0, template: "<div class=\"user-avatar-component\">\n <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n </div>\n <div class=\"texts\">\n <div class=\"user\"> {{ getFullname() }} </div>\n <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n </div>\n <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
252
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, decorators: [{
253
- type: Component,
254
- args: [{ selector: 'tots-user-column', template: "<div class=\"user-avatar-component\">\n <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n </div>\n <div class=\"texts\">\n <div class=\"user\"> {{ getFullname() }} </div>\n <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n </div>\n <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}\n"] }]
255
- }] });
256
-
257
- class CurrencyColumnComponent extends TotsBaseColumnComponent {
258
- }
259
- CurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
260
- CurrencyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: CurrencyColumnComponent, selector: "tots-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
261
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
262
- type: Component,
263
- args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
264
- }] });
265
-
266
- class StatusColumnComponent extends OptionColumnComponent {
267
- getBackgroundColor() {
268
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
269
- for (const item of this.column.extra.options) {
270
- if (item[this.column.extra.field_rel_key] == value && item['background_color'] != undefined) {
271
- return item['background_color'];
272
- }
273
- }
274
- return '';
275
- }
276
- getFontColor() {
277
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
278
- for (const item of this.column.extra.options) {
279
- if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
280
- return item['font_color'];
281
- }
282
- }
283
- return '';
284
- }
285
- }
286
- StatusColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
287
- StatusColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StatusColumnComponent, selector: "tots-status-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
288
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, decorators: [{
289
- type: Component,
290
- args: [{ selector: 'tots-status-column', template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"] }]
291
- }] });
292
-
293
- class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
294
- getBalance() {
295
- return this.getDebit() - this.getCredit();
296
- }
297
- getDebit() {
298
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_debit);
299
- }
300
- getCredit() {
301
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
302
- }
303
- }
304
- BalanceCurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
305
- BalanceCurrencyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BalanceCurrencyColumnComponent, selector: "tots-balance-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
306
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
307
- type: Component,
308
- args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
309
- }] });
310
-
311
- class StatusIconColumnComponent extends OptionColumnComponent {
312
- getFontColor() {
313
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
314
- for (const item of this.column.extra.options) {
315
- if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
316
- return item['font_color'];
317
- }
318
- }
319
- return '';
320
- }
321
- }
322
- StatusIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
323
- StatusIconColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StatusIconColumnComponent, selector: "tots-status-icon-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, decorators: [{
325
- type: Component,
326
- args: [{ selector: 'tots-status-icon-column', template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>" }]
327
- }] });
328
-
329
- class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent {
330
- getIconPositive() {
331
- return this.column.extra.icon_positive;
332
- }
333
- getIconNegative() {
334
- return this.column.extra.icon_negative;
335
- }
336
- getIconNeutral() {
337
- return this.column.extra.icon_neutral;
338
- }
339
- }
340
- BalanceCurrencyIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
341
- BalanceCurrencyIconColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BalanceCurrencyIconColumnComponent, selector: "tots-balance-currency-icon-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
342
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
343
- type: Component,
344
- args: [{ selector: 'tots-balance-currency-icon-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>" }]
345
- }] });
346
-
347
- class BasePrintColumnComponent {
348
- constructor(viewContainerRef) {
349
- this.viewContainerRef = viewContainerRef;
350
- }
351
- ngOnInit() {
352
- const view = this.viewContainerRef.createComponent(this.column.component);
353
- view.instance.column = this.column;
354
- view.instance.item = this.item;
355
- view.instance.onAction = this.onAction;
356
- view.instance.index = this.index;
357
- }
358
- }
359
- BasePrintColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
360
- BasePrintColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: "<div #contentColumn></div>", styles: [""] });
361
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
362
- type: Component,
363
- args: [{ selector: 'tots-base-print-column', template: "<div #contentColumn></div>" }]
364
- }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
365
- type: Input
366
- }], item: [{
367
- type: Input
368
- }], onAction: [{
369
- type: Input
370
- }], index: [{
371
- type: Input
372
- }] } });
373
-
374
- class TotsTableComponent {
375
- constructor(changeDectetor) {
376
- this.changeDectetor = changeDectetor;
377
- this.config = new TotsTableConfig();
378
- this.pageIndex = 0;
379
- this.pageSize = 50;
380
- this.hasPagination = true;
381
- this.messageNotFound = "No results found, please try with other search terms";
382
- this.onAction = new EventEmitter();
383
- this.privateActions = new Subject();
384
- this.isLoading = true;
385
- this.displayColumns = [];
386
- }
387
- ngOnInit() {
388
- this.loadConfig();
389
- this.loadItems();
390
- }
391
- onClickOrder(column) {
392
- if (!column.hasOrder) {
393
- return;
394
- }
395
- let orderColumn = column.order;
396
- this.config.columns.forEach(c => c.order = undefined);
397
- column.order = orderColumn == 'asc' ? 'desc' : 'asc';
398
- this.onAction.emit({ key: 'click-order', item: column });
399
- }
400
- onClickRow(item) {
401
- this.onAction.emit({ key: 'click-row', item: item });
402
- }
403
- onPageChange(event) {
404
- this.onAction.emit({ key: 'page-change', item: event });
405
- }
406
- loadItems() {
407
- var _a;
408
- this.dataItems = undefined;
409
- this.isLoading = true;
410
- return (_a = this.config.obs) === null || _a === void 0 ? void 0 : _a.pipe(tap(res => this.dataItems = res)).pipe(tap(res => this.onAction.emit({ key: 'loaded-items', item: undefined }))).subscribe(res => this.isLoading = false);
411
- }
412
- loadConfig() {
413
- this.loadColumns();
414
- this.privateActions.subscribe(action => {
415
- this.onAction.emit(action);
416
- });
417
- }
418
- loadColumns() {
419
- this.displayColumns = this.config.columns.filter(c => c.is_show || c.is_show == undefined).map(c => c.key);
420
- }
421
- getDataItems() {
422
- return this.dataItems;
423
- }
424
- refreshDataItems(newData) {
425
- this.dataItems = newData;
426
- }
427
- detectChanges() {
428
- this.changeDectetor.detectChanges();
429
- }
430
- }
431
- TotsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
432
- TotsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsTableComponent, selector: "tots-table", inputs: { config: "config", pageIndex: "pageIndex", pageSize: "pageSize", hasPagination: "hasPagination", messageNotFound: "messageNotFound" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"tots-table-container {{config.classes}}\">\n <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n <!-- TH-->\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n {{ column.title }}\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n </th>\n <!-- TD -->\n <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n <!-- Row shown when there is no matching data. -->\n <ng-container *ngIf=\"!isLoading\">\n <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n <!-- Paginator -->\n <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }] });
433
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, decorators: [{
434
- type: Component,
435
- args: [{ selector: 'tots-table', template: "<div class=\"tots-table-container {{config.classes}}\">\n <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n <!-- TH-->\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n {{ column.title }}\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n </th>\n <!-- TD -->\n <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n <!-- Row shown when there is no matching data. -->\n <ng-container *ngIf=\"!isLoading\">\n <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n <!-- Paginator -->\n <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
436
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
437
- type: Input
438
- }], pageIndex: [{
439
- type: Input
440
- }], pageSize: [{
441
- type: Input
442
- }], hasPagination: [{
443
- type: Input
444
- }], messageNotFound: [{
445
- type: Input
446
- }], onAction: [{
447
- type: Output
448
- }] } });
449
-
450
- class TotsTableApiComponent {
451
- constructor() {
452
- this.config = new TotsTableApiConfig();
453
- this.hasPagination = true;
454
- this.isPaginationStartIndexInZero = false;
455
- this.onAction = new EventEmitter();
456
- this.configTable = new TotsTableConfig();
457
- }
458
- ngOnInit() {
459
- this.loadConfig();
460
- }
461
- onTableAction(action) {
462
- if (action.key == 'page-change') {
463
- this.config.query.per_page = action.item.pageSize;
464
- if (this.isPaginationStartIndexInZero) {
465
- this.config.query.page = action.item.pageIndex;
466
- }
467
- else {
468
- this.config.query.page = action.item.pageIndex + 1;
469
- }
470
- this.configTable.obs = this.config.service.list(this.config.query);
471
- }
472
- this.onAction.emit(action);
473
- }
474
- loadConfig() {
475
- this.configTable.id = this.config.id;
476
- this.configTable.columns = this.config.columns;
477
- this.configTable.obs = this.config.service.list(this.config.query);
478
- this.configTable.classes = this.config.classes;
479
- }
480
- refreshQueryAndLoadItems() {
481
- this.configTable.obs = this.config.service.list(this.config.query);
482
- return this.loadItems();
483
- }
484
- loadItems() {
485
- return this.tableComp.loadItems();
486
- }
487
- getDataItems() {
488
- return this.tableComp.getDataItems();
489
- }
490
- setObs(obs) {
491
- this.configTable.obs = obs;
492
- }
493
- }
494
- TotsTableApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
495
- TotsTableApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsTableApiComponent, selector: "tots-table-api", inputs: { config: "config", hasPagination: "hasPagination", isPaginationStartIndexInZero: "isPaginationStartIndexInZero" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableComp", first: true, predicate: ["tableComp"], descendants: true }], ngImport: i0, template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n", styles: [""], dependencies: [{ kind: "component", type: TotsTableComponent, selector: "tots-table", inputs: ["config", "pageIndex", "pageSize", "hasPagination", "messageNotFound"], outputs: ["onAction"] }] });
496
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, decorators: [{
497
- type: Component,
498
- args: [{ selector: 'tots-table-api', template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n" }]
499
- }], propDecorators: { tableComp: [{
500
- type: ViewChild,
501
- args: ['tableComp']
502
- }], config: [{
503
- type: Input
504
- }], hasPagination: [{
505
- type: Input
506
- }], isPaginationStartIndexInZero: [{
507
- type: Input
508
- }], onAction: [{
509
- type: Output
510
- }] } });
511
-
512
- class TotsTableModule {
513
- }
514
- TotsTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
515
- TotsTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, declarations: [TotsTableComponent,
516
- BasePrintColumnComponent,
517
- StringColumnComponent,
518
- TotsTableApiComponent,
519
- MoreMenuColumnComponent,
520
- BooleanColumnComponent,
521
- TwoStringColumnComponent,
522
- IconButtonColumnComponent,
523
- CheckboxColumnComponent,
524
- OptionColumnComponent,
525
- UserColumnComponent,
526
- CurrencyColumnComponent,
527
- StatusColumnComponent,
528
- BalanceCurrencyColumnComponent,
529
- StatusIconColumnComponent,
530
- BalanceCurrencyIconColumnComponent], imports: [CommonModule,
531
- // Angular Material
532
- MatIconModule,
533
- MatTableModule,
534
- MatPaginatorModule,
535
- MatButtonModule,
536
- MatMenuModule,
537
- MatCheckboxModule,
538
- MatProgressSpinnerModule], exports: [TotsTableComponent,
539
- TotsTableApiComponent] });
540
- TotsTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, imports: [CommonModule,
541
- // Angular Material
542
- MatIconModule,
543
- MatTableModule,
544
- MatPaginatorModule,
545
- MatButtonModule,
546
- MatMenuModule,
547
- MatCheckboxModule,
548
- MatProgressSpinnerModule] });
549
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, decorators: [{
550
- type: NgModule,
551
- args: [{
552
- declarations: [
553
- TotsTableComponent,
554
- BasePrintColumnComponent,
555
- StringColumnComponent,
556
- TotsTableApiComponent,
557
- MoreMenuColumnComponent,
558
- BooleanColumnComponent,
559
- TwoStringColumnComponent,
560
- IconButtonColumnComponent,
561
- CheckboxColumnComponent,
562
- OptionColumnComponent,
563
- UserColumnComponent,
564
- CurrencyColumnComponent,
565
- StatusColumnComponent,
566
- BalanceCurrencyColumnComponent,
567
- StatusIconColumnComponent,
568
- BalanceCurrencyIconColumnComponent
569
- ],
570
- imports: [
571
- CommonModule,
572
- // Angular Material
573
- MatIconModule,
574
- MatTableModule,
575
- MatPaginatorModule,
576
- MatButtonModule,
577
- MatMenuModule,
578
- MatCheckboxModule,
579
- MatProgressSpinnerModule
580
- ],
581
- exports: [
582
- TotsTableComponent,
583
- TotsTableApiComponent
584
- ]
585
- }]
586
- }] });
587
-
588
- /*
589
- * Public API Surface of table
590
- */
591
-
592
- /**
593
- * Generated bundle index. Do not edit.
594
- */
595
-
596
- export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TotsActionTable, TotsBaseColumnComponent, TotsColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableHelper, TotsTableModule, TwoStringColumnComponent, UserColumnComponent };
597
- //# sourceMappingURL=tots-table.mjs.map