@tots/table 16.0.16 → 16.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/column-factories/tots-number-column.mjs +12 -0
- package/esm2022/lib/columns/number-column/number-column.component.mjs +13 -0
- package/esm2022/lib/table.module.mjs +6 -3
- package/esm2022/public-api.mjs +12 -10
- package/fesm2022/tots-table.mjs +158 -137
- package/fesm2022/tots-table.mjs.map +1 -1
- package/lib/column-factories/tots-number-column.d.ts +4 -0
- package/lib/columns/number-column/number-column.component.d.ts +6 -0
- package/lib/table.module.d.ts +11 -10
- package/package.json +1 -1
- package/public-api.d.ts +11 -9
package/fesm2022/tots-table.mjs
CHANGED
|
@@ -5,14 +5,14 @@ import * as i1 from '@angular/common';
|
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
import * as i2 from '@angular/material/icon';
|
|
7
7
|
import { MatIconModule } from '@angular/material/icon';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i1$1 from '@angular/material/checkbox';
|
|
9
|
+
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
10
|
+
import * as i2$1 from '@angular/material/button';
|
|
9
11
|
import { MatButtonModule } from '@angular/material/button';
|
|
10
12
|
import * as i4 from '@angular/material/menu';
|
|
11
13
|
import { MatMenuModule } from '@angular/material/menu';
|
|
12
|
-
import * as i1$1 from '@angular/material/checkbox';
|
|
13
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
14
14
|
import { Subject, tap } from 'rxjs';
|
|
15
|
-
import * as i3
|
|
15
|
+
import * as i3 from '@angular/material/table';
|
|
16
16
|
import { MatTableModule } from '@angular/material/table';
|
|
17
17
|
import * as i4$1 from '@angular/material/paginator';
|
|
18
18
|
import { MatPaginatorModule, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
|
|
@@ -143,37 +143,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
143
143
|
type: Input
|
|
144
144
|
}] } });
|
|
145
145
|
|
|
146
|
-
class
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
if (this.column.extra && this.column.extra.cutSeparator) {
|
|
150
|
-
return value.split(this.column.extra.cutSeparator)[0];
|
|
151
|
-
}
|
|
152
|
-
return value;
|
|
146
|
+
class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
147
|
+
getBalance() {
|
|
148
|
+
return this.getDebit() - this.getCredit();
|
|
153
149
|
}
|
|
154
|
-
|
|
155
|
-
return this.column.extra
|
|
150
|
+
getDebit() {
|
|
151
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_debit);
|
|
156
152
|
}
|
|
157
|
-
|
|
158
|
-
|
|
153
|
+
getCredit() {
|
|
154
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
|
|
155
|
+
}
|
|
156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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" }] }); }
|
|
159
158
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
|
|
161
160
|
type: Component,
|
|
162
|
-
args: [{ selector: 'tots-
|
|
161
|
+
args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
|
|
163
162
|
}] });
|
|
164
163
|
|
|
165
|
-
class
|
|
166
|
-
|
|
167
|
-
this.
|
|
168
|
-
$event.preventDefault();
|
|
169
|
-
return false;
|
|
164
|
+
class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent {
|
|
165
|
+
getIconPositive() {
|
|
166
|
+
return this.column.extra.icon_positive;
|
|
170
167
|
}
|
|
171
|
-
|
|
172
|
-
|
|
168
|
+
getIconNegative() {
|
|
169
|
+
return this.column.extra.icon_negative;
|
|
170
|
+
}
|
|
171
|
+
getIconNeutral() {
|
|
172
|
+
return this.column.extra.icon_neutral;
|
|
173
|
+
}
|
|
174
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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"] }] }); }
|
|
173
176
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
|
|
175
178
|
type: Component,
|
|
176
|
-
args: [{ selector: 'tots-
|
|
179
|
+
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>" }]
|
|
177
180
|
}] });
|
|
178
181
|
|
|
179
182
|
class BooleanColumnComponent extends TotsBaseColumnComponent {
|
|
@@ -185,16 +188,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
185
188
|
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>" }]
|
|
186
189
|
}] });
|
|
187
190
|
|
|
188
|
-
class
|
|
189
|
-
|
|
190
|
-
|
|
191
|
+
class CheckboxColumnComponent extends TotsBaseColumnComponent {
|
|
192
|
+
onChange(event) {
|
|
193
|
+
let key = 'select-item';
|
|
194
|
+
if (!event.checked) {
|
|
195
|
+
key = 'unselect-item';
|
|
196
|
+
}
|
|
197
|
+
this.onAction.next({ key: key, item: this.item });
|
|
191
198
|
}
|
|
192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type:
|
|
199
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CheckboxColumnComponent, selector: "tots-checkbox-column", usesInheritance: true, ngImport: i0, template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox [class]=\"this.column.extra?.class\" [color]=\"this.column.extra?.color\" (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"] }] }); }
|
|
194
201
|
}
|
|
195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
|
|
196
203
|
type: Component,
|
|
197
|
-
args: [{ selector: 'tots-
|
|
204
|
+
args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox [class]=\"this.column.extra?.class\" [color]=\"this.column.extra?.color\" (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
|
|
205
|
+
}] });
|
|
206
|
+
|
|
207
|
+
class CurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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" }] }); }
|
|
210
|
+
}
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
|
|
212
|
+
type: Component,
|
|
213
|
+
args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
|
|
198
214
|
}] });
|
|
199
215
|
|
|
200
216
|
class IconButtonColumnComponent extends TotsBaseColumnComponent {
|
|
@@ -213,27 +229,47 @@ class IconButtonColumnComponent extends TotsBaseColumnComponent {
|
|
|
213
229
|
return this.column.extra.class;
|
|
214
230
|
}
|
|
215
231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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:
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
217
233
|
}
|
|
218
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
|
|
219
235
|
type: Component,
|
|
220
236
|
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>" }]
|
|
221
237
|
}] });
|
|
222
238
|
|
|
223
|
-
class
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
key = 'unselect-item';
|
|
228
|
-
}
|
|
229
|
-
this.onAction.next({ key: key, item: this.item });
|
|
239
|
+
class LinkColumnComponent extends TotsBaseColumnComponent {
|
|
240
|
+
ngOnInit() {
|
|
241
|
+
this.linkCaption = this.column.extra?.caption || "Open in new tab";
|
|
242
|
+
this.target = this.column.extra?.target || "_blank";
|
|
230
243
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type:
|
|
244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LinkColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: LinkColumnComponent, selector: "tots-link-column", usesInheritance: true, ngImport: i0, template: "<div>\n <a *ngIf=\"getItemValue()\" [href]=\"getItemValue()\" [target]=\"target\">\n {{ linkCaption }}\n <mat-icon *ngIf=\"target == '_blank'\">open_in_new</mat-icon>\n </a>\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\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"] }] }); }
|
|
233
246
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
235
248
|
type: Component,
|
|
236
|
-
args: [{ selector: 'tots-
|
|
249
|
+
args: [{ selector: 'tots-link-column', template: "<div>\n <a *ngIf=\"getItemValue()\" [href]=\"getItemValue()\" [target]=\"target\">\n {{ linkCaption }}\n <mat-icon *ngIf=\"target == '_blank'\">open_in_new</mat-icon>\n </a>\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\n"] }]
|
|
250
|
+
}] });
|
|
251
|
+
|
|
252
|
+
class MoreMenuColumnComponent extends TotsBaseColumnComponent {
|
|
253
|
+
clickButton(itemAction, $event) {
|
|
254
|
+
this.onAction.next({ key: itemAction.key, item: this.item });
|
|
255
|
+
$event.preventDefault();
|
|
256
|
+
return false;
|
|
257
|
+
}
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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: i2$1.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"] }] }); }
|
|
260
|
+
}
|
|
261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
|
|
262
|
+
type: Component,
|
|
263
|
+
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>" }]
|
|
264
|
+
}] });
|
|
265
|
+
|
|
266
|
+
class NumberColumnComponent extends TotsBaseColumnComponent {
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: NumberColumnComponent, selector: "tots-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n 'tots-number-column-positive': getItemValue() > 0,\n 'tots-number-column-negative': getItemValue() < 0\n}\">\n\t<span class=\"tots-number-column-prepend\" *ngIf=\"column.extra?.prepend\">{{ column.extra?.prepend }}</span>\n {{ getItemValue() | number:\"1.0-2\" }}\n\t<span class=\"tots-number-column-append\" *ngIf=\"column.extra?.append\">{{ column.extra?.append }}</span>\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: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
|
|
269
|
+
}
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: NumberColumnComponent, decorators: [{
|
|
271
|
+
type: Component,
|
|
272
|
+
args: [{ selector: 'tots-number-column', template: "<span [ngClass]=\"{\n 'tots-number-column-positive': getItemValue() > 0,\n 'tots-number-column-negative': getItemValue() < 0\n}\">\n\t<span class=\"tots-number-column-prepend\" *ngIf=\"column.extra?.prepend\">{{ column.extra?.prepend }}</span>\n {{ getItemValue() | number:\"1.0-2\" }}\n\t<span class=\"tots-number-column-append\" *ngIf=\"column.extra?.append\">{{ column.extra?.append }}</span>\n</span>" }]
|
|
237
273
|
}] });
|
|
238
274
|
|
|
239
275
|
class OptionColumnComponent extends TotsBaseColumnComponent {
|
|
@@ -254,57 +290,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
254
290
|
args: [{ selector: 'tots-option-column', template: "{{getItemValue()}}" }]
|
|
255
291
|
}] });
|
|
256
292
|
|
|
257
|
-
class UserColumnComponent extends TotsBaseColumnComponent {
|
|
258
|
-
getFirstname() {
|
|
259
|
-
if (this.column.extra?.field_firstname_key) {
|
|
260
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_firstname_key);
|
|
261
|
-
}
|
|
262
|
-
return '';
|
|
263
|
-
}
|
|
264
|
-
getLastname() {
|
|
265
|
-
if (this.column.extra?.field_lastname_key) {
|
|
266
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_lastname_key);
|
|
267
|
-
}
|
|
268
|
-
return '';
|
|
269
|
-
}
|
|
270
|
-
getFullname() {
|
|
271
|
-
return this.getFirstname() + ' ' + this.getLastname();
|
|
272
|
-
}
|
|
273
|
-
getPhoto() {
|
|
274
|
-
if (this.column.extra?.field_photo_key) {
|
|
275
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_photo_key);
|
|
276
|
-
}
|
|
277
|
-
return '';
|
|
278
|
-
}
|
|
279
|
-
getSubtitle() {
|
|
280
|
-
if (this.column.extra?.field_subtitle_key) {
|
|
281
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
|
|
282
|
-
}
|
|
283
|
-
return '';
|
|
284
|
-
}
|
|
285
|
-
isOnline() {
|
|
286
|
-
if (this.column.extra?.field_online_key) {
|
|
287
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_online_key);
|
|
288
|
-
}
|
|
289
|
-
return false;
|
|
290
|
-
}
|
|
291
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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"] }] }); }
|
|
293
|
-
}
|
|
294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, decorators: [{
|
|
295
|
-
type: Component,
|
|
296
|
-
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"] }]
|
|
297
|
-
}] });
|
|
298
|
-
|
|
299
|
-
class CurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
300
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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" }] }); }
|
|
302
|
-
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
|
|
304
|
-
type: Component,
|
|
305
|
-
args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
|
|
306
|
-
}] });
|
|
307
|
-
|
|
308
293
|
class StatusColumnComponent extends OptionColumnComponent {
|
|
309
294
|
getBackgroundColor() {
|
|
310
295
|
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
@@ -332,24 +317,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
332
317
|
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"] }]
|
|
333
318
|
}] });
|
|
334
319
|
|
|
335
|
-
class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
336
|
-
getBalance() {
|
|
337
|
-
return this.getDebit() - this.getCredit();
|
|
338
|
-
}
|
|
339
|
-
getDebit() {
|
|
340
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_debit);
|
|
341
|
-
}
|
|
342
|
-
getCredit() {
|
|
343
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
|
|
344
|
-
}
|
|
345
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
346
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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" }] }); }
|
|
347
|
-
}
|
|
348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
|
|
349
|
-
type: Component,
|
|
350
|
-
args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
|
|
351
|
-
}] });
|
|
352
|
-
|
|
353
320
|
class StatusIconColumnComponent extends OptionColumnComponent {
|
|
354
321
|
getFontColor() {
|
|
355
322
|
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
@@ -368,35 +335,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
368
335
|
args: [{ selector: 'tots-status-icon-column', template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>" }]
|
|
369
336
|
}] });
|
|
370
337
|
|
|
371
|
-
class
|
|
372
|
-
|
|
373
|
-
|
|
338
|
+
class StringColumnComponent extends TotsBaseColumnComponent {
|
|
339
|
+
getItemValue() {
|
|
340
|
+
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
341
|
+
if (this.column.extra && this.column.extra.cutSeparator) {
|
|
342
|
+
return value.split(this.column.extra.cutSeparator)[0];
|
|
343
|
+
}
|
|
344
|
+
return value;
|
|
374
345
|
}
|
|
375
|
-
|
|
376
|
-
return this.column.extra
|
|
346
|
+
get prepend() {
|
|
347
|
+
return this.column.extra?.prepend;
|
|
377
348
|
}
|
|
378
|
-
|
|
379
|
-
|
|
349
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
350
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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"] }] }); }
|
|
351
|
+
}
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StringColumnComponent, decorators: [{
|
|
353
|
+
type: Component,
|
|
354
|
+
args: [{ selector: 'tots-string-column', template: "<span class=\"prefix\" *ngIf=\"prepend\"> {{ prepend }} </span>\n{{getItemValue()}}" }]
|
|
355
|
+
}] });
|
|
356
|
+
|
|
357
|
+
class TwoStringColumnComponent extends TotsBaseColumnComponent {
|
|
358
|
+
getSubtitleValue() {
|
|
359
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
|
|
380
360
|
}
|
|
381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
382
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type:
|
|
361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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: [""] }); }
|
|
383
363
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
|
|
385
365
|
type: Component,
|
|
386
|
-
args: [{ selector: 'tots-
|
|
366
|
+
args: [{ selector: 'tots-two-string-column', template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>" }]
|
|
387
367
|
}] });
|
|
388
368
|
|
|
389
|
-
class
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
369
|
+
class UserColumnComponent extends TotsBaseColumnComponent {
|
|
370
|
+
getFirstname() {
|
|
371
|
+
if (this.column.extra?.field_firstname_key) {
|
|
372
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_firstname_key);
|
|
373
|
+
}
|
|
374
|
+
return '';
|
|
393
375
|
}
|
|
394
|
-
|
|
395
|
-
|
|
376
|
+
getLastname() {
|
|
377
|
+
if (this.column.extra?.field_lastname_key) {
|
|
378
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_lastname_key);
|
|
379
|
+
}
|
|
380
|
+
return '';
|
|
381
|
+
}
|
|
382
|
+
getFullname() {
|
|
383
|
+
return this.getFirstname() + ' ' + this.getLastname();
|
|
384
|
+
}
|
|
385
|
+
getPhoto() {
|
|
386
|
+
if (this.column.extra?.field_photo_key) {
|
|
387
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_photo_key);
|
|
388
|
+
}
|
|
389
|
+
return '';
|
|
390
|
+
}
|
|
391
|
+
getSubtitle() {
|
|
392
|
+
if (this.column.extra?.field_subtitle_key) {
|
|
393
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
|
|
394
|
+
}
|
|
395
|
+
return '';
|
|
396
|
+
}
|
|
397
|
+
isOnline() {
|
|
398
|
+
if (this.column.extra?.field_online_key) {
|
|
399
|
+
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_online_key);
|
|
400
|
+
}
|
|
401
|
+
return false;
|
|
402
|
+
}
|
|
403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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"] }] }); }
|
|
396
405
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type:
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, decorators: [{
|
|
398
407
|
type: Component,
|
|
399
|
-
args: [{ selector: 'tots-
|
|
408
|
+
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"] }]
|
|
400
409
|
}] });
|
|
401
410
|
|
|
402
411
|
class TotsBalanceColumn extends TotsColumn {
|
|
@@ -478,6 +487,16 @@ class TotsMoreMenuColumn extends TotsColumn {
|
|
|
478
487
|
}
|
|
479
488
|
}
|
|
480
489
|
|
|
490
|
+
class TotsNumberColumn extends TotsColumn {
|
|
491
|
+
constructor(id, fieldKey, title, hasOrder, order, prepend, append) {
|
|
492
|
+
super(id, NumberColumnComponent, fieldKey, title, hasOrder, order);
|
|
493
|
+
this.extra = {
|
|
494
|
+
prepend: prepend,
|
|
495
|
+
append: append
|
|
496
|
+
};
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
|
|
481
500
|
class TotsOptionColumn extends TotsColumn {
|
|
482
501
|
constructor(id, fieldKey, options, title, hasOrder, order) {
|
|
483
502
|
super(id, OptionColumnComponent, fieldKey, title, hasOrder, order);
|
|
@@ -680,7 +699,7 @@ class TotsTableComponent {
|
|
|
680
699
|
this.changeDectetor.detectChanges();
|
|
681
700
|
}
|
|
682
701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TOTS_TABLE_DEFAULT_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
683
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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\n <!-- #region Lower paginator -->\n <ng-container *ngIf=\"upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Lower progress bar -->\n <ng-container *ngIf=\"upperProgressBar\">\n <div class=\"tots-table-bar-loading upper\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n </div>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Table -->\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 <!-- #endregion -->\n\n <!-- #region First loading animation -->\n <div *ngIf=\"isLoading && firstLoad\" class=\"tots-table-loading\">\n <tots-loading-animation-renderer></tots-loading-animation-renderer>\n </div>\n <!-- #endregion -->\n\n <!-- #region Lower progress bar -->\n <ng-container *ngIf=\"lowerProgressBar\">\n <div class=\"tots-table-bar-loading lower\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n </div>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Lower paginator -->\n <ng-container *ngIf=\"lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n </ng-container>\n <!-- #endregion -->\n\n</div>", 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
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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\n <!-- #region Lower paginator -->\n <ng-container *ngIf=\"upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Lower progress bar -->\n <ng-container *ngIf=\"upperProgressBar\">\n <div class=\"tots-table-bar-loading upper\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n </div>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Table -->\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 <!-- #endregion -->\n\n <!-- #region First loading animation -->\n <div *ngIf=\"isLoading && firstLoad\" class=\"tots-table-loading\">\n <tots-loading-animation-renderer></tots-loading-animation-renderer>\n </div>\n <!-- #endregion -->\n\n <!-- #region Lower progress bar -->\n <ng-container *ngIf=\"lowerProgressBar\">\n <div class=\"tots-table-bar-loading lower\">\n <mat-progress-bar *ngIf=\"isLoading && !firstLoad\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n </div>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Lower paginator -->\n <ng-container *ngIf=\"lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n </ng-container>\n <!-- #endregion -->\n\n</div>", 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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.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" }] }); }
|
|
684
703
|
}
|
|
685
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, decorators: [{
|
|
686
705
|
type: Component,
|
|
@@ -783,7 +802,8 @@ class TotsTableModule {
|
|
|
783
802
|
StatusIconColumnComponent,
|
|
784
803
|
BalanceCurrencyIconColumnComponent,
|
|
785
804
|
LoadingAnimationRendererComponent,
|
|
786
|
-
LinkColumnComponent
|
|
805
|
+
LinkColumnComponent,
|
|
806
|
+
NumberColumnComponent], imports: [CommonModule,
|
|
787
807
|
// Angular Material
|
|
788
808
|
MatIconModule,
|
|
789
809
|
MatTableModule,
|
|
@@ -837,7 +857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
837
857
|
StatusIconColumnComponent,
|
|
838
858
|
BalanceCurrencyIconColumnComponent,
|
|
839
859
|
LoadingAnimationRendererComponent,
|
|
840
|
-
LinkColumnComponent
|
|
860
|
+
LinkColumnComponent,
|
|
861
|
+
NumberColumnComponent
|
|
841
862
|
],
|
|
842
863
|
imports: [
|
|
843
864
|
CommonModule,
|
|
@@ -881,5 +902,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
|
|
|
881
902
|
* Generated bundle index. Do not edit.
|
|
882
903
|
*/
|
|
883
904
|
|
|
884
|
-
export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, LinkColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TOTS_TABLE_DEFAULT_CONFIG, TotsActionTable, TotsBalanceColumn, TotsBalanceIconColumn, TotsBaseColumnComponent, TotsBooleanColumn, TotsCheckboxColumn, TotsColumn, TotsColumnOption, TotsCurrencyColumn, TotsIconButtonColumn, TotsLinkColumn, TotsMoreMenuColumn, TotsMoreMenuItem, TotsOptionColumn, TotsStatusColumn, TotsStatusColumnOption, TotsStatusIconColumn, TotsStatusIconColumnOption, TotsStringColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableDefaultConfig, TotsTableHelper, TotsTableModule, TotsTwoStringColumn, TotsUserColumn, TwoStringColumnComponent, UserColumnComponent };
|
|
905
|
+
export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, LinkColumnComponent, MoreMenuColumnComponent, NumberColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TOTS_TABLE_DEFAULT_CONFIG, TotsActionTable, TotsBalanceColumn, TotsBalanceIconColumn, TotsBaseColumnComponent, TotsBooleanColumn, TotsCheckboxColumn, TotsColumn, TotsColumnOption, TotsCurrencyColumn, TotsIconButtonColumn, TotsLinkColumn, TotsMoreMenuColumn, TotsMoreMenuItem, TotsNumberColumn, TotsOptionColumn, TotsStatusColumn, TotsStatusColumnOption, TotsStatusIconColumn, TotsStatusIconColumnOption, TotsStringColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableDefaultConfig, TotsTableHelper, TotsTableModule, TotsTwoStringColumn, TotsUserColumn, TwoStringColumnComponent, UserColumnComponent };
|
|
885
906
|
//# sourceMappingURL=tots-table.mjs.map
|