@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
|
@@ -1154,21 +1154,21 @@ class PositionUtil {
|
|
|
1154
1154
|
rect.minWidth = containerWidth;
|
|
1155
1155
|
}
|
|
1156
1156
|
if (verticalAlign === VerticalAlign.auto) {
|
|
1157
|
-
if (containerPosition.bottom
|
|
1158
|
-
window.innerHeight / 2) {
|
|
1159
|
-
verticalAlign = VerticalAlign.
|
|
1157
|
+
if (containerPosition.bottom + elementHeight > window.innerHeight &&
|
|
1158
|
+
containerPosition.bottom >= window.innerHeight / 2) {
|
|
1159
|
+
verticalAlign = VerticalAlign.top;
|
|
1160
1160
|
}
|
|
1161
1161
|
else {
|
|
1162
|
-
verticalAlign = VerticalAlign.
|
|
1162
|
+
verticalAlign = VerticalAlign.bottom;
|
|
1163
1163
|
}
|
|
1164
1164
|
}
|
|
1165
1165
|
if (verticalAlign === VerticalAlign.innerAuto) {
|
|
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.innerTop;
|
|
1169
1169
|
}
|
|
1170
1170
|
else {
|
|
1171
|
-
verticalAlign = VerticalAlign.
|
|
1171
|
+
verticalAlign = VerticalAlign.innerBottom;
|
|
1172
1172
|
}
|
|
1173
1173
|
}
|
|
1174
1174
|
if (verticalAlign === VerticalAlign.top) {
|
|
@@ -1416,6 +1416,7 @@ class DropdownBase {
|
|
|
1416
1416
|
}
|
|
1417
1417
|
setPosition(container, target) {
|
|
1418
1418
|
const containerPosition = container.getBoundingClientRect();
|
|
1419
|
+
// target.style.maxHeight = null;
|
|
1419
1420
|
const targetPosition = target.getBoundingClientRect();
|
|
1420
1421
|
const rect = {
|
|
1421
1422
|
bottom: containerPosition.bottom,
|
|
@@ -8359,13 +8360,13 @@ class TableUtil {
|
|
|
8359
8360
|
static filterNumber(data, filter) {
|
|
8360
8361
|
const filterNumber = (row) => {
|
|
8361
8362
|
const item = row;
|
|
8362
|
-
return (filter.value.lessThan === null || filter.value.lessThan === undefined
|
|
8363
|
+
return (filter.value.lessThan === null || filter.value.lessThan === undefined || filter.value.lessThan?.toString() === ''
|
|
8363
8364
|
? true
|
|
8364
8365
|
: filter.value.lessThan >= item[filter.field]) &&
|
|
8365
|
-
(filter.value.greaterThan === null || filter.value.greaterThan === undefined
|
|
8366
|
+
(filter.value.greaterThan === null || filter.value.greaterThan === undefined || filter.value.greaterThan?.toString() === ''
|
|
8366
8367
|
? true
|
|
8367
8368
|
: filter.value.greaterThan <= item[filter.field]) &&
|
|
8368
|
-
(filter.value.equalsTo === null || filter.value.equalsTo === undefined
|
|
8369
|
+
(filter.value.equalsTo === null || filter.value.equalsTo === undefined || filter.value.equalsTo?.toString() === ''
|
|
8369
8370
|
? true
|
|
8370
8371
|
: filter.value.equalsTo === item[filter.field]);
|
|
8371
8372
|
};
|
|
@@ -9026,8 +9027,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9026
9027
|
}] } });
|
|
9027
9028
|
|
|
9028
9029
|
class TreeComponent {
|
|
9029
|
-
constructor(_service, _cdr, _zone) {
|
|
9030
|
+
constructor(_service, _elementRef, _cdr, _zone) {
|
|
9030
9031
|
this._service = _service;
|
|
9032
|
+
this._elementRef = _elementRef;
|
|
9031
9033
|
this._cdr = _cdr;
|
|
9032
9034
|
this._zone = _zone;
|
|
9033
9035
|
this.padding = 8;
|
|
@@ -9049,6 +9051,7 @@ class TreeComponent {
|
|
|
9049
9051
|
this._openItems = _;
|
|
9050
9052
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9051
9053
|
this.openItemsChange.emit(_);
|
|
9054
|
+
this.viewport?.checkViewportSize();
|
|
9052
9055
|
});
|
|
9053
9056
|
}
|
|
9054
9057
|
set data(data) {
|
|
@@ -9069,19 +9072,22 @@ class TreeComponent {
|
|
|
9069
9072
|
}
|
|
9070
9073
|
ngOnInit() {
|
|
9071
9074
|
this.service.emit(this._service);
|
|
9075
|
+
this.addResizeObserver();
|
|
9072
9076
|
}
|
|
9073
9077
|
ngOnChanges(changes) {
|
|
9074
9078
|
this.displayData = this.getDisplayData(this._data, 0);
|
|
9075
9079
|
this.childPadding = this.hasChildren(this._data);
|
|
9080
|
+
this.viewport?.checkViewportSize();
|
|
9076
9081
|
}
|
|
9077
9082
|
ngOnDestroy() {
|
|
9078
9083
|
this._alive = false;
|
|
9084
|
+
this.removeResizeObserver();
|
|
9079
9085
|
}
|
|
9080
9086
|
ngAfterViewInit() {
|
|
9081
9087
|
this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
|
|
9082
9088
|
this._zone.runOutsideAngular(() => {
|
|
9083
9089
|
setTimeout(() => {
|
|
9084
|
-
this.
|
|
9090
|
+
this.viewport?.scrollToIndex(index, 'smooth');
|
|
9085
9091
|
});
|
|
9086
9092
|
});
|
|
9087
9093
|
});
|
|
@@ -9101,13 +9107,23 @@ class TreeComponent {
|
|
|
9101
9107
|
});
|
|
9102
9108
|
return result;
|
|
9103
9109
|
}
|
|
9110
|
+
addResizeObserver() {
|
|
9111
|
+
this._obs = new ResizeObserver((_) => {
|
|
9112
|
+
this.viewport?.checkViewportSize();
|
|
9113
|
+
});
|
|
9114
|
+
this._obs.observe(this._elementRef.nativeElement);
|
|
9115
|
+
}
|
|
9116
|
+
removeResizeObserver() {
|
|
9117
|
+
this._obs.unobserve(this._elementRef.nativeElement);
|
|
9118
|
+
this._obs.disconnect();
|
|
9119
|
+
}
|
|
9104
9120
|
}
|
|
9105
|
-
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 });
|
|
9106
|
-
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: "
|
|
9121
|
+
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 });
|
|
9122
|
+
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 });
|
|
9107
9123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, decorators: [{
|
|
9108
9124
|
type: Component,
|
|
9109
9125
|
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" }]
|
|
9110
|
-
}], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
|
|
9126
|
+
}], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
|
|
9111
9127
|
type: Input
|
|
9112
9128
|
}], padding: [{
|
|
9113
9129
|
type: Input
|
|
@@ -9123,7 +9139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9123
9139
|
type: Output
|
|
9124
9140
|
}], openItemsChange: [{
|
|
9125
9141
|
type: Output
|
|
9126
|
-
}],
|
|
9142
|
+
}], viewport: [{
|
|
9127
9143
|
type: ViewChild,
|
|
9128
9144
|
args: [CdkVirtualScrollViewport, { static: false }]
|
|
9129
9145
|
}], template: [{
|
|
@@ -10102,6 +10118,7 @@ class TableBodyComponent {
|
|
|
10102
10118
|
this._cdr = _cdr;
|
|
10103
10119
|
this.selectedRows = [];
|
|
10104
10120
|
this.tableBodyClass = true;
|
|
10121
|
+
this.scroll = new EventEmitter();
|
|
10105
10122
|
this.locked = [];
|
|
10106
10123
|
this.unlocked = [];
|
|
10107
10124
|
this.selectTypeEnum = SelectType;
|
|
@@ -10243,10 +10260,10 @@ class TableBodyComponent {
|
|
|
10243
10260
|
}
|
|
10244
10261
|
}
|
|
10245
10262
|
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 });
|
|
10246
|
-
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
|
|
10263
|
+
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 });
|
|
10247
10264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
10248
10265
|
type: Component,
|
|
10249
|
-
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
|
|
10266
|
+
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" }]
|
|
10250
10267
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
|
|
10251
10268
|
type: Input
|
|
10252
10269
|
}], activeRow: [{
|
|
@@ -10271,6 +10288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
10271
10288
|
}], tableBodyClass: [{
|
|
10272
10289
|
type: HostBinding,
|
|
10273
10290
|
args: ['class.table-body']
|
|
10291
|
+
}], scroll: [{
|
|
10292
|
+
type: Output
|
|
10274
10293
|
}] } });
|
|
10275
10294
|
|
|
10276
10295
|
class TableComponent {
|
|
@@ -10312,8 +10331,8 @@ class TableComponent {
|
|
|
10312
10331
|
this.verticalAlign = VerticalAlign;
|
|
10313
10332
|
this.align = Align;
|
|
10314
10333
|
this._alive = true;
|
|
10315
|
-
this.onScroll = () => {
|
|
10316
|
-
this._headElement.scrollLeft =
|
|
10334
|
+
this.onScroll = (event) => {
|
|
10335
|
+
this._headElement.scrollLeft = event.target.scrollLeft;
|
|
10317
10336
|
};
|
|
10318
10337
|
this._svc.state
|
|
10319
10338
|
.pipe(takeWhile((_) => this._alive), filter((state) => state !== this._state))
|
|
@@ -10522,12 +10541,9 @@ class TableComponent {
|
|
|
10522
10541
|
ngAfterViewInit() {
|
|
10523
10542
|
this._headElement =
|
|
10524
10543
|
this._elementRef.nativeElement.querySelector('.table-head');
|
|
10525
|
-
this._bodyElement = this._elementRef.nativeElement.querySelector('.table-body-container');
|
|
10526
|
-
this._bodyElement.addEventListener('scroll', this.onScroll);
|
|
10527
10544
|
}
|
|
10528
10545
|
ngOnDestroy() {
|
|
10529
10546
|
this._alive = false;
|
|
10530
|
-
this._bodyElement.removeEventListener('scroll', this.onScroll);
|
|
10531
10547
|
}
|
|
10532
10548
|
ngOnChanges(changes) {
|
|
10533
10549
|
if (changes.hasOwnProperty('editType')) {
|
|
@@ -10631,10 +10647,10 @@ class TableComponent {
|
|
|
10631
10647
|
}
|
|
10632
10648
|
}
|
|
10633
10649
|
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 });
|
|
10634
|
-
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\"
|
|
10650
|
+
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 });
|
|
10635
10651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
10636
10652
|
type: Component,
|
|
10637
|
-
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\"
|
|
10653
|
+
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" }]
|
|
10638
10654
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
|
|
10639
10655
|
type: Input
|
|
10640
10656
|
}], columns: [{
|