@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
|
@@ -3794,9 +3794,6 @@ class TextFieldComponent {
|
|
|
3794
3794
|
this.textField = true;
|
|
3795
3795
|
this.value = '';
|
|
3796
3796
|
}
|
|
3797
|
-
get tabindex() {
|
|
3798
|
-
return this.disabled ? null : 0;
|
|
3799
|
-
}
|
|
3800
3797
|
onFocus() {
|
|
3801
3798
|
if (this.disabled) {
|
|
3802
3799
|
return;
|
|
@@ -3831,7 +3828,7 @@ class TextFieldComponent {
|
|
|
3831
3828
|
}
|
|
3832
3829
|
}
|
|
3833
3830
|
TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3834
|
-
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", "
|
|
3831
|
+
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: [
|
|
3835
3832
|
{
|
|
3836
3833
|
provide: NG_VALUE_ACCESSOR,
|
|
3837
3834
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
@@ -3866,9 +3863,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
3866
3863
|
}], input: [{
|
|
3867
3864
|
type: ViewChild,
|
|
3868
3865
|
args: ['input', { static: false }]
|
|
3869
|
-
}], tabindex: [{
|
|
3870
|
-
type: HostBinding,
|
|
3871
|
-
args: ['attr.tabindex']
|
|
3872
3866
|
}], textField: [{
|
|
3873
3867
|
type: HostBinding,
|
|
3874
3868
|
args: ['class.text-field']
|
|
@@ -9045,10 +9039,10 @@ class HeadCellComponent {
|
|
|
9045
9039
|
}
|
|
9046
9040
|
}
|
|
9047
9041
|
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 });
|
|
9048
|
-
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: { "
|
|
9042
|
+
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 });
|
|
9049
9043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
9050
9044
|
type: Component,
|
|
9051
|
-
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
9045
|
+
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"] }]
|
|
9052
9046
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
|
|
9053
9047
|
type: Input
|
|
9054
9048
|
}], showHeadCellMenu: [{
|
|
@@ -9067,9 +9061,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9067
9061
|
}], columnsTemplate: [{
|
|
9068
9062
|
type: ViewChild,
|
|
9069
9063
|
args: ['columnsTemplate', { static: true }]
|
|
9070
|
-
}], dragstart: [{
|
|
9071
|
-
type: HostListener,
|
|
9072
|
-
args: ['dragstart', ['$event']]
|
|
9073
9064
|
}], dragenter: [{
|
|
9074
9065
|
type: HostListener,
|
|
9075
9066
|
args: ['dragenter', ['$event']]
|
|
@@ -9977,37 +9968,40 @@ class TableComponent {
|
|
|
9977
9968
|
}
|
|
9978
9969
|
handleClickOutsideAnyRow(event) {
|
|
9979
9970
|
const coordinates = this.getCoordinates(event);
|
|
9980
|
-
if (coordinates) {
|
|
9981
|
-
this.cellClick.emit(Object.assign(Object.assign({}, this._svc.getCellInstance(coordinates)), { event }));
|
|
9982
|
-
if (this.editEvent === EditEvent.click) {
|
|
9983
|
-
this.startEditRowOrCell(coordinates);
|
|
9984
|
-
}
|
|
9985
|
-
else {
|
|
9986
|
-
if (this._svc.currentEditCell && (coordinates.row !== this._svc.currentEditCell.row || coordinates.column !== this._svc.currentEditCell.column)) {
|
|
9987
|
-
this.startEditRowOrCell(null);
|
|
9988
|
-
}
|
|
9989
|
-
}
|
|
9990
|
-
}
|
|
9991
9971
|
const row = this.getRow(event);
|
|
9992
|
-
|
|
9993
|
-
|
|
9994
|
-
|
|
9995
|
-
|
|
9996
|
-
|
|
9997
|
-
|
|
9998
|
-
|
|
9999
|
-
|
|
10000
|
-
|
|
9972
|
+
const eventIsOnRow = this.eventIsOnRow(event);
|
|
9973
|
+
setTimeout(() => {
|
|
9974
|
+
if (coordinates) {
|
|
9975
|
+
this.cellClick.emit(Object.assign(Object.assign({}, this._svc.getCellInstance(coordinates)), { event }));
|
|
9976
|
+
if (this.editEvent === EditEvent.click) {
|
|
9977
|
+
this.startEditRowOrCell(coordinates);
|
|
9978
|
+
}
|
|
9979
|
+
else {
|
|
9980
|
+
if (this._svc.currentEditCell && (coordinates.row !== this._svc.currentEditCell.row || coordinates.column !== this._svc.currentEditCell.column)) {
|
|
9981
|
+
this.startEditRowOrCell(null);
|
|
9982
|
+
}
|
|
9983
|
+
}
|
|
10001
9984
|
}
|
|
10002
|
-
|
|
10003
|
-
|
|
10004
|
-
|
|
10005
|
-
|
|
9985
|
+
if (row) {
|
|
9986
|
+
if (event.ctrlKey) {
|
|
9987
|
+
this._svc.selectOrDeselectRow(row);
|
|
9988
|
+
}
|
|
9989
|
+
else if (event.shiftKey) {
|
|
9990
|
+
this._svc.selectRange(row);
|
|
9991
|
+
}
|
|
9992
|
+
else {
|
|
9993
|
+
this._svc.selectRows([row]);
|
|
9994
|
+
}
|
|
10006
9995
|
}
|
|
10007
|
-
|
|
10008
|
-
this.
|
|
9996
|
+
if (!eventIsOnRow && !event.defaultPrevented) {
|
|
9997
|
+
if (this.editType === EditType.row) {
|
|
9998
|
+
this._svc.startEditRow(null);
|
|
9999
|
+
}
|
|
10000
|
+
else {
|
|
10001
|
+
this._svc.startEditCell(null);
|
|
10002
|
+
}
|
|
10009
10003
|
}
|
|
10010
|
-
}
|
|
10004
|
+
});
|
|
10011
10005
|
}
|
|
10012
10006
|
focusIn(event) {
|
|
10013
10007
|
const coordinates = this.getCoordinates(event);
|
|
@@ -10021,10 +10015,12 @@ class TableComponent {
|
|
|
10021
10015
|
dblclick(event) {
|
|
10022
10016
|
const coordinates = this.getCoordinates(event);
|
|
10023
10017
|
if (coordinates) {
|
|
10024
|
-
|
|
10025
|
-
|
|
10026
|
-
this.
|
|
10027
|
-
|
|
10018
|
+
setTimeout(() => {
|
|
10019
|
+
this.cellDoubleClick.emit(Object.assign(Object.assign({}, this._svc.getCellInstance(coordinates)), { event }));
|
|
10020
|
+
if (this.editEvent === EditEvent.doubleClick) {
|
|
10021
|
+
this.startEditRowOrCell(coordinates);
|
|
10022
|
+
}
|
|
10023
|
+
});
|
|
10028
10024
|
}
|
|
10029
10025
|
}
|
|
10030
10026
|
keydown(event) {
|