@tots/table 15.0.47 → 15.0.49

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 (46) hide show
  1. package/{esm2020 → esm2022}/lib/columns/balance-currency-column/balance-currency-column.component.mjs +4 -4
  2. package/{esm2020 → esm2022}/lib/columns/balance-currency-icon-column/balance-currency-icon-column.component.mjs +4 -4
  3. package/{esm2020 → esm2022}/lib/columns/base-print-column/base-print-column.component.mjs +4 -4
  4. package/{esm2020 → esm2022}/lib/columns/boolean-column/boolean-column.component.mjs +4 -4
  5. package/{esm2020 → esm2022}/lib/columns/checkbox-column/checkbox-column.component.mjs +4 -4
  6. package/{esm2020 → esm2022}/lib/columns/currency-column/currency-column.component.mjs +4 -4
  7. package/{esm2020 → esm2022}/lib/columns/icon-button-column/icon-button-column.component.mjs +4 -4
  8. package/{esm2020 → esm2022}/lib/columns/more-menu-column/more-menu-column.component.mjs +4 -4
  9. package/{esm2020 → esm2022}/lib/columns/option-column/option-column.component.mjs +4 -4
  10. package/{esm2020 → esm2022}/lib/columns/status-column/status-column.component.mjs +4 -4
  11. package/{esm2020 → esm2022}/lib/columns/status-icon-column/status-icon-column.component.mjs +4 -4
  12. package/{esm2020 → esm2022}/lib/columns/string-column/string-column.component.mjs +4 -4
  13. package/{esm2020 → esm2022}/lib/columns/tots-base-column.component.mjs +4 -4
  14. package/{esm2020 → esm2022}/lib/columns/two-string-column/two-string-column.component.mjs +4 -4
  15. package/{esm2020 → esm2022}/lib/columns/user-column/user-column.component.mjs +4 -4
  16. package/{esm2020 → esm2022}/lib/components/loading-animation-renderer/loading-animation-renderer.component.mjs +4 -4
  17. package/{esm2020 → esm2022}/lib/components/tots-table/tots-table.component.mjs +5 -5
  18. package/{esm2020 → esm2022}/lib/components/tots-table-api/tots-table-api.component.mjs +4 -4
  19. package/esm2022/lib/components/tots-table-local/tots-table-local.component.mjs +138 -0
  20. package/esm2022/lib/entities/tots-table-default-config.mjs +11 -0
  21. package/esm2022/lib/entities/tots-table-local-config.mjs +8 -0
  22. package/esm2022/lib/table.module.mjs +129 -0
  23. package/esm2022/public-api.mjs +44 -0
  24. package/{fesm2020 → fesm2022}/tots-table.mjs +253 -112
  25. package/fesm2022/tots-table.mjs.map +1 -0
  26. package/lib/columns/base-print-column/base-print-column.component.d.ts +1 -1
  27. package/lib/columns/tots-base-column.component.d.ts +1 -1
  28. package/lib/components/tots-table/tots-table.component.d.ts +1 -1
  29. package/lib/components/tots-table-api/tots-table-api.component.d.ts +1 -1
  30. package/lib/components/tots-table-local/tots-table-local.component.d.ts +37 -0
  31. package/lib/entities/tots-table-local-config.d.ts +4 -0
  32. package/lib/table.module.d.ts +11 -10
  33. package/package.json +5 -11
  34. package/public-api.d.ts +2 -0
  35. package/esm2020/lib/entities/tots-table-default-config.mjs +0 -17
  36. package/esm2020/lib/table.module.mjs +0 -124
  37. package/esm2020/public-api.mjs +0 -42
  38. package/fesm2015/tots-table.mjs +0 -682
  39. package/fesm2015/tots-table.mjs.map +0 -1
  40. package/fesm2020/tots-table.mjs.map +0 -1
  41. /package/{esm2020 → esm2022}/lib/entities/tots-action-table.mjs +0 -0
  42. /package/{esm2020 → esm2022}/lib/entities/tots-column.mjs +0 -0
  43. /package/{esm2020 → esm2022}/lib/entities/tots-table-api-config.mjs +0 -0
  44. /package/{esm2020 → esm2022}/lib/entities/tots-table-config.mjs +0 -0
  45. /package/{esm2020 → esm2022}/lib/helpers/tots-table-helper.mjs +0 -0
  46. /package/{esm2020 → esm2022}/tots-table.mjs +0 -0
