@tetacom/ng-components 1.0.63 → 1.0.66
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/input/text-field/text-field.component.d.ts +0 -1
- package/esm2020/component/input/text-field/text-field.component.mjs +2 -8
- package/esm2020/component/table/head-cell/head-cell.component.mjs +3 -6
- package/esm2020/component/table/table/table.component.mjs +42 -37
- package/fesm2015/tetacom-ng-components.mjs +39 -43
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +44 -48
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3770,9 +3770,6 @@ class TextFieldComponent {
|
|
|
3770
3770
|
this.textField = true;
|
|
3771
3771
|
this.value = '';
|
|
3772
3772
|
}
|
|
3773
|
-
get tabindex() {
|
|
3774
|
-
return this.disabled ? null : 0;
|
|
3775
|
-
}
|
|
3776
3773
|
onFocus() {
|
|
3777
3774
|
if (this.disabled) {
|
|
3778
3775
|
return;
|
|
@@ -3807,7 +3804,7 @@ class TextFieldComponent {
|
|
|
3807
3804
|
}
|
|
3808
3805
|
}
|
|
3809
3806
|
TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3810
|
-
TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "
|
|
3807
|
+
TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "class.text-field": "this.textField" } }, providers: [
|
|
3811
3808
|
{
|
|
3812
3809
|
provide: NG_VALUE_ACCESSOR,
|
|
3813
3810
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
@@ -3842,9 +3839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
3842
3839
|
}], input: [{
|
|
3843
3840
|
type: ViewChild,
|
|
3844
3841
|
args: ['input', { static: false }]
|
|
3845
|
-
}], tabindex: [{
|
|
3846
|
-
type: HostBinding,
|
|
3847
|
-
args: ['attr.tabindex']
|
|
3848
3842
|
}], textField: [{
|
|
3849
3843
|
type: HostBinding,
|
|
3850
3844
|
args: ['class.text-field']
|
|
@@ -8972,10 +8966,10 @@ class HeadCellComponent {
|
|
|
8972
8966
|
}
|
|
8973
8967
|
}
|
|
8974
8968
|
HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8975
|
-
HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "
|
|
8969
|
+
HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row row_auto\">\n <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"false\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.left\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"column column_auto justify-content-center\">\n <div tetaDropdownHead\n draggable=\"true\"\n class=\"table-head__cell__wrapper\"\n (dragstart)=\"dragstart($event)\"\n [ngClass]=\"column.headCellClass\">\n <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n </div>\n <teta-head-cell-dropdown tetaDropdownContent\n *ngIf=\"showHeadCellMenu\"\n [tabTemplates]=\"tabTemplates\"\n [data]=\"data\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\">\n <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-filter-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-visibility-dropdown-tab [column]=\"column\"\n [columns]=\"columns\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "columns", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8976
8970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
8977
8971
|
type: Component,
|
|
8978
|
-
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
8972
|
+
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row_auto\">\n <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"false\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.left\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"column column_auto justify-content-center\">\n <div tetaDropdownHead\n draggable=\"true\"\n class=\"table-head__cell__wrapper\"\n (dragstart)=\"dragstart($event)\"\n [ngClass]=\"column.headCellClass\">\n <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n </div>\n <teta-head-cell-dropdown tetaDropdownContent\n *ngIf=\"showHeadCellMenu\"\n [tabTemplates]=\"tabTemplates\"\n [data]=\"data\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\">\n <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-filter-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-visibility-dropdown-tab [column]=\"column\"\n [columns]=\"columns\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
|
|
8979
8973
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
|
|
8980
8974
|
type: Input
|
|
8981
8975
|
}], showHeadCellMenu: [{
|
|
@@ -8994,9 +8988,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
8994
8988
|
}], columnsTemplate: [{
|
|
8995
8989
|
type: ViewChild,
|
|
8996
8990
|
args: ['columnsTemplate', { static: true }]
|
|
8997
|
-
}], dragstart: [{
|
|
8998
|
-
type: HostListener,
|
|
8999
|
-
args: ['dragstart', ['$event']]
|
|
9000
8991
|
}], dragenter: [{
|
|
9001
8992
|
type: HostListener,
|
|
9002
8993
|
args: ['dragenter', ['$event']]
|
|
@@ -9890,40 +9881,43 @@ class TableComponent {
|
|
|
9890
9881
|
}
|
|
9891
9882
|
handleClickOutsideAnyRow(event) {
|
|
9892
9883
|
const coordinates = this.getCoordinates(event);
|
|
9893
|
-
if (coordinates) {
|
|
9894
|
-
this.cellClick.emit({
|
|
9895
|
-
...this._svc.getCellInstance(coordinates),
|
|
9896
|
-
event
|
|
9897
|
-
});
|
|
9898
|
-
if (this.editEvent === EditEvent.click) {
|
|
9899
|
-
this.startEditRowOrCell(coordinates);
|
|
9900
|
-
}
|
|
9901
|
-
else {
|
|
9902
|
-
if (this._svc.currentEditCell && (coordinates.row !== this._svc.currentEditCell.row || coordinates.column !== this._svc.currentEditCell.column)) {
|
|
9903
|
-
this.startEditRowOrCell(null);
|
|
9904
|
-
}
|
|
9905
|
-
}
|
|
9906
|
-
}
|
|
9907
9884
|
const row = this.getRow(event);
|
|
9908
|
-
|
|
9909
|
-
|
|
9910
|
-
|
|
9911
|
-
|
|
9912
|
-
|
|
9913
|
-
|
|
9914
|
-
|
|
9915
|
-
|
|
9916
|
-
|
|
9885
|
+
const eventIsOnRow = this.eventIsOnRow(event);
|
|
9886
|
+
setTimeout(() => {
|
|
9887
|
+
if (coordinates) {
|
|
9888
|
+
this.cellClick.emit({
|
|
9889
|
+
...this._svc.getCellInstance(coordinates),
|
|
9890
|
+
event
|
|
9891
|
+
});
|
|
9892
|
+
if (this.editEvent === EditEvent.click) {
|
|
9893
|
+
this.startEditRowOrCell(coordinates);
|
|
9894
|
+
}
|
|
9895
|
+
else {
|
|
9896
|
+
if (this._svc.currentEditCell && (coordinates.row !== this._svc.currentEditCell.row || coordinates.column !== this._svc.currentEditCell.column)) {
|
|
9897
|
+
this.startEditRowOrCell(null);
|
|
9898
|
+
}
|
|
9899
|
+
}
|
|
9917
9900
|
}
|
|
9918
|
-
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9901
|
+
if (row) {
|
|
9902
|
+
if (event.ctrlKey) {
|
|
9903
|
+
this._svc.selectOrDeselectRow(row);
|
|
9904
|
+
}
|
|
9905
|
+
else if (event.shiftKey) {
|
|
9906
|
+
this._svc.selectRange(row);
|
|
9907
|
+
}
|
|
9908
|
+
else {
|
|
9909
|
+
this._svc.selectRows([row]);
|
|
9910
|
+
}
|
|
9922
9911
|
}
|
|
9923
|
-
|
|
9924
|
-
this.
|
|
9912
|
+
if (!eventIsOnRow && !event.defaultPrevented) {
|
|
9913
|
+
if (this.editType === EditType.row) {
|
|
9914
|
+
this._svc.startEditRow(null);
|
|
9915
|
+
}
|
|
9916
|
+
else {
|
|
9917
|
+
this._svc.startEditCell(null);
|
|
9918
|
+
}
|
|
9925
9919
|
}
|
|
9926
|
-
}
|
|
9920
|
+
});
|
|
9927
9921
|
}
|
|
9928
9922
|
focusIn(event) {
|
|
9929
9923
|
const coordinates = this.getCoordinates(event);
|
|
@@ -9940,13 +9934,15 @@ class TableComponent {
|
|
|
9940
9934
|
dblclick(event) {
|
|
9941
9935
|
const coordinates = this.getCoordinates(event);
|
|
9942
9936
|
if (coordinates) {
|
|
9943
|
-
|
|
9944
|
-
|
|
9945
|
-
|
|
9937
|
+
setTimeout(() => {
|
|
9938
|
+
this.cellDoubleClick.emit({
|
|
9939
|
+
...this._svc.getCellInstance(coordinates),
|
|
9940
|
+
event
|
|
9941
|
+
});
|
|
9942
|
+
if (this.editEvent === EditEvent.doubleClick) {
|
|
9943
|
+
this.startEditRowOrCell(coordinates);
|
|
9944
|
+
}
|
|
9946
9945
|
});
|
|
9947
|
-
if (this.editEvent === EditEvent.doubleClick) {
|
|
9948
|
-
this.startEditRowOrCell(coordinates);
|
|
9949
|
-
}
|
|
9950
9946
|
}
|
|
9951
9947
|
}
|
|
9952
9948
|
keydown(event) {
|