@tetacom/ng-components 1.0.52 → 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/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 +50 -42
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +49 -41
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/table.scss +1 -1
|
@@ -2843,7 +2843,7 @@ class OnlyNumberDirective {
|
|
|
2843
2843
|
value = '0.0';
|
|
2844
2844
|
}
|
|
2845
2845
|
const valid = new RegExp(regex).test(value.toString());
|
|
2846
|
-
this._control.control.setValue(valid ? value : this._previousValue ?? 0);
|
|
2846
|
+
this._control.control.setValue(valid ? parseFloat(value) : parseFloat(this._previousValue) ?? 0);
|
|
2847
2847
|
}
|
|
2848
2848
|
}
|
|
2849
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 });
|
|
@@ -7598,6 +7598,16 @@ class TableService {
|
|
|
7598
7598
|
getRowIndex(row) {
|
|
7599
7599
|
return this._displayData.value.indexOf(row);
|
|
7600
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
|
+
}
|
|
7601
7611
|
getNextEditableCell(coords) {
|
|
7602
7612
|
const nextCell = this.getNextCell(coords);
|
|
7603
7613
|
if (!nextCell) {
|
|
@@ -9290,6 +9300,9 @@ class NumericCellComponent extends CellComponentBase {
|
|
|
9290
9300
|
this.svc = svc;
|
|
9291
9301
|
this.cdr = cdr;
|
|
9292
9302
|
}
|
|
9303
|
+
applyValue(value) {
|
|
9304
|
+
this.row[this.column.name] = parseFloat(value);
|
|
9305
|
+
}
|
|
9293
9306
|
setValue() {
|
|
9294
9307
|
this.valueChanged();
|
|
9295
9308
|
}
|
|
@@ -9314,10 +9327,10 @@ class NumericCellComponent extends CellComponentBase {
|
|
|
9314
9327
|
}
|
|
9315
9328
|
}
|
|
9316
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 });
|
|
9317
|
-
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 });
|
|
9318
9331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericCellComponent, decorators: [{
|
|
9319
9332
|
type: Component,
|
|
9320
|
-
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" }]
|
|
9321
9334
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
|
|
9322
9335
|
type: Input
|
|
9323
9336
|
}], row: [{
|
|
@@ -9678,20 +9691,11 @@ class TableBodyComponent {
|
|
|
9678
9691
|
get columns() {
|
|
9679
9692
|
return this._columns;
|
|
9680
9693
|
}
|
|
9681
|
-
setActiveRow(row) {
|
|
9682
|
-
|
|
9683
|
-
|
|
9684
|
-
|
|
9685
|
-
|
|
9686
|
-
// if (this.data?.length > 0) {
|
|
9687
|
-
// const start = Math.max(0, index);
|
|
9688
|
-
// const end = Math.min(index + count - 1, this.data.length - 1);
|
|
9689
|
-
// for (let i = start; i <= end; i++) {
|
|
9690
|
-
// data.push(this.data[i]);
|
|
9691
|
-
// }
|
|
9692
|
-
// }
|
|
9693
|
-
// return success(data);
|
|
9694
|
-
// };
|
|
9694
|
+
setActiveRow(row, event) {
|
|
9695
|
+
if (!event.shiftKey && !event.ctrlKey) {
|
|
9696
|
+
this._svc.setActiveRow(row);
|
|
9697
|
+
}
|
|
9698
|
+
}
|
|
9695
9699
|
ngOnInit() {
|
|
9696
9700
|
this.locale = this._config.locale;
|
|
9697
9701
|
combineLatest([this._svc.columns, this._svc.hiddenColumns])
|
|
@@ -9789,10 +9793,10 @@ class TableBodyComponent {
|
|
|
9789
9793
|
}
|
|
9790
9794
|
}
|
|
9791
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 });
|
|
9792
|
-
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 });
|
|
9793
9797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
9794
9798
|
type: Component,
|
|
9795
|
-
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" }]
|
|
9796
9800
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
|
|
9797
9801
|
type: Input
|
|
9798
9802
|
}], activeRow: [{
|
|
@@ -9950,9 +9954,11 @@ class TableComponent {
|
|
|
9950
9954
|
}
|
|
9951
9955
|
}
|
|
9952
9956
|
keydown(event) {
|
|
9953
|
-
if (event.ctrlKey
|
|
9954
|
-
event.
|
|
9955
|
-
|
|
9957
|
+
if (event.ctrlKey) {
|
|
9958
|
+
if (event.code === 'KeyA') {
|
|
9959
|
+
event.preventDefault();
|
|
9960
|
+
this._svc.selectAll();
|
|
9961
|
+
}
|
|
9956
9962
|
return;
|
|
9957
9963
|
}
|
|
9958
9964
|
if (event.key === 'Escape') {
|
|
@@ -9991,11 +9997,14 @@ class TableComponent {
|
|
|
9991
9997
|
event
|
|
9992
9998
|
});
|
|
9993
9999
|
if (event.key && (event.key.length === 1 || event.key === 'Delete')) {
|
|
9994
|
-
this.
|
|
9995
|
-
|
|
9996
|
-
|
|
9997
|
-
|
|
9998
|
-
|
|
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
|
+
}
|
|
9999
10008
|
}
|
|
10000
10009
|
if (event.key === 'Tab' && this._svc.currentEditCell) {
|
|
10001
10010
|
event.preventDefault();
|
|
@@ -10095,6 +10104,15 @@ class TableComponent {
|
|
|
10095
10104
|
this.contextMenuOpen = value;
|
|
10096
10105
|
this.contextMenuOpenChange.emit(this.contextMenuOpen);
|
|
10097
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
|
+
}
|
|
10098
10116
|
startEditRowOrCell(coordinates) {
|
|
10099
10117
|
if (this.editType === EditType.row) {
|
|
10100
10118
|
this._svc.startEditRow(coordinates);
|
|
@@ -10103,16 +10121,6 @@ class TableComponent {
|
|
|
10103
10121
|
this._svc.startEditCell(coordinates);
|
|
10104
10122
|
}
|
|
10105
10123
|
}
|
|
10106
|
-
getEventCell(event) {
|
|
10107
|
-
return event.composedPath().find((target) => {
|
|
10108
|
-
return target.tagName?.toLowerCase() === 'teta-cell';
|
|
10109
|
-
});
|
|
10110
|
-
}
|
|
10111
|
-
getEventRow(event) {
|
|
10112
|
-
return event.composedPath().find((target) => {
|
|
10113
|
-
return target?.getAttribute && target?.getAttribute('data-row');
|
|
10114
|
-
});
|
|
10115
|
-
}
|
|
10116
10124
|
getCellElement(coordinates) {
|
|
10117
10125
|
return this._elementRef.nativeElement.querySelector(`teta-cell[data-row="${coordinates.row}"][data-column="${coordinates.column}"]`);
|
|
10118
10126
|
}
|
|
@@ -10126,7 +10134,7 @@ class TableComponent {
|
|
|
10126
10134
|
if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
|
|
10127
10135
|
return null;
|
|
10128
10136
|
}
|
|
10129
|
-
const cell = this.getEventCell(event);
|
|
10137
|
+
const cell = this._svc.getEventCell(event);
|
|
10130
10138
|
if (cell) {
|
|
10131
10139
|
const rowIndex = parseInt(cell.getAttribute('data-row'), 10);
|
|
10132
10140
|
const columnName = cell.getAttribute('data-column');
|
|
@@ -10144,7 +10152,7 @@ class TableComponent {
|
|
|
10144
10152
|
if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
|
|
10145
10153
|
return null;
|
|
10146
10154
|
}
|
|
10147
|
-
const rowElement = this.getEventRow(event);
|
|
10155
|
+
const rowElement = this._svc.getEventRow(event);
|
|
10148
10156
|
if (rowElement) {
|
|
10149
10157
|
const rowIndex = parseInt(rowElement.getAttribute('data-row'), 10);
|
|
10150
10158
|
if (rowIndex >= 0) {
|
|
@@ -10155,10 +10163,10 @@ class TableComponent {
|
|
|
10155
10163
|
}
|
|
10156
10164
|
}
|
|
10157
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 });
|
|
10158
|
-
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 });
|
|
10159
10167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
|
|
10160
10168
|
type: Component,
|
|
10161
|
-
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" }]
|
|
10162
10170
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
|
|
10163
10171
|
type: Input
|
|
10164
10172
|
}], columns: [{
|