@tetacom/ng-components 1.0.146 → 1.0.147
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/tree/tree/tree.component.mjs +22 -7
- package/fesm2015/tetacom-ng-components.mjs +42 -23
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +39 -23
- 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,
|
|
@@ -9106,8 +9107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9106
9107
|
}] } });
|
|
9107
9108
|
|
|
9108
9109
|
class TreeComponent {
|
|
9109
|
-
constructor(_service, _cdr, _zone) {
|
|
9110
|
+
constructor(_service, _elementRef, _cdr, _zone) {
|
|
9110
9111
|
this._service = _service;
|
|
9112
|
+
this._elementRef = _elementRef;
|
|
9111
9113
|
this._cdr = _cdr;
|
|
9112
9114
|
this._zone = _zone;
|
|
9113
9115
|
this.padding = 8;
|
|
@@ -9126,9 +9128,11 @@ class TreeComponent {
|
|
|
9126
9128
|
this._service.openItems
|
|
9127
9129
|
.pipe(takeWhile((_) => this._alive), filter((_) => this._openItems !== _))
|
|
9128
9130
|
.subscribe((_) => {
|
|
9131
|
+
var _a;
|
|
9129
9132
|
this._openItems = _;
|
|
9130
9133
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9131
9134
|
this.openItemsChange.emit(_);
|
|
9135
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9132
9136
|
});
|
|
9133
9137
|
}
|
|
9134
9138
|
set data(data) {
|
|
@@ -9149,20 +9153,24 @@ class TreeComponent {
|
|
|
9149
9153
|
}
|
|
9150
9154
|
ngOnInit() {
|
|
9151
9155
|
this.service.emit(this._service);
|
|
9156
|
+
this.addResizeObserver();
|
|
9152
9157
|
}
|
|
9153
9158
|
ngOnChanges(changes) {
|
|
9159
|
+
var _a;
|
|
9154
9160
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9155
9161
|
this.childPadding = this.hasChildren(this._data);
|
|
9162
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9156
9163
|
}
|
|
9157
9164
|
ngOnDestroy() {
|
|
9158
9165
|
this._alive = false;
|
|
9166
|
+
this.removeResizeObserver();
|
|
9159
9167
|
}
|
|
9160
9168
|
ngAfterViewInit() {
|
|
9161
9169
|
this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
|
|
9162
9170
|
this._zone.runOutsideAngular(() => {
|
|
9163
9171
|
setTimeout(() => {
|
|
9164
9172
|
var _a;
|
|
9165
|
-
(_a = this.
|
|
9173
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, 'smooth');
|
|
9166
9174
|
});
|
|
9167
9175
|
});
|
|
9168
9176
|
});
|
|
@@ -9183,13 +9191,24 @@ class TreeComponent {
|
|
|
9183
9191
|
});
|
|
9184
9192
|
return result;
|
|
9185
9193
|
}
|
|
9194
|
+
addResizeObserver() {
|
|
9195
|
+
this._obs = new ResizeObserver((_) => {
|
|
9196
|
+
var _a;
|
|
9197
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
|
|
9198
|
+
});
|
|
9199
|
+
this._obs.observe(this._elementRef.nativeElement);
|
|
9200
|
+
}
|
|
9201
|
+
removeResizeObserver() {
|
|
9202
|
+
this._obs.unobserve(this._elementRef.nativeElement);
|
|
9203
|
+
this._obs.disconnect();
|
|
9204
|
+
}
|
|
9186
9205
|
}
|
|
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: "
|
|
9206
|
+
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 });
|
|
9207
|
+
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
9208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, decorators: [{
|
|
9190
9209
|
type: Component,
|
|
9191
9210
|
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: [{
|
|
9211
|
+
}], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
|
|
9193
9212
|
type: Input
|
|
9194
9213
|
}], padding: [{
|
|
9195
9214
|
type: Input
|
|
@@ -9205,7 +9224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9205
9224
|
type: Output
|
|
9206
9225
|
}], openItemsChange: [{
|
|
9207
9226
|
type: Output
|
|
9208
|
-
}],
|
|
9227
|
+
}], viewport: [{
|
|
9209
9228
|
type: ViewChild,
|
|
9210
9229
|
args: [CdkVirtualScrollViewport, { static: false }]
|
|
9211
9230
|
}], template: [{
|
|
@@ -10195,6 +10214,7 @@ class TableBodyComponent {
|
|
|
10195
10214
|
this._cdr = _cdr;
|
|
10196
10215
|
this.selectedRows = [];
|
|
10197
10216
|
this.tableBodyClass = true;
|
|
10217
|
+
this.scroll = new EventEmitter();
|
|
10198
10218
|
this.locked = [];
|
|
10199
10219
|
this.unlocked = [];
|
|
10200
10220
|
this.selectTypeEnum = SelectType;
|
|
@@ -10342,10 +10362,10 @@ class TableBodyComponent {
|
|
|
10342
10362
|
}
|
|
10343
10363
|
}
|
|
10344
10364
|
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
|
|
10365
|
+
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
10366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
10347
10367
|
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
|
|
10368
|
+
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
10369
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
|
|
10350
10370
|
type: Input
|
|
10351
10371
|
}], activeRow: [{
|
|
@@ -10370,6 +10390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
10370
10390
|
}], tableBodyClass: [{
|
|
10371
10391
|
type: HostBinding,
|
|
10372
10392
|
args: ['class.table-body']
|
|
10393
|
+
}], scroll: [{
|
|
10394
|
+
type: Output
|
|
10373
10395
|
}] } });
|
|
10374
10396
|
|
|
10375
10397
|
class TableComponent {
|
|
@@ -10411,8 +10433,8 @@ class TableComponent {
|
|
|
10411
10433
|
this.verticalAlign = VerticalAlign;
|
|
10412
10434
|
this.align = Align;
|
|
10413
10435
|
this._alive = true;
|
|
10414
|
-
this.onScroll = () => {
|
|
10415
|
-
this._headElement.scrollLeft =
|
|
10436
|
+
this.onScroll = (event) => {
|
|
10437
|
+
this._headElement.scrollLeft = event.target.scrollLeft;
|
|
10416
10438
|
};
|
|
10417
10439
|
this._svc.state
|
|
10418
10440
|
.pipe(takeWhile((_) => this._alive), filter((state) => state !== this._state))
|
|
@@ -10609,12 +10631,9 @@ class TableComponent {
|
|
|
10609
10631
|
ngAfterViewInit() {
|
|
10610
10632
|
this._headElement =
|
|
10611
10633
|
this._elementRef.nativeElement.querySelector('.table-head');
|
|
10612
|
-
this._bodyElement = this._elementRef.nativeElement.querySelector('.table-body-container');
|
|
10613
|
-
this._bodyElement.addEventListener('scroll', this.onScroll);
|
|
10614
10634
|
}
|
|
10615
10635
|
ngOnDestroy() {
|
|
10616
10636
|
this._alive = false;
|
|
10617
|
-
this._bodyElement.removeEventListener('scroll', this.onScroll);
|
|
10618
10637
|
}
|
|
10619
10638
|
ngOnChanges(changes) {
|
|
10620
10639
|
var _a;
|
|
@@ -10720,10 +10739,10 @@ class TableComponent {
|
|
|
10720
10739
|
}
|
|
10721
10740
|
}
|
|
10722
10741
|
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\"
|
|
10742
|
+
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
10743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
10725
10744
|
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\"
|
|
10745
|
+
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
10746
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
|
|
10728
10747
|
type: Input
|
|
10729
10748
|
}], columns: [{
|