@tetacom/ng-components 1.0.146 → 1.0.148
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/component/table/table/table.component.d.ts +1 -2
- package/component/table/table-body/table-body.component.d.ts +3 -2
- package/component/tree/tree/tree.component.d.ts +7 -3
- package/esm2020/common/util/position-util.mjs +9 -9
- package/esm2020/component/dropdown/dropdown-base.mjs +2 -1
- package/esm2020/component/table/table/table.component.mjs +8 -12
- package/esm2020/component/table/table-body/table-body.component.mjs +7 -4
- package/esm2020/component/table/util/table-util.mjs +4 -4
- package/esm2020/component/tree/tree/tree.component.mjs +22 -7
- package/fesm2015/tetacom-ng-components.mjs +46 -26
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +42 -26
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1163,21 +1163,21 @@ class PositionUtil {
|
|
|
1163
1163
|
rect.minWidth = containerWidth;
|
|
1164
1164
|
}
|
|
1165
1165
|
if (verticalAlign === VerticalAlign.auto) {
|
|
1166
|
-
if (containerPosition.bottom
|
|
1167
|
-
window.innerHeight / 2) {
|
|
1168
|
-
verticalAlign = VerticalAlign.
|
|
1166
|
+
if (containerPosition.bottom + elementHeight > window.innerHeight &&
|
|
1167
|
+
containerPosition.bottom >= window.innerHeight / 2) {
|
|
1168
|
+
verticalAlign = VerticalAlign.top;
|
|
1169
1169
|
}
|
|
1170
1170
|
else {
|
|
1171
|
-
verticalAlign = VerticalAlign.
|
|
1171
|
+
verticalAlign = VerticalAlign.bottom;
|
|
1172
1172
|
}
|
|
1173
1173
|
}
|
|
1174
1174
|
if (verticalAlign === VerticalAlign.innerAuto) {
|
|
1175
|
-
if (containerPosition.bottom
|
|
1176
|
-
window.innerHeight / 2) {
|
|
1177
|
-
verticalAlign = VerticalAlign.
|
|
1175
|
+
if (containerPosition.bottom + elementHeight > window.innerHeight &&
|
|
1176
|
+
containerPosition.bottom >= window.innerHeight / 2) {
|
|
1177
|
+
verticalAlign = VerticalAlign.innerTop;
|
|
1178
1178
|
}
|
|
1179
1179
|
else {
|
|
1180
|
-
verticalAlign = VerticalAlign.
|
|
1180
|
+
verticalAlign = VerticalAlign.innerBottom;
|
|
1181
1181
|
}
|
|
1182
1182
|
}
|
|
1183
1183
|
if (verticalAlign === VerticalAlign.top) {
|
|
@@ -1429,6 +1429,7 @@ class DropdownBase {
|
|
|
1429
1429
|
}
|
|
1430
1430
|
setPosition(container, target) {
|
|
1431
1431
|
const containerPosition = container.getBoundingClientRect();
|
|
1432
|
+
// target.style.maxHeight = null;
|
|
1432
1433
|
const targetPosition = target.getBoundingClientRect();
|
|
1433
1434
|
const rect = {
|
|
1434
1435
|
bottom: containerPosition.bottom,
|
|
@@ -8435,14 +8436,15 @@ class TableUtil {
|
|
|
8435
8436
|
}
|
|
8436
8437
|
static filterNumber(data, filter) {
|
|
8437
8438
|
const filterNumber = (row) => {
|
|
8439
|
+
var _a, _b, _c;
|
|
8438
8440
|
const item = row;
|
|
8439
|
-
return (filter.value.lessThan === null || filter.value.lessThan === undefined
|
|
8441
|
+
return (filter.value.lessThan === null || filter.value.lessThan === undefined || ((_a = filter.value.lessThan) === null || _a === void 0 ? void 0 : _a.toString()) === ''
|
|
8440
8442
|
? true
|
|
8441
8443
|
: filter.value.lessThan >= item[filter.field]) &&
|
|
8442
|
-
(filter.value.greaterThan === null || filter.value.greaterThan === undefined
|
|
8444
|
+
(filter.value.greaterThan === null || filter.value.greaterThan === undefined || ((_b = filter.value.greaterThan) === null || _b === void 0 ? void 0 : _b.toString()) === ''
|
|
8443
8445
|
? true
|
|
8444
8446
|
: filter.value.greaterThan <= item[filter.field]) &&
|
|
8445
|
-
(filter.value.equalsTo === null || filter.value.equalsTo === undefined
|
|
8447
|
+
(filter.value.equalsTo === null || filter.value.equalsTo === undefined || ((_c = filter.value.equalsTo) === null || _c === void 0 ? void 0 : _c.toString()) === ''
|
|
8446
8448
|
? true
|
|
8447
8449
|
: filter.value.equalsTo === item[filter.field]);
|
|
8448
8450
|
};
|
|
@@ -9106,8 +9108,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9106
9108
|
}] } });
|
|
9107
9109
|
|
|
9108
9110
|
class TreeComponent {
|
|
9109
|
-
constructor(_service, _cdr, _zone) {
|
|
9111
|
+
constructor(_service, _elementRef, _cdr, _zone) {
|
|
9110
9112
|
this._service = _service;
|
|
9113
|
+
this._elementRef = _elementRef;
|
|
9111
9114
|
this._cdr = _cdr;
|
|
9112
9115
|
this._zone = _zone;
|
|
9113
9116
|
this.padding = 8;
|
|
@@ -9126,9 +9129,11 @@ class TreeComponent {
|
|
|
9126
9129
|
this._service.openItems
|
|
9127
9130
|
.pipe(takeWhile((_) => this._alive), filter((_) => this._openItems !== _))
|
|
9128
9131
|
.subscribe((_) => {
|
|
9132
|
+
var _a;
|
|
9129
9133
|
this._openItems = _;
|
|
9130
9134
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9131
9135
|
this.openItemsChange.emit(_);
|
|
9136
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9132
9137
|
});
|
|
9133
9138
|
}
|
|
9134
9139
|
set data(data) {
|
|
@@ -9149,20 +9154,24 @@ class TreeComponent {
|
|
|
9149
9154
|
}
|
|
9150
9155
|
ngOnInit() {
|
|
9151
9156
|
this.service.emit(this._service);
|
|
9157
|
+
this.addResizeObserver();
|
|
9152
9158
|
}
|
|
9153
9159
|
ngOnChanges(changes) {
|
|
9160
|
+
var _a;
|
|
9154
9161
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9155
9162
|
this.childPadding = this.hasChildren(this._data);
|
|
9163
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9156
9164
|
}
|
|
9157
9165
|
ngOnDestroy() {
|
|
9158
9166
|
this._alive = false;
|
|
9167
|
+
this.removeResizeObserver();
|
|
9159
9168
|
}
|
|
9160
9169
|
ngAfterViewInit() {
|
|
9161
9170
|
this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
|
|
9162
9171
|
this._zone.runOutsideAngular(() => {
|
|
9163
9172
|
setTimeout(() => {
|
|
9164
9173
|
var _a;
|
|
9165
|
-
(_a = this.
|
|
9174
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, 'smooth');
|
|
9166
9175
|
});
|
|
9167
9176
|
});
|
|
9168
9177
|
});
|
|
@@ -9183,13 +9192,24 @@ class TreeComponent {
|
|
|
9183
9192
|
});
|
|
9184
9193
|
return result;
|
|
9185
9194
|
}
|
|
9195
|
+
addResizeObserver() {
|
|
9196
|
+
this._obs = new ResizeObserver((_) => {
|
|
9197
|
+
var _a;
|
|
9198
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9199
|
+
});
|
|
9200
|
+
this._obs.observe(this._elementRef.nativeElement);
|
|
9201
|
+
}
|
|
9202
|
+
removeResizeObserver() {
|
|
9203
|
+
this._obs.unobserve(this._elementRef.nativeElement);
|
|
9204
|
+
this._obs.disconnect();
|
|
9205
|
+
}
|
|
9186
9206
|
}
|
|
9187
|
-
TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
9188
|
-
TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "
|
|
9207
|
+
TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
9208
|
+
TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n class=\"table-body-container\"\n [itemSize]=\"height\">\n <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n [item]=\"item\"\n [style.height.px]=\"height\"\n [depth]=\"item['level']\"\n [padding]=\"padding\"\n [childNodeName]=\"childNodeName\"\n [childPadding]=\"childPadding\"\n [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n [item]=\"item\"\n [style.height.px]=\"height\"\n [depth]=\"item['level']\"\n [padding]=\"padding\"\n [childNodeName]=\"childNodeName\"\n [childPadding]=\"childPadding\"\n [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9189
9209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, decorators: [{
|
|
9190
9210
|
type: Component,
|
|
9191
9211
|
args: [{ selector: 'teta-tree', providers: [TreeService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n class=\"table-body-container\"\n [itemSize]=\"height\">\n <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n [item]=\"item\"\n [style.height.px]=\"height\"\n [depth]=\"item['level']\"\n [padding]=\"padding\"\n [childNodeName]=\"childNodeName\"\n [childPadding]=\"childPadding\"\n [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n [item]=\"item\"\n [style.height.px]=\"height\"\n [depth]=\"item['level']\"\n [padding]=\"padding\"\n [childNodeName]=\"childNodeName\"\n [childPadding]=\"childPadding\"\n [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n" }]
|
|
9192
|
-
}], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
|
|
9212
|
+
}], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
|
|
9193
9213
|
type: Input
|
|
9194
9214
|
}], padding: [{
|
|
9195
9215
|
type: Input
|
|
@@ -9205,7 +9225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9205
9225
|
type: Output
|
|
9206
9226
|
}], openItemsChange: [{
|
|
9207
9227
|
type: Output
|
|
9208
|
-
}],
|
|
9228
|
+
}], viewport: [{
|
|
9209
9229
|
type: ViewChild,
|
|
9210
9230
|
args: [CdkVirtualScrollViewport, { static: false }]
|
|
9211
9231
|
}], template: [{
|
|
@@ -10195,6 +10215,7 @@ class TableBodyComponent {
|
|
|
10195
10215
|
this._cdr = _cdr;
|
|
10196
10216
|
this.selectedRows = [];
|
|
10197
10217
|
this.tableBodyClass = true;
|
|
10218
|
+
this.scroll = new EventEmitter();
|
|
10198
10219
|
this.locked = [];
|
|
10199
10220
|
this.unlocked = [];
|
|
10200
10221
|
this.selectTypeEnum = SelectType;
|
|
@@ -10342,10 +10363,10 @@ class TableBodyComponent {
|
|
|
10342
10363
|
}
|
|
10343
10364
|
}
|
|
10344
10365
|
TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: i0.ElementRef }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10345
|
-
TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n class=\"table-body-container\"\n [itemSize]=\"28\">\n <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n</cdk-virtual-scroll-viewport>\n<div
|
|
10366
|
+
TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, outputs: { scroll: "scroll" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual && data.length > 0; else nonVirtual\"\n class=\"table-body-container\"\n (scroll)=\"scroll.emit($event)\"\n [itemSize]=\"28\">\n <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n</cdk-virtual-scroll-viewport>\n<ng-template #nonVirtual>\n <div class=\"table-body-container\" (scroll)=\"scroll.emit($event)\">\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"aggregate\">\n <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <div class=\"table-row\"\n (click)=\"setActiveRow(row, $event)\"\n [attr.data-row]=\"rowIndex\"\n [class.table-row_odd]=\"rowIndex % 2 === 1\"\n [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n <div class=\"table-row_locked\"\n *ngIf=\"locked.length > 0\"\n [style.flex-grow]=\"lockedFlex\"\n [style.flex-basis.px]=\"lockedWidth\"\n [style.min-width.px]=\"lockedWidth\"\n [style.zIndex]=\"row === activeRow ? 2 : 1\">\n <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n [row]=\"row\"\n style=\"width: 28px;\"></teta-selection-cell>\n <teta-cell\n *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-column]=\"column.name\"\n [column]=\"column\"\n [filterOptions]=\"dict?dict[column.name]:[]\"\n [dict]=\"dict\"\n [row]=\"row\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\"\n ></teta-cell>\n </div>\n <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n [row]=\"row\"\n style=\"width: 28px;\"></teta-selection-cell>\n <teta-cell\n *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-column]=\"column.name\"\n [column]=\"column\"\n [filterOptions]=\"dict?dict[column.name]:[]\"\n [dict]=\"dict\"\n [row]=\"row\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\"\n ></teta-cell>\n </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n <ng-container *ngIf=\"locale | async as loc\">\n <div class=\"table-row\"\n *ngIf=\"aggregate\"\n [class.table-row_virtual]=\"virtual\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n <div class=\"table-row_locked\"\n *ngIf=\"locked.length > 0\"\n [style.flex-grow]=\"lockedFlex\"\n [style.flex-basis.px]=\"lockedWidth\"\n [style.min-width.px]=\"lockedWidth\">\n <div class=\"cell align-center justify-content-center\"\n style=\"width: 28px;\"\n *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component aggregate-cell\"\n *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-column]=\"column.name\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\">\n <span class=\"cell-text cell-text_numeric font-title-3\">\n {{loc[getAggregateText(column)]}}:\n {{getAggregateValue(column) | tetaNumber : 2}}\n </span>\n </div>\n </div>\n <div class=\"cell align-center justify-content-center\"\n style=\"width: 28px;\"\n *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component aggregate-cell\"\n *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-column]=\"column.name\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\">\n <span class=\"cell-text cell-text_numeric font-title-3\">\n {{loc[getAggregateText(column)]}}:\n {{getAggregateValue(column) | tetaNumber : 2}}\n </span>\n </div>\n </div>\n </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n <div class=\"empty-table-row\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10346
10367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
10347
10368
|
type: Component,
|
|
10348
|
-
args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n class=\"table-body-container\"\n [itemSize]=\"28\">\n <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n</cdk-virtual-scroll-viewport>\n<div
|
|
10369
|
+
args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual && data.length > 0; else nonVirtual\"\n class=\"table-body-container\"\n (scroll)=\"scroll.emit($event)\"\n [itemSize]=\"28\">\n <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n</cdk-virtual-scroll-viewport>\n<ng-template #nonVirtual>\n <div class=\"table-body-container\" (scroll)=\"scroll.emit($event)\">\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"aggregate\">\n <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <div class=\"table-row\"\n (click)=\"setActiveRow(row, $event)\"\n [attr.data-row]=\"rowIndex\"\n [class.table-row_odd]=\"rowIndex % 2 === 1\"\n [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n <div class=\"table-row_locked\"\n *ngIf=\"locked.length > 0\"\n [style.flex-grow]=\"lockedFlex\"\n [style.flex-basis.px]=\"lockedWidth\"\n [style.min-width.px]=\"lockedWidth\"\n [style.zIndex]=\"row === activeRow ? 2 : 1\">\n <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n [row]=\"row\"\n style=\"width: 28px;\"></teta-selection-cell>\n <teta-cell\n *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-column]=\"column.name\"\n [column]=\"column\"\n [filterOptions]=\"dict?dict[column.name]:[]\"\n [dict]=\"dict\"\n [row]=\"row\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\"\n ></teta-cell>\n </div>\n <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n [row]=\"row\"\n style=\"width: 28px;\"></teta-selection-cell>\n <teta-cell\n *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-column]=\"column.name\"\n [column]=\"column\"\n [filterOptions]=\"dict?dict[column.name]:[]\"\n [dict]=\"dict\"\n [row]=\"row\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\"\n ></teta-cell>\n </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n <ng-container *ngIf=\"locale | async as loc\">\n <div class=\"table-row\"\n *ngIf=\"aggregate\"\n [class.table-row_virtual]=\"virtual\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n <div class=\"table-row_locked\"\n *ngIf=\"locked.length > 0\"\n [style.flex-grow]=\"lockedFlex\"\n [style.flex-basis.px]=\"lockedWidth\"\n [style.min-width.px]=\"lockedWidth\">\n <div class=\"cell align-center justify-content-center\"\n style=\"width: 28px;\"\n *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component aggregate-cell\"\n *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-column]=\"column.name\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\">\n <span class=\"cell-text cell-text_numeric font-title-3\">\n {{loc[getAggregateText(column)]}}:\n {{getAggregateValue(column) | tetaNumber : 2}}\n </span>\n </div>\n </div>\n <div class=\"cell align-center justify-content-center\"\n style=\"width: 28px;\"\n *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component aggregate-cell\"\n *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n [attr.data-column]=\"column.name\"\n [ngClass]=\"column.cellClass\"\n [attr.tabindex]=\"0\"\n [style.flex-grow]=\"column.flex\"\n [style.flex-basis.px]=\"column.width\">\n <span class=\"cell-text cell-text_numeric font-title-3\">\n {{loc[getAggregateText(column)]}}:\n {{getAggregateValue(column) | tetaNumber : 2}}\n </span>\n </div>\n </div>\n </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n <div class=\"empty-table-row\"\n [style.flex-grow]=\"totalFlex\"\n [style.flex-basis.px]=\"totalWidth\"\n [style.min-width.px]=\"totalWidth\">\n </div>\n</ng-template>\n" }]
|
|
10349
10370
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
|
|
10350
10371
|
type: Input
|
|
10351
10372
|
}], activeRow: [{
|
|
@@ -10370,6 +10391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
10370
10391
|
}], tableBodyClass: [{
|
|
10371
10392
|
type: HostBinding,
|
|
10372
10393
|
args: ['class.table-body']
|
|
10394
|
+
}], scroll: [{
|
|
10395
|
+
type: Output
|
|
10373
10396
|
}] } });
|
|
10374
10397
|
|
|
10375
10398
|
class TableComponent {
|
|
@@ -10411,8 +10434,8 @@ class TableComponent {
|
|
|
10411
10434
|
this.verticalAlign = VerticalAlign;
|
|
10412
10435
|
this.align = Align;
|
|
10413
10436
|
this._alive = true;
|
|
10414
|
-
this.onScroll = () => {
|
|
10415
|
-
this._headElement.scrollLeft =
|
|
10437
|
+
this.onScroll = (event) => {
|
|
10438
|
+
this._headElement.scrollLeft = event.target.scrollLeft;
|
|
10416
10439
|
};
|
|
10417
10440
|
this._svc.state
|
|
10418
10441
|
.pipe(takeWhile((_) => this._alive), filter((state) => state !== this._state))
|
|
@@ -10609,12 +10632,9 @@ class TableComponent {
|
|
|
10609
10632
|
ngAfterViewInit() {
|
|
10610
10633
|
this._headElement =
|
|
10611
10634
|
this._elementRef.nativeElement.querySelector('.table-head');
|
|
10612
|
-
this._bodyElement = this._elementRef.nativeElement.querySelector('.table-body-container');
|
|
10613
|
-
this._bodyElement.addEventListener('scroll', this.onScroll);
|
|
10614
10635
|
}
|
|
10615
10636
|
ngOnDestroy() {
|
|
10616
10637
|
this._alive = false;
|
|
10617
|
-
this._bodyElement.removeEventListener('scroll', this.onScroll);
|
|
10618
10638
|
}
|
|
10619
10639
|
ngOnChanges(changes) {
|
|
10620
10640
|
var _a;
|
|
@@ -10720,10 +10740,10 @@ class TableComponent {
|
|
|
10720
10740
|
}
|
|
10721
10741
|
}
|
|
10722
10742
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10723
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", trackRow: "trackRow", trackColumns: "trackColumns", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n <teta-table-head\n style=\"z-index: 1\"\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\"\n style=\"z-index: 0\"\n [tetaContextMenu]=\"contextMenu\"\n [verticalAlign]=\"verticalAlign.auto\"\n [align]=\"align.auto\"\n [appendToBody]=\"true\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [trackRow]=\"trackRow\"\n [trackColumns]=\"trackColumns\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"
|
|
10743
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", trackRow: "trackRow", trackColumns: "trackColumns", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n <teta-table-head\n style=\"z-index: 1\"\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\"\n style=\"z-index: 0\"\n [tetaContextMenu]=\"contextMenu\"\n [verticalAlign]=\"verticalAlign.auto\"\n [align]=\"align.auto\"\n [appendToBody]=\"true\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n (scroll)=\"onScroll($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [trackRow]=\"trackRow\"\n [trackColumns]=\"trackColumns\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\">\n <ng-content></ng-content>\n </teta-table-body>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }, { kind: "component", type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { kind: "component", type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "aggregate", "selectType", "rowClass", "trackRow", "trackColumns"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10724
10744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
10725
10745
|
type: Component,
|
|
10726
|
-
args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n <teta-table-head\n style=\"z-index: 1\"\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\"\n style=\"z-index: 0\"\n [tetaContextMenu]=\"contextMenu\"\n [verticalAlign]=\"verticalAlign.auto\"\n [align]=\"align.auto\"\n [appendToBody]=\"true\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [trackRow]=\"trackRow\"\n [trackColumns]=\"trackColumns\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"
|
|
10746
|
+
args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n <teta-table-head\n style=\"z-index: 1\"\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\"\n style=\"z-index: 0\"\n [tetaContextMenu]=\"contextMenu\"\n [verticalAlign]=\"verticalAlign.auto\"\n [align]=\"align.auto\"\n [appendToBody]=\"true\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n (scroll)=\"onScroll($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [trackRow]=\"trackRow\"\n [trackColumns]=\"trackColumns\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\">\n <ng-content></ng-content>\n </teta-table-body>\n </div>\n</div>\n" }]
|
|
10727
10747
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
|
|
10728
10748
|
type: Input
|
|
10729
10749
|
}], columns: [{
|