diff --git a/packages/grid/src/components/cell-editors/cell-editor.scss b/packages/grid/src/components/cell-editors/cell-editor.scss
index 7e9ff161..1b70a7d3 100644
--- a/packages/grid/src/components/cell-editors/cell-editor.scss
+++ b/packages/grid/src/components/cell-editors/cell-editor.scss
@@ -3,3 +3,12 @@
height: 100%;
}
}
+
+.text-cell-editor {
+ display: block;
+
+ textarea {
+ min-height: 44px;
+ resize: none;
+ }
+}
diff --git a/packages/grid/src/components/cell-editors/text/text-editor.component.ts b/packages/grid/src/components/cell-editors/text/text-editor.component.ts
index b452c38a..ca2606c8 100644
--- a/packages/grid/src/components/cell-editors/text/text-editor.component.ts
+++ b/packages/grid/src/components/cell-editors/text/text-editor.component.ts
@@ -1,5 +1,5 @@
import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, Renderer2 } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ThyInputDirective } from 'ngx-tethys/input';
import { ThyAutofocusDirective, ThyEnterDirective } from 'ngx-tethys/shared';
@@ -8,13 +8,54 @@ import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
@Component({
selector: 'text-cell-editor',
template: `
-
+
`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective]
+ imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective],
+ host: {
+ class: 'd-block'
+ }
})
-export class TextCellEditorComponent extends AbstractEditCellEditor {
+export class TextCellEditorComponent extends AbstractEditCellEditor implements AfterViewInit {
+ private elementRef = inject(ElementRef);
+
+ private render2 = inject(Renderer2);
+
+ private maxHeight = 148;
+
+ constructor() {
+ super();
+ }
+
+ ngAfterViewInit() {
+ setTimeout(() => {
+ this.updateStyle();
+ });
+ }
+
+ updateStyle() {
+ const textarea = this.elementRef.nativeElement.querySelector('textarea');
+ const height = textarea.scrollHeight <= this.maxHeight ? textarea.scrollHeight : this.maxHeight;
+
+ this.render2.setStyle(textarea, 'height', `${height}px`);
+ this.render2.setStyle(textarea, 'min-height', `44px`);
+ this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`);
+ this.render2.setStyle(textarea, 'resize', 'none');
+ }
+
+ valueChange() {
+ this.updateStyle();
+ }
+
updateValue() {
this.updateFieldValue();
this.closePopover();
diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
index 33aca06e..c3a609d0 100644
--- a/packages/grid/src/grid.component.ts
+++ b/packages/grid/src/grid.component.ts
@@ -26,6 +26,7 @@ import { ThyProgress } from 'ngx-tethys/progress';
import { ThyRate } from 'ngx-tethys/rate';
import { ThyStopPropagationDirective } from 'ngx-tethys/shared';
import { ThyTag } from 'ngx-tethys/tag';
+import { mergeWith } from 'rxjs/operators';
import { ProgressEditorComponent } from './components';
import { FieldMenu } from './components/field-menu/field-menu.component';
import { AITableFieldPropertyEditor } from './components/field-property-editor/field-property-editor.component';
@@ -178,11 +179,12 @@ export class AITableGrid implements OnInit {
this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
this.dblClick(event);
});
- this.aiTableGridEventService.mousedownEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
- if ((event as MouseEvent)?.target) {
- this.aiTableGridSelectionService.updateSelect(event as MouseEvent);
- }
- });
+ this.aiTableGridEventService.mousedownEvent$
+ .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
+ .subscribe((event) => {
+ this.aiTableGridSelectionService.updateSelect(event);
+ });
+
this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
this.mouseoverHandle(event);
});
diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts
index 918753ff..f75c15f7 100644
--- a/packages/grid/src/services/event.service.ts
+++ b/packages/grid/src/services/event.service.ts
@@ -21,6 +21,8 @@ export class AITableGridEventService {
globalMouseoverEvent$ = new Subject();
+ globalMousedownEvent$ = new Subject();
+
private destroyRef = inject(DestroyRef);
private thyPopover = inject(ThyPopover);
@@ -54,6 +56,12 @@ export class AITableGridEventService {
.subscribe((event) => {
this.mousedownEvent$.next(event);
});
+
+ fromEvent(document, 'mousedown')
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((event) => {
+ this.globalMousedownEvent$.next(event as MouseEvent);
+ });
}
private getEditorComponent(type: AITableFieldType) {
@@ -92,7 +100,8 @@ export class AITableGridEventService {
outsideClosable: false,
hasBackdrop: false,
manualClosure: true,
- animationDisabled: true
+ animationDisabled: true,
+ autoAdaptive: true
});
return ref;
}
diff --git a/packages/grid/src/services/selection.servive.ts b/packages/grid/src/services/selection.servive.ts
index d909f6b1..25caba82 100644
--- a/packages/grid/src/services/selection.servive.ts
+++ b/packages/grid/src/services/selection.servive.ts
@@ -52,7 +52,11 @@ export class AITableGridSelectionService {
}
updateSelect(event: MouseEvent) {
- const target = event.target as HTMLElement;
+ const target = event?.target as HTMLElement;
+ if (!target) {
+ return;
+ }
+
const cellDom = target.closest('.grid-cell');
const colDom = target.closest('.grid-field');
if (cellDom) {
@@ -64,5 +68,8 @@ export class AITableGridSelectionService {
const fieldId = colDom.getAttribute('fieldId');
fieldId && this.selectField(fieldId);
}
+ if (!cellDom && !colDom) {
+ this.clearSelection();
+ }
}
}