@@ -1,682 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { InjectionToken, Injectable, Component, Input, ViewContainerRef, Inject, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
3
- import { TotsQuery } from '@tots/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-bar';
20
- import { MatProgressBarModule } from '@angular/material/progress-bar';
21
- import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
22
-
23
- class TotsColumn {
24
- constructor() {
25
- this.key = '';
26
- this.title = '';
27
- this.is_show = true;
28
- this.hasOrder = false;
29
- }
30
- }
31
-
32
- class TotsTableConfig {
33
- constructor() {
34
- this.id = '';
35
- this.columns = [];
36
- this.classes = '';
37
- }
38
- }
39
-
40
- const TOTS_TABLE_DEFAULT_CONFIG = new InjectionToken('tots_table_default_config');
41
- class TotsTableDefaultConfig {
42
- constructor() {
43
- this.messageNotFound = "No results found, please try with other search terms";
44
- }
45
- }
46
- TotsTableDefaultConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableDefaultConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
47
- TotsTableDefaultConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableDefaultConfig, providedIn: "root" });
48
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableDefaultConfig, decorators: [{
49
- type: Injectable,
50
- args: [{
51
- providedIn: "root"
52
- }]
53
- }] });
54
-
55
- class TotsActionTable {
56
- constructor() {
57
- this.key = '';
58
- }
59
- }
60
-
61
- class TotsTableApiConfig {
62
- constructor() {
63
- this.id = '';
64
- this.columns = [];
65
- this.query = new TotsQuery();
66
- this.classes = '';
67
- }
68
- }
69
-
70
- class TotsTableHelper {
71
- /**
72
- * Obtiene el valor de un objeto a traves de la KEY
73
- * @param item
74
- * @param key
75
- * @returns
76
- */
77
- static getItemValueByKey(item, key) {
78
- if (key == undefined || item == undefined) {
79
- return '';
80
- }
81
- if (typeof key == 'string' && item[key] != undefined) {
82
- return item[key];
83
- }
84
- let valueFinal = item;
85
- for (const keyObj of key) {
86
- if (valueFinal[keyObj] == undefined) {
87
- return '';
88
- }
89
- valueFinal = valueFinal[keyObj];
90
- }
91
- return valueFinal;
92
- }
93
- }
94
-
95
- class TotsBaseColumnComponent {
96
- getItemValue() {
97
- return TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
98
- }
99
- }
100
- TotsBaseColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
101
- 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 });
102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
103
- type: Component,
104
- args: [{
105
- selector: 'tots-base-column',
106
- template: ''
107
- }]
108
- }], propDecorators: { column: [{
109
- type: Input
110
- }], item: [{
111
- type: Input
112
- }], onAction: [{
113
- type: Input
114
- }], index: [{
115
- type: Input
116
- }] } });
117
-
118
- class StringColumnComponent extends TotsBaseColumnComponent {
119
- getItemValue() {
120
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
121
- if (this.column.extra && this.column.extra.cutSeparator) {
122
- return value.split(this.column.extra.cutSeparator)[0];
123
- }
124
- return value;
125
- }
126
- get prepend() {
127
- var _a;
128
- return (_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.prepend;
129
- }
130
- }
131
- StringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
132
- StringColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringColumnComponent, selector: "tots-string-column", usesInheritance: true, ngImport: i0, template: "<span class=\"prefix\" *ngIf=\"prepend\"> {{ prepend }} </span>\n{{getItemValue()}}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
133
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, decorators: [{
134
- type: Component,
135
- args: [{ selector: 'tots-string-column', template: "<span class=\"prefix\" *ngIf=\"prepend\"> {{ prepend }} </span>\n{{getItemValue()}}" }]
136
- }] });
137
-
138
- class MoreMenuColumnComponent extends TotsBaseColumnComponent {
139
- clickButton(itemAction, $event) {
140
- this.onAction.next({ key: itemAction.key, item: this.item });
141
- $event.preventDefault();
142
- return false;
143
- }
144
- }
145
- MoreMenuColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
146
- 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"] }] });
147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
148
- type: Component,
149
- 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>" }]
150
- }] });
151
-
152
- class BooleanColumnComponent extends TotsBaseColumnComponent {
153
- }
154
- BooleanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
155
- 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"] }] });
156
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, decorators: [{
157
- type: Component,
158
- 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>" }]
159
- }] });
160
-
161
- class TwoStringColumnComponent extends TotsBaseColumnComponent {
162
- getSubtitleValue() {
163
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
164
- }
165
- }
166
- TwoStringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
167
- 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: [""] });
168
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
169
- type: Component,
170
- args: [{ selector: 'tots-two-string-column', template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>" }]
171
- }] });
172
-
173
- class IconButtonColumnComponent extends TotsBaseColumnComponent {
174
- clickButton($event) {
175
- this.onAction.next({ key: this.column.extra.action, item: this.item });
176
- $event.stopPropagation();
177
- return false;
178
- }
179
- getIconName() {
180
- return this.column.extra.icon;
181
- }
182
- getButtonColor() {
183
- return this.column.extra.matColor;
184
- }
185
- getClasses() {
186
- return this.column.extra.classes;
187
- }
188
- }
189
- IconButtonColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
190
- 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"] }] });
191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
192
- type: Component,
193
- 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>" }]
194
- }] });
195
-
196
- class CheckboxColumnComponent extends TotsBaseColumnComponent {
197
- onChange(event) {
198
- let key = 'select-item';
199
- if (!event.checked) {
200
- key = 'unselect-item';
201
- }
202
- this.onAction.next({ key: key, item: this.item });
203
- }
204
- }
205
- CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
206
- 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"] }] });
207
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
208
- type: Component,
209
- args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
210
- }] });
211
-
212
- class OptionColumnComponent extends TotsBaseColumnComponent {
213
- getItemValue() {
214
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
215
- for (const item of this.column.extra.options) {
216
- if (item[this.column.extra.field_rel_key] == value) {
217
- return item[this.column.extra.field_print_key];
218
- }
219
- }
220
- return '';
221
- }
222
- }
223
- OptionColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
224
- 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: [""] });
225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, decorators: [{
226
- type: Component,
227
- args: [{ selector: 'tots-option-column', template: "{{getItemValue()}}" }]
228
- }] });
229
-
230
- class UserColumnComponent extends TotsBaseColumnComponent {
231
- getFirstname() {
232
- var _a;
233
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_firstname_key) {
234
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_firstname_key);
235
- }
236
- return '';
237
- }
238
- getLastname() {
239
- var _a;
240
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_lastname_key) {
241
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_lastname_key);
242
- }
243
- return '';
244
- }
245
- getFullname() {
246
- return this.getFirstname() + ' ' + this.getLastname();
247
- }
248
- getPhoto() {
249
- var _a;
250
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_photo_key) {
251
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_photo_key);
252
- }
253
- return '';
254
- }
255
- getSubtitle() {
256
- var _a;
257
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_subtitle_key) {
258
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
259
- }
260
- return '';
261
- }
262
- isOnline() {
263
- var _a;
264
- if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_online_key) {
265
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_online_key);
266
- }
267
- return false;
268
- }
269
- }
270
- UserColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
271
- 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"] }] });
272
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, decorators: [{
273
- type: Component,
274
- 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"] }]
275
- }] });
276
-
277
- class CurrencyColumnComponent extends TotsBaseColumnComponent {
278
- }
279
- CurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
280
- 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" }] });
281
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
282
- type: Component,
283
- args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
284
- }] });
285
-
286
- class StatusColumnComponent extends OptionColumnComponent {
287
- getBackgroundColor() {
288
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
289
- for (const item of this.column.extra.options) {
290
- if (item[this.column.extra.field_rel_key] == value && item['background_color'] != undefined) {
291
- return item['background_color'];
292
- }
293
- }
294
- return '';
295
- }
296
- getFontColor() {
297
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
298
- for (const item of this.column.extra.options) {
299
- if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
300
- return item['font_color'];
301
- }
302
- }
303
- return '';
304
- }
305
- }
306
- StatusColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
307
- 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"] }] });
308
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, decorators: [{
309
- type: Component,
310
- 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"] }]
311
- }] });
312
-
313
- class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
314
- getBalance() {
315
- return this.getDebit() - this.getCredit();
316
- }
317
- getDebit() {
318
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_debit);
319
- }
320
- getCredit() {
321
- return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
322
- }
323
- }
324
- BalanceCurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
325
- 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" }] });
326
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
327
- type: Component,
328
- args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
329
- }] });
330
-
331
- class StatusIconColumnComponent extends OptionColumnComponent {
332
- getFontColor() {
333
- let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
334
- for (const item of this.column.extra.options) {
335
- if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
336
- return item['font_color'];
337
- }
338
- }
339
- return '';
340
- }
341
- }
342
- StatusIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
343
- 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"] }] });
344
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, decorators: [{
345
- type: Component,
346
- args: [{ selector: 'tots-status-icon-column', template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>" }]
347
- }] });
348
-
349
- class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent {
350
- getIconPositive() {
351
- return this.column.extra.icon_positive;
352
- }
353
- getIconNegative() {
354
- return this.column.extra.icon_negative;
355
- }
356
- getIconNeutral() {
357
- return this.column.extra.icon_neutral;
358
- }
359
- }
360
- BalanceCurrencyIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
361
- 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"] }] });
362
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
363
- type: Component,
364
- 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>" }]
365
- }] });
366
-
367
- class BasePrintColumnComponent {
368
- constructor(viewContainerRef) {
369
- this.viewContainerRef = viewContainerRef;
370
- }
371
- ngOnInit() {
372
- const view = this.viewContainerRef.createComponent(this.column.component);
373
- view.instance.column = this.column;
374
- view.instance.item = this.item;
375
- view.instance.onAction = this.onAction;
376
- view.instance.index = this.index;
377
- }
378
- }
379
- BasePrintColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
380
- 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: [""] });
381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
382
- type: Component,
383
- args: [{ selector: 'tots-base-print-column', template: "<div #contentColumn></div>" }]
384
- }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
385
- type: Input
386
- }], item: [{
387
- type: Input
388
- }], onAction: [{
389
- type: Input
390
- }], index: [{
391
- type: Input
392
- }] } });
393
-
394
- class LoadingAnimationRendererComponent {
395
- //#region Setup
396
- constructor(totsTableDefaultConfig, viewContainerRef) {
397
- this.totsTableDefaultConfig = totsTableDefaultConfig;
398
- this.viewContainerRef = viewContainerRef;
399
- }
400
- ngOnInit() {
401
- this.setLoader();
402
- }
403
- ngOnDestroy() {
404
- var _a;
405
- (_a = this.loadingComponentContainer) === null || _a === void 0 ? void 0 : _a.clear();
406
- }
407
- setLoader() {
408
- if (this.totsTableDefaultConfig.loadingComponent) {
409
- this.loadingComponent = this.viewContainerRef.createComponent(this.totsTableDefaultConfig.loadingComponent);
410
- }
411
- else {
412
- this.loadingComponent = this.viewContainerRef.createComponent(MatProgressSpinner);
413
- this.loadingComponent.instance.diameter = 50;
414
- this.loadingComponent.instance.mode = "indeterminate";
415
- }
416
- }
417
- }
418
- LoadingAnimationRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: LoadingAnimationRendererComponent, deps: [{ token: TOTS_TABLE_DEFAULT_CONFIG }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
419
- LoadingAnimationRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: LoadingAnimationRendererComponent, selector: "tots-loading-animation-renderer", viewQueries: [{ propertyName: "loadingComponentContainer", first: true, predicate: ["loadingComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #loadingComponentContainer></ng-container>", styles: [""] });
420
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: LoadingAnimationRendererComponent, decorators: [{
421
- type: Component,
422
- args: [{ selector: 'tots-loading-animation-renderer', template: "<ng-container #loadingComponentContainer></ng-container>" }]
423
- }], ctorParameters: function () {
424
- return [{ type: TotsTableDefaultConfig, decorators: [{
425
- type: Inject,
426
- args: [TOTS_TABLE_DEFAULT_CONFIG]
427
- }] }, { type: i0.ViewContainerRef }];
428
- }, propDecorators: { loadingComponentContainer: [{
429
- type: ViewChild,
430
- args: ['loadingComponentContainer', { read: ViewContainerRef }]
431
- }] } });
432
-
433
- class TotsTableComponent {
434
- constructor(totsTableDefaultConfig, changeDectetor) {
435
- this.totsTableDefaultConfig = totsTableDefaultConfig;
436
- this.changeDectetor = changeDectetor;
437
- this.config = new TotsTableConfig();
438
- this.pageIndex = 0;
439
- this.pageSize = 50;
440
- this.hasPagination = true;
441
- this.onAction = new EventEmitter();
442
- this.privateActions = new Subject();
443
- this.isLoading = true;
444
- this.firstLoad = true;
445
- this.displayColumns = [];
446
- this.messageNotFound = this.totsTableDefaultConfig.messageNotFound;
447
- }
448
- ngOnInit() {
449
- this.loadConfig();
450
- this.loadItems();
451
- }
452
- onClickOrder(column) {
453
- if (!column.hasOrder) {
454
- return;
455
- }
456
- let orderColumn = column.order;
457
- this.config.columns.forEach(c => c.order = undefined);
458
- column.order = orderColumn == 'asc' ? 'desc' : 'asc';
459
- this.onAction.emit({ key: 'click-order', item: column });
460
- }
461
- onClickRow(item) {
462
- this.onAction.emit({ key: 'click-row', item: item });
463
- }
464
- onPageChange(event) {
465
- this.onAction.emit({ key: 'page-change', item: event });
466
- }
467
- loadItems() {
468
- var _a;
469
- this.isLoading = true;
470
- 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(() => this.stopLoading());
471
- }
472
- stopLoading() {
473
- this.isLoading = false;
474
- this.firstLoad = false;
475
- }
476
- loadConfig() {
477
- this.loadColumns();
478
- this.privateActions.subscribe(action => {
479
- this.onAction.emit(action);
480
- });
481
- }
482
- loadColumns() {
483
- this.displayColumns = this.config.columns.filter(c => c.is_show || c.is_show == undefined).map(c => c.key);
484
- }
485
- getDataItems() {
486
- return this.dataItems;
487
- }
488
- refreshDataItems(newData) {
489
- this.dataItems = newData;
490
- }
491
- detectChanges() {
492
- this.changeDectetor.detectChanges();
493
- }
494
- }
495
- TotsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, deps: [{ token: TOTS_TABLE_DEFAULT_CONFIG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
496
- 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 && firstLoad\" class=\"tots-table-loading\">\n <tots-loading-animation-renderer></tots-loading-animation-renderer>\n </div>\n\n <div class=\"tots-table-bar-loading\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\"></mat-progress-bar>\n </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-bar-loading{height:4px}.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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }, { kind: "component", type: LoadingAnimationRendererComponent, selector: "tots-loading-animation-renderer" }] });
497
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, decorators: [{
498
- type: Component,
499
- 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 && firstLoad\" class=\"tots-table-loading\">\n <tots-loading-animation-renderer></tots-loading-animation-renderer>\n </div>\n\n <div class=\"tots-table-bar-loading\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\"></mat-progress-bar>\n </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-bar-loading{height:4px}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
500
- }], ctorParameters: function () {
501
- return [{ type: TotsTableDefaultConfig, decorators: [{
502
- type: Inject,
503
- args: [TOTS_TABLE_DEFAULT_CONFIG]
504
- }] }, { type: i0.ChangeDetectorRef }];
505
- }, propDecorators: { config: [{
506
- type: Input
507
- }], pageIndex: [{
508
- type: Input
509
- }], pageSize: [{
510
- type: Input
511
- }], hasPagination: [{
512
- type: Input
513
- }], messageNotFound: [{
514
- type: Input
515
- }], onAction: [{
516
- type: Output
517
- }] } });
518
-
519
- class TotsTableApiComponent {
520
- constructor() {
521
- this.config = new TotsTableApiConfig();
522
- this.hasPagination = true;
523
- this.isPaginationStartIndexInZero = false;
524
- this.onAction = new EventEmitter();
525
- this.configTable = new TotsTableConfig();
526
- }
527
- ngOnInit() {
528
- this.loadConfig();
529
- }
530
- onTableAction(action) {
531
- if (action.key == 'page-change') {
532
- this.config.query.per_page = action.item.pageSize;
533
- if (this.isPaginationStartIndexInZero) {
534
- this.config.query.page = action.item.pageIndex;
535
- }
536
- else {
537
- this.config.query.page = action.item.pageIndex + 1;
538
- }
539
- this.configTable.obs = this.config.service.list(this.config.query);
540
- }
541
- this.onAction.emit(action);
542
- }
543
- loadConfig() {
544
- this.configTable.id = this.config.id;
545
- this.configTable.columns = this.config.columns;
546
- this.configTable.obs = this.config.service.list(this.config.query);
547
- this.configTable.classes = this.config.classes;
548
- }
549
- refreshQueryAndLoadItems() {
550
- this.configTable.obs = this.config.service.list(this.config.query);
551
- return this.loadItems();
552
- }
553
- loadItems() {
554
- return this.tableComp.loadItems();
555
- }
556
- getDataItems() {
557
- return this.tableComp.getDataItems();
558
- }
559
- setObs(obs) {
560
- this.configTable.obs = obs;
561
- }
562
- }
563
- TotsTableApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
564
- 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"] }] });
565
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, decorators: [{
566
- type: Component,
567
- 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" }]
568
- }], propDecorators: { tableComp: [{
569
- type: ViewChild,
570
- args: ['tableComp']
571
- }], config: [{
572
- type: Input
573
- }], hasPagination: [{
574
- type: Input
575
- }], isPaginationStartIndexInZero: [{
576
- type: Input
577
- }], onAction: [{
578
- type: Output
579
- }] } });
580
-
581
- class TotsTableModule {
582
- }
583
- TotsTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
584
- TotsTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, declarations: [TotsTableComponent,
585
- BasePrintColumnComponent,
586
- StringColumnComponent,
587
- TotsTableApiComponent,
588
- MoreMenuColumnComponent,
589
- BooleanColumnComponent,
590
- TwoStringColumnComponent,
591
- IconButtonColumnComponent,
592
- CheckboxColumnComponent,
593
- OptionColumnComponent,
594
- UserColumnComponent,
595
- CurrencyColumnComponent,
596
- StatusColumnComponent,
597
- BalanceCurrencyColumnComponent,
598
- StatusIconColumnComponent,
599
- BalanceCurrencyIconColumnComponent,
600
- LoadingAnimationRendererComponent], imports: [CommonModule,
601
- // Angular Material
602
- MatIconModule,
603
- MatTableModule,
604
- MatPaginatorModule,
605
- MatButtonModule,
606
- MatMenuModule,
607
- MatCheckboxModule,
608
- MatProgressSpinnerModule,
609
- MatProgressBarModule], exports: [TotsTableComponent,
610
- TotsTableApiComponent] });
611
- TotsTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, providers: [
612
- {
613
- provide: TOTS_TABLE_DEFAULT_CONFIG,
614
- useClass: TotsTableDefaultConfig
615
- }
616
- ], imports: [CommonModule,
617
- // Angular Material
618
- MatIconModule,
619
- MatTableModule,
620
- MatPaginatorModule,
621
- MatButtonModule,
622
- MatMenuModule,
623
- MatCheckboxModule,
624
- MatProgressSpinnerModule,
625
- MatProgressBarModule] });
626
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, decorators: [{
627
- type: NgModule,
628
- args: [{
629
- declarations: [
630
- TotsTableComponent,
631
- BasePrintColumnComponent,
632
- StringColumnComponent,
633
- TotsTableApiComponent,
634
- MoreMenuColumnComponent,
635
- BooleanColumnComponent,
636
- TwoStringColumnComponent,
637
- IconButtonColumnComponent,
638
- CheckboxColumnComponent,
639
- OptionColumnComponent,
640
- UserColumnComponent,
641
- CurrencyColumnComponent,
642
- StatusColumnComponent,
643
- BalanceCurrencyColumnComponent,
644
- StatusIconColumnComponent,
645
- BalanceCurrencyIconColumnComponent,
646
- LoadingAnimationRendererComponent
647
- ],
648
- imports: [
649
- CommonModule,
650
- // Angular Material
651
- MatIconModule,
652
- MatTableModule,
653
- MatPaginatorModule,
654
- MatButtonModule,
655
- MatMenuModule,
656
- MatCheckboxModule,
657
- MatProgressSpinnerModule,
658
- MatProgressBarModule
659
- ],
660
- exports: [
661
- TotsTableComponent,
662
- TotsTableApiComponent
663
- ],
664
- providers: [
665
- {
666
- provide: TOTS_TABLE_DEFAULT_CONFIG,
667
- useClass: TotsTableDefaultConfig
668
- }
669
- ]
670
- }]
671
- }] });
672
-
673
- /*
674
- * Public API Surface of table
675
- */
676
-
677
- /**
678
- * Generated bundle index. Do not edit.
679
- */
680
-
681
- export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TOTS_TABLE_DEFAULT_CONFIG, TotsActionTable, TotsBaseColumnComponent, TotsColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableDefaultConfig, TotsTableHelper, TotsTableModule, TwoStringColumnComponent, UserColumnComponent };
682
- //# sourceMappingURL=tots-table.mjs.map