@tetacom/ng-components 1.0.50 → 1.0.53
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/default/numeric-cell/numeric-cell.component.d.ts +1 -0
- package/component/table/service/table.service.d.ts +2 -0
- package/component/table/table/table.component.d.ts +2 -2
- package/component/table/table-body/table-body.component.d.ts +1 -1
- package/esm2020/common/util/position-util.mjs +7 -1
- package/esm2020/component/table/default/numeric-cell/numeric-cell.component.mjs +6 -3
- package/esm2020/component/table/service/table.service.mjs +11 -1
- package/esm2020/component/table/table/table.component.mjs +28 -23
- package/esm2020/component/table/table-body/table-body.component.mjs +7 -16
- package/esm2020/directive/context-menu/context-menu.directive.mjs +1 -1
- package/esm2020/directive/only-number/only-number.directive.mjs +2 -2
- package/fesm2015/tetacom-ng-components.mjs +56 -42
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +55 -41
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/presets/color-presets.scss +30 -30
- package/style/table.scss +2 -2
|
@@ -1067,6 +1067,12 @@ class PositionUtil {
|
|
|
1067
1067
|
const elementHeight = elementPosition.bottom - elementPosition.top;
|
|
1068
1068
|
const containerWidth = containerPosition.right - containerPosition.left;
|
|
1069
1069
|
const containerHeight = containerPosition.bottom - containerPosition.top;
|
|
1070
|
+
if (align === Align.auto) {
|
|
1071
|
+
align = Align.left;
|
|
1072
|
+
if (window.innerWidth < containerPosition.left + elementWidth) {
|
|
1073
|
+
align = Align.right;
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1070
1076
|
if (align === Align.left) {
|
|
1071
1077
|
rect.left = containerPosition.left + margin;
|
|
1072
1078
|
}
|
|
@@ -2837,7 +2843,7 @@ class OnlyNumberDirective {
|
|
|
2837
2843
|
value = '0.0';
|
|
2838
2844
|
}
|
|
2839
2845
|
const valid = new RegExp(regex).test(value.toString());
|
|
2840
|
-
this._control.control.setValue(valid ? value : this._previousValue ?? 0);
|
|
2846
|
+
this._control.control.setValue(valid ? parseFloat(value) : parseFloat(this._previousValue) ?? 0);
|
|
2841
2847
|
}
|
|
2842
2848
|
}
|
|
2843
2849
|
OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }, { token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -7592,6 +7598,16 @@ class TableService {
|
|
|
7592
7598
|
getRowIndex(row) {
|
|
7593
7599
|
return this._displayData.value.indexOf(row);
|
|
7594
7600
|
}
|
|
7601
|
+
getEventCell(event) {
|
|
7602
|
+
return event.composedPath().find((target) => {
|
|
7603
|
+
return target.tagName?.toLowerCase() === 'teta-cell';
|
|
7604
|
+
});
|
|
7605
|
+
}
|
|
7606
|
+
getEventRow(event) {
|
|
7607
|
+
return event.composedPath().find((target) => {
|
|
7608
|
+
return target?.getAttribute && target?.getAttribute('data-row');
|
|
7609
|
+
});
|
|
7610
|
+
}
|
|
7595
7611
|
getNextEditableCell(coords) {
|
|
7596
7612
|
const nextCell = this.getNextCell(coords);
|
|
7597
7613
|
if (!nextCell) {
|
|
@@ -9284,6 +9300,9 @@ class NumericCellComponent extends CellComponentBase {
|
|
|
9284
9300
|
this.svc = svc;
|
|
9285
9301
|
this.cdr = cdr;
|
|
9286
9302
|
}
|
|
9303
|
+
applyValue(value) {
|
|
9304
|
+
this.row[this.column.name] = parseFloat(value);
|
|
9305
|
+
}
|
|
9287
9306
|
setValue() {
|
|
9288
9307
|
this.valueChanged();
|
|
9289
9308
|
}
|
|
@@ -9308,10 +9327,10 @@ class NumericCellComponent extends CellComponentBase {
|
|
|
9308
9327
|
}
|
|
9309
9328
|
}
|
|
9310
9329
|
NumericCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9311
|
-
NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n class=\"cell-text\"\n [class.cell-text_disabled]=\"!editable\">\n {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n *ngIf=\"edit\"\n tetaOnlyNumber\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (blur)=\"setValue()\"\n [ngModel]=\"row[column.name]\"\n (ngModelChange)=\"
|
|
9330
|
+
NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n class=\"cell-text\"\n [class.cell-text_disabled]=\"!editable\">\n {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n *ngIf=\"edit\"\n tetaOnlyNumber\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (blur)=\"setValue()\"\n [ngModel]=\"row[column.name]\"\n (ngModelChange)=\"applyValue($event)\"/>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9312
9331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericCellComponent, decorators: [{
|
|
9313
9332
|
type: Component,
|
|
9314
|
-
args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n class=\"cell-text\"\n [class.cell-text_disabled]=\"!editable\">\n {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n *ngIf=\"edit\"\n tetaOnlyNumber\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (blur)=\"setValue()\"\n [ngModel]=\"row[column.name]\"\n (ngModelChange)=\"
|
|
9333
|
+
args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n class=\"cell-text\"\n [class.cell-text_disabled]=\"!editable\">\n {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n *ngIf=\"edit\"\n tetaOnlyNumber\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (blur)=\"setValue()\"\n [ngModel]=\"row[column.name]\"\n (ngModelChange)=\"applyValue($event)\"/>\n" }]
|
|
9315
9334
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
|
|
9316
9335
|
type: Input
|
|
9317
9336
|
}], row: [{
|
|
@@ -9672,20 +9691,11 @@ class TableBodyComponent {
|
|
|
9672
9691
|
get columns() {
|
|
9673
9692
|
return this._columns;
|
|
9674
9693
|
}
|
|
9675
|
-
setActiveRow(row) {
|
|
9676
|
-
|
|
9677
|
-
|
|
9678
|
-
|
|
9679
|
-
|
|
9680
|
-
// if (this.data?.length > 0) {
|
|
9681
|
-
// const start = Math.max(0, index);
|
|
9682
|
-
// const end = Math.min(index + count - 1, this.data.length - 1);
|
|
9683
|
-
// for (let i = start; i <= end; i++) {
|
|
9684
|
-
// data.push(this.data[i]);
|
|
9685
|
-
// }
|
|
9686
|
-
// }
|
|
9687
|
-
// return success(data);
|
|
9688
|
-
// };
|
|
9694
|
+
setActiveRow(row, event) {
|
|
9695
|
+
if (!event.shiftKey && !event.ctrlKey) {
|
|
9696
|
+
this._svc.setActiveRow(row);
|
|
9697
|
+
}
|
|
9698
|
+
}
|
|
9689
9699
|
ngOnInit() {
|
|
9690
9700
|
this.locale = this._config.locale;
|
|
9691
9701
|
combineLatest([this._svc.columns, this._svc.hiddenColumns])
|
|
@@ -9783,10 +9793,10 @@ class TableBodyComponent {
|
|
|
9783
9793
|
}
|
|
9784
9794
|
}
|
|
9785
9795
|
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 });
|
|
9786
|
-
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" }, 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 *ngIf=\"!virtual\"\n class=\"table-body-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\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <div class=\"table-row\"\n (click)=\"setActiveRow(row)\"\n
|
|
9796
|
+
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" }, 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 *ngIf=\"!virtual\"\n class=\"table-body-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\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 ? 1 : 'unset'\">\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]=\"virtual ? totalFlex : ''\"\n [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n [style.min-width.px]=\"virtual ? 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 <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component justify-content-end\"\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 justify-content-end\"\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", 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: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.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 });
|
|
9787
9797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
9788
9798
|
type: Component,
|
|
9789
|
-
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 *ngIf=\"!virtual\"\n class=\"table-body-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\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <div class=\"table-row\"\n (click)=\"setActiveRow(row)\"\n
|
|
9799
|
+
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 *ngIf=\"!virtual\"\n class=\"table-body-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\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 ? 1 : 'unset'\">\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]=\"virtual ? totalFlex : ''\"\n [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n [style.min-width.px]=\"virtual ? 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 <teta-icon [name]=\"'sumColor'\"></teta-icon>\n </div>\n <div class=\"cell cell-component justify-content-end\"\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 justify-content-end\"\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" }]
|
|
9790
9800
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
|
|
9791
9801
|
type: Input
|
|
9792
9802
|
}], activeRow: [{
|
|
@@ -9944,9 +9954,11 @@ class TableComponent {
|
|
|
9944
9954
|
}
|
|
9945
9955
|
}
|
|
9946
9956
|
keydown(event) {
|
|
9947
|
-
if (event.ctrlKey
|
|
9948
|
-
event.
|
|
9949
|
-
|
|
9957
|
+
if (event.ctrlKey) {
|
|
9958
|
+
if (event.code === 'KeyA') {
|
|
9959
|
+
event.preventDefault();
|
|
9960
|
+
this._svc.selectAll();
|
|
9961
|
+
}
|
|
9950
9962
|
return;
|
|
9951
9963
|
}
|
|
9952
9964
|
if (event.key === 'Escape') {
|
|
@@ -9985,11 +9997,14 @@ class TableComponent {
|
|
|
9985
9997
|
event
|
|
9986
9998
|
});
|
|
9987
9999
|
if (event.key && (event.key.length === 1 || event.key === 'Delete')) {
|
|
9988
|
-
this.
|
|
9989
|
-
|
|
9990
|
-
|
|
9991
|
-
|
|
9992
|
-
|
|
10000
|
+
const column = this._svc.getColumnByName(coordinates.column);
|
|
10001
|
+
if (column.filterType !== FilterType.number || isFinite(event.key)) {
|
|
10002
|
+
this.startEditRowOrCell({
|
|
10003
|
+
row: coordinates.row,
|
|
10004
|
+
column: coordinates.column,
|
|
10005
|
+
event: event
|
|
10006
|
+
});
|
|
10007
|
+
}
|
|
9993
10008
|
}
|
|
9994
10009
|
if (event.key === 'Tab' && this._svc.currentEditCell) {
|
|
9995
10010
|
event.preventDefault();
|
|
@@ -10089,6 +10104,15 @@ class TableComponent {
|
|
|
10089
10104
|
this.contextMenuOpen = value;
|
|
10090
10105
|
this.contextMenuOpenChange.emit(this.contextMenuOpen);
|
|
10091
10106
|
}
|
|
10107
|
+
setContextMenuRow(event) {
|
|
10108
|
+
const rowElement = this._svc.getEventRow(event);
|
|
10109
|
+
if (rowElement) {
|
|
10110
|
+
const rowIndex = parseInt(rowElement.getAttribute('data-row'), 10);
|
|
10111
|
+
if (rowIndex >= 0) {
|
|
10112
|
+
this.contextMenuRow = this._svc.getRowByIndex(rowIndex);
|
|
10113
|
+
}
|
|
10114
|
+
}
|
|
10115
|
+
}
|
|
10092
10116
|
startEditRowOrCell(coordinates) {
|
|
10093
10117
|
if (this.editType === EditType.row) {
|
|
10094
10118
|
this._svc.startEditRow(coordinates);
|
|
@@ -10097,16 +10121,6 @@ class TableComponent {
|
|
|
10097
10121
|
this._svc.startEditCell(coordinates);
|
|
10098
10122
|
}
|
|
10099
10123
|
}
|
|
10100
|
-
getEventCell(event) {
|
|
10101
|
-
return event.composedPath().find((target) => {
|
|
10102
|
-
return target.tagName?.toLowerCase() === 'teta-cell';
|
|
10103
|
-
});
|
|
10104
|
-
}
|
|
10105
|
-
getEventRow(event) {
|
|
10106
|
-
return event.composedPath().find((target) => {
|
|
10107
|
-
return target?.getAttribute && target?.getAttribute('data-row');
|
|
10108
|
-
});
|
|
10109
|
-
}
|
|
10110
10124
|
getCellElement(coordinates) {
|
|
10111
10125
|
return this._elementRef.nativeElement.querySelector(`teta-cell[data-row="${coordinates.row}"][data-column="${coordinates.column}"]`);
|
|
10112
10126
|
}
|
|
@@ -10120,7 +10134,7 @@ class TableComponent {
|
|
|
10120
10134
|
if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
|
|
10121
10135
|
return null;
|
|
10122
10136
|
}
|
|
10123
|
-
const cell = this.getEventCell(event);
|
|
10137
|
+
const cell = this._svc.getEventCell(event);
|
|
10124
10138
|
if (cell) {
|
|
10125
10139
|
const rowIndex = parseInt(cell.getAttribute('data-row'), 10);
|
|
10126
10140
|
const columnName = cell.getAttribute('data-column');
|
|
@@ -10138,7 +10152,7 @@ class TableComponent {
|
|
|
10138
10152
|
if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
|
|
10139
10153
|
return null;
|
|
10140
10154
|
}
|
|
10141
|
-
const rowElement = this.getEventRow(event);
|
|
10155
|
+
const rowElement = this._svc.getEventRow(event);
|
|
10142
10156
|
if (rowElement) {
|
|
10143
10157
|
const rowIndex = parseInt(rowElement.getAttribute('data-row'), 10);
|
|
10144
10158
|
if (rowIndex >= 0) {
|
|
@@ -10149,10 +10163,10 @@ class TableComponent {
|
|
|
10149
10163
|
}
|
|
10150
10164
|
}
|
|
10151
10165
|
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 });
|
|
10152
|
-
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", 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 [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\">\n <teta-table-body\n [tetaContextMenu]=\"contextMenu\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"></teta-table-body>\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10166
|
+
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", 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 [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n [tetaContextMenu]=\"contextMenu\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"></teta-table-body>\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10153
10167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
10154
10168
|
type: Component,
|
|
10155
|
-
args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n <teta-table-head\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\">\n <teta-table-body\n [tetaContextMenu]=\"contextMenu\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"></teta-table-body>\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n" }]
|
|
10169
|
+
args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n <teta-table-head\n [selectType]=\"selectType\"\n [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n <div class=\"column column_auto position-relative\">\n <teta-table-body\n (contextmenu)=\"setContextMenuRow($event)\"\n [tetaContextMenu]=\"contextMenu\"\n [data]=\"contextMenuRow\"\n [open]=\"contextMenuOpen\"\n (openChange)=\"setContextMenuOpen($event)\"\n [aggregate]=\"aggregate\"\n [virtual]=\"virtual\"\n [activeRow]=\"activeRow\"\n [selectedRows]=\"selectedRowsList\"\n [additionalComponent]=\"detailComponent\"\n [selectType]=\"selectType\"\n [rowClass]=\"rowClass\"></teta-table-body>\n <div class=\"column column_auto\"\n style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n *ngIf=\"!data?.length\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n" }]
|
|
10156
10170
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
|
|
10157
10171
|
type: Input
|
|
10158
10172
|
}], columns: [{
